Compressive images

Just a quick post to note a responsive images technique that's worked reasonably for me, so far.

I've written a few posts lately in which I've thought aloud about the best way to serve images to multiple browsing devices supporting varying image resolutions.

I like the ingenious Picturefill solution developed by Scott Jehl of the Filament Group. This uses a bit of JavaScript to mimic the W3C's proposed picture element, which suggests an extension to HTML to allow the serving of multiple images through CSS media queries.

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.

But for the great majority of cases, when one simply wants to send the same image to all devices, there's a simpler solution which avoids Picturefill's JavaScript dependency: 'compressive images'.

The concept of the compressive image seems to have been pioneered, quite independently, by Thomas Fuchs and Daan Jobsis.

In his very handy little book Retinafy your web sites & apps Thomas argues that rather than using a complex JavaScript-based solution to serve multiple versions of an image to multiple devices we should just serve one version, a heavily compressed hi-resolution file, everywhere. So for example if we have a 600 by 300 pixel image slot, we should serve an image at twice that resolution, 1200 by 600 pixels, but compress it right down. This turns out to yield a pretty good result across the board:

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:

1248 x 624 pixels compression level 15 (50Kb)

Here's the same image at half the resolution, 624 x 312 pixels, saved at 60 compression, weighing 52Kb:

624 x 312 pixels compression level 60 (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:

1248 x 624 pixels compression level 0 (77Kb)

And here's the 624 x 312 pixel version, saved at 60 compression, weighing 92Kb:

624 x 312 pixels compression level 60 (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.

But in the meantime I'll be sticking with compressive images, a technique that doesn't require complex markup, JavaScript or a server side script generating multiple versions of uploaded images.

Categories: