I want to use square custom cover images on my albums. For maximum quality without unnecessarily increasing page load time, am I better off with PNG or JPG files, what width and height or quality/maximum file size if JPG? At some point bigger must just bog down the screen display if there are dozens of cover images on a page, but I want to cover images to look as good as possible on a large computer display.
PNG file size varies wildly depending on the content of the image; they can be very economic for graphics, logos, etc. For photos, however, JPG is the way to go; PNG photos are massive.
As for width and height, that depends on your layout. Let’s just my site as example:
On large displays, my images can grow to a maximum of 340px. They will appear smaller on tablets and phones, of course, but due to the max-width set on my page layout, they will never be larger than 340px.
Now consider high-density displays, such as Apple’s “Retina” display, which has a pixel-density factor of 2x. For my 340px images to look their best on Apple’s “Retina” display, I need to export my JPGs as 680px. That’s the displayed size of 340 multiplied by the pixel-density, 2x.
The pixel-density factor on many phones and tablets goes higher, some as much as 3x, but the images will then typically be displayed smaller. so if the layout changes the number of columns such that the images scale down to, let’s say 240px or there about, then our 680px images are now perfectly displayed on a 3x display.
That’s a step further than I usually care to think about; I target 2x, and all else be damned. Files get look large otherwise, and I think with the responsive scaling, it mostly works out just fine in the end.
The last thing I recommend is that you use a tool like JPEGmini for ImageOptim to optimize your images. You can see me using such a tool in my most recent video, here:
Thanks Matt. That was very helpful. I was making my cover images WAY too large in a desire for maximum quality.
1 Like