Just a quick post to note a responsive images technique that's worked reasonably for me, so far.
Picturefill is very useful when there's a need to serve differing crops of the same image to alternative displays. For example occasionally one might want to serve a wide angle shot of a subject to a large screen, but a cropped close-up to a small screen.
You can go really, really low with JPEG quality on retina screens because the pixels are so small. The typical JPEG problems like blocky looking artifacts and color issues are not as discernible, and as an added bonus downscaling the larger JPEG images on normal screens works really well.
At around the same time Daan Jobsis published his very interesting post Retina Revolution, in which he compares the rendering of high and low resolution versions of the same image, the former compressed, the latter saved at higher quality. He concludes:
The bottomline is that heavy compression doesn’t affect the final image as much as you would expect. This is because of the greater amount of pixels in the Retina image, compression artifacts are scaled down and therefore almost unnoticeable.
If I may illustrate with a couple of sample images. Here's an 1248 x 624 pixel resolution pic, saved at compression level 15 in Photoshop, weighing 50Kb:
Here's the same image at half the resolution, 624 x 312 pixels, saved at 60 compression, weighing 52Kb:
You won't see much difference if you're viewing this on a standard 1x pixel ratio screen. But if you are viewing it on a 2x pixel Retina resolution screen the first image will be much sharper. And it's actually 2Kb lighter.
To illustrate again, with a very different kind of image. Here's the 1248 x 624 pixel version, saved at compression level 0 in Photoshop, 77Kb in size:
And here's the 624 x 312 pixel version, saved at 60 compression, weighing 92Kb:
Again, not much difference on standard screens, but there's a big difference when viewed on high-resolution Retina displays.
I applied this technique for the first time on a new site I just published and it's been working pretty well (all the images on the page linked to are double resolution, compressed). The images look sharp on the Retina and standard displays on which I've tested, and load reasonably quickly at various locations when viewed with a smartphone.
Picturefill developer Scott Jehl has published a generous post acknowledging the attractive simplicity of the compressive images method. He writes:
[W]hen considering a jpeg image's file size, the level of compression makes more of a difference than its physical dimensions. In other words, given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it is both highly compressed and dramatically larger in dimensions than it is displayed.
As Scott notes the Picturefill technique is still required for those occasions when its necessary to serve alternative crops of the same image tailored to different displays. And some of post comments caution that the complex calculations necessary to downscale hi-res images can put a strain on some devices.
Before too long, perhaps, we'll have the ideal solution to the responsive images problem: a new adaptive image format designed specifically for the serving of image files across devices. Perhaps this will take the form of some kind of vector replacement for bitmap or an intelligent responsive image format that will work somewhat like a progressive JPG.