I'm looking for advice/feedback on the optimal sizes for images. Let's say that I am displaying images on the front page of my Backdrop CMS website at a maximum of 600px (height) by 450px (wide). What are the best settings for the image style I decide to use.
In the past, I've assumed that in a case like this, I should first scale my images to EITHER 600px wide or 450px high (I don't allow upscaling) AND then crop them to exactly those dimensions. I expected this to get the best possible outcome for both file size and quality.
Recently, I've heard other folks in our community suggest setting the image style to create images larger than the final display size. Does that really help? How much bigger?
Let's debate... :-)
Can anyone recommend some really good resources, articles, best practices that address optimizing images for size, speed, and quality?
Comments
Most of the times, I use styles that generate images of width and height twice as large compared to the rendered dimensions. For instance, if an image display size has a maximum of 600 x 450px, I set the style to generate 1200 x 900px. This produces sharp and clear images not only on screens with standard resolution but also on high resolution screens (which nowadays may be even more common).
I'm admittedly coming from an old school perspective since I'm coming from the dial-up days where you'd want to keep a total page load to under 30kb as to not frustrate the visitor, but personally I still prefer to stick to the maximum pixel size I'll be displaying it at. I may use oversized images in certain displays assuming they'll be used larger elsewhere (for example a side image which goes full width when responding to smaller displays) or in the case where I'd expect someone might want to take a look at something higher res by opening in a new window or with a 'view larger' link of some sort.
If I was showcasing something where the image is the star (art of some sort) then I'd agree with Olafski - go for 2x - these days every browser seems to do a great job of downsizing (wasn't always the case) - just keep in mind you're still forcing the extra file size on users which will effect load times, and while we might all have pretty sweet data transfer rates not everyone does, and either way Google will give a little more love to the faster loading page all other things aside.