TIL: Image Dimensions over Compression in Site Performance

10.5 ms to first paint is a terrible performance hit by any measurement. Of course, scripts are the first suspect. Before going too deep in debugging, it's great to perform a site audit with your browser's dev inspector or the Lighthouse browser extension.

In this case, images were the guilty party. 1280 x 1280 pixels seems to be the right size optimized for larger screens. It may have been obvious, but interesting to learn that image dimensions affect the weight/size more so than the quality of the resolution.

Short answer to what the weight should be: You really shouldn't be serving image sizes over 100 KB. And that's for full-screen images.

Problem: Free copyright images from sites like Unsplash or professionally shot are extra wide by default. And if you've had images touched with AdobeXD or other photo editing software be mindful of dimensions or you could get default sizes of 1.5 MB!

If the dimensions are messed up, even compressing over sites like TinyPNG can still see images weighing 750-900 KBs. You don't have to choose. Adjust sizes and compress images before serving them as assets in your website. Compression algorithms include lossy, glossy or lossless compression depending on the quality you wish to serve.

To adjust image sizes: If you use a Mac, adjusting image sizes are really easy and you don't have to bother with complex photo editing software. Preview, Mac's default photo application: Tools -> Adjust  Size -> Fit Into (Enter Dimensions)

Additional  Reading: