Resources for responsive images

This is a brief post to note a couple of interesting responsive image resources I discovered today. Perhaps I'm just slow and they're pretty well known already, but anyway…

The first was a fascinating little post by Dan Sheerman on Boagworld, How should we handle responsive images. This explained something I've been wondering about regarding responsive images for a while: why, if big images are so bad for mobile, have I managed to access most image-heavy web pages on my phone without too much trouble, even when network speed hasn't been great? When bandwidth quality is really bad I'm struggling to load text-only pages as well as the image-laden: the size of the images don't make much difference.

In a nutshell, Dan's post points out:

Mobile networks (read: low bandwidth connections) already compress the hell out of served images.

I have to admit that had never occurred to me before. And I'm surprised network compression has never been mentioned in the dozens of articles - online and offline - I've read about responsive images. Perhaps I just overlooked it. Dan illustrates this simple point by showing the effect of mobile carrier image crunching an uncompressed photo, which in its original state is 1200 by 899 pixels, and weighs in at 407Kb. But by the time it is received by a typical phone on a typical mobile network it has been crushed right down to 45Kb. As Dan notes, 'mobile networks have already implemented the technologies required so users can make the most of their data allowances, and keep their load as low as possible.'

And he goes on to caution that we might actually make things worse by attempting to serve smaller lower-res versions of the image to mobile devices: after the mobile carrier has applied its own compression to our painstakingly optimised image the quality of the final version - as seen by the mobile user - is less than stellar. Dan suggests that if we actually do nothing we get:

A crisper image by default, on ‘common’ mobile device resolutions, using one file, roughly an 88% saving of bandwidth where viewed on a mobile connection, and 0% extra effort.

All very interesting. I'm not going abandon the responsive image techniques I've been experimenting with on recent projects - I've been using the Picturefill polyfill a fair bit - but I'll certainly be checking optimised images carefully on mobile to see whether I'm actually compressing too much.

The other thing I heard about today was the publication of a what looks to be a very useful book by Thomas Fuchs, Retinafy your web sites & apps, a detailed look at best practice for serving images to Retina displays. I have to admit I've been agonising over whether to serve hi-res images, conscious of the bandwidth issues. What's the lesser evil: blurry but relatively fast-loading images, or properly 'Retinafied' images that take a while to load? According to the promo site the book doesn't sit on the fence, arguing in favour of serving Retina images by default. It's yet another book, but seems like a must read.

Categories: