For dynamic/responsive sites, where an image is set to be the full width of the screen (width:100%) and will dynamically resize as the user changes browser width… why do they advise that the original image should be as large as possible?
Is it because scaling an image down doesn’t degrade the quality as much as scaling up does?
That intuitively feels like it would be the case but my recent experiments with scaling images down using editing software always produce blurry results.
…Whereas somehow when I see a browser scaling down an image it seems like it retains its quality. Is that because browsers auto-sharpen images or something?
The more pixels in an image, the more the browser has to work with if the image has to be scaled up. A nice trick is to make the dimensions of the image quite large but the quality relatively low (like 30%). That way, no matter what size the viewport, there will be plenty of pixels for the browser to play with.
This is also handy for retina displays, which will make images look blurry unless there are lots of extra pixels to play with.
Do you mean it’s a nice trick because it keeps file sizes down? I don’t understand how having only 30% quality could look good. Unless you mean that the browser hides the imperfections as it scales it down, because there are so many pixels?
If I use a 1920px width image on my site - set to width:100%… And then I view the page with an 800px viewport… will it look better or worse than if I’d used a 1280 width image? I had presumed that since it takes more resizing to get from 1920 to 800 that it would look worse, but perhaps the extra pixels compensate for that?
I read in most places that you should always display images at their original size, to avoid quality loss.
Is this ‘trick’ just better for dynamic/responsive images or is it good to do for all images? When the pixels are available, why not always use x2 size images and let the browser scale them down?
These days, with retina screens, that’s a good policy, as far as I can see. There is a lot of work being done at the moment to devise an HTML solution for dealing with responsive/retina images, such as the <picture> element, but it’s a hot debate with no obvious resolution (hehe) in view yet.
The technique I described and linked to seems to work really well in my experience, except for images that contain text. It doesn’t seem to work too well for those … though I’d question why text is in the image anyway. If it’s a picture of a sign, then fair enough, but for a banner or similar, the text should be real text anyway.