Serving Adaptive Images to Visitors

If you're already up and running with Responsive Design (RWD), what's the next step?

At first, I was pretty happy with the way RWD solved the problem layout on different sized devices. However, with the accelerated growth of mobile devices + high-resolution screens we've got another problem on our hands—serving whopping high-resolution images by default to all devices. Now if we're serving the images via CSS, this isn't a problem; we use our default stylesheet to serve standard resolution images to mobile devices, and then we might decide to swap the image out for a larger version on bigger screens or higher resolution devices, using Media Queries.

The problem really arrives when we're looking to serve images within our markup. For example, WordPress serves images dynamically, depending on which page you're visiting. Because we can't use CSS Media Queries to control what our WordPress database serves us, we need to think carefully how we manage our content. Thinking of high-resolution devices down the line (iPad 3?, and then what next, Apple? Retina Desktops?).

We need to start the ball rolling so that all of a sudden our sites don't look awful when a visitor hits them on a high-resolution screen.

I admit, I started advising clients that any images they upload via a CMS need to be twice as large as they actually appear, so that in future when the image is exposed to high-resolution device and scaled to 100%, it still looks crisp. Now say we're dealing with a large image at its default size (maybe 800px wide). This means I have to tell the client they need to upload a 1600px version, for when someone lands on their site with an iPad 3 (or whatever the Android equivalent is, Ice cream Sundae Sandwich with a 99 Flake?). All of a sudden any advantage we're gaining with Media Queries has been blasted away by these data-hungry high-resolution images.

So enough complaining, what's the solution? Well, in short, there's not a solution yet. It's still a work in progress; in fact a new discussion was kicked off the other day here. Reading Mathew Marquis' post, it really is depressing to think that it's probably going to be a while before this gets any traction. Further more, I don't know how the proposed solutions would integrate into a Content Management System like WordPress. However, do not fear, Matt Wilcox has come up with a great solution for the time being, which he calls Adaptive Images.

Bad news?

Under 'limitations' Matt points out that the solution relies on Javascript and cookies. But honestly? No big deal, it's better than doing nothing about our sticky situation. You can read more here.

Good news?

It's easy to use and it's a completely non-destructive solution. Ever want to change your approach to handling large images? Just remove the script and delete the cache file. That's it.