Responsive images

Responsive images should ideally serve the client images in sizes that fit the media, instead of serving 1000 pixel images to small handheld devices, which is both a waste of your time, bandwidth and data you may be paying for. There are no de facto standards for solving this part of the responsive web design puzzle just yet, but here are some suggestions I have collected to help you get started.

That’s right; I am not going to try suggest my own mocked up solution, but rather point you in the direction of those who have tried already, both server side and client side. Two of these articles are from 24ways.org, but with different authors.

Server side

In the article outlining the server-side solution, Matt Wilcox uses Javascript to set a cookie with info about the client. A .htaccess file the intercepts requests for images and route them through a PHP script which does the magic, and even creates an image that fits the bill if one does not exist already.

Client side

In the second article, Jake Archibald takes the client side approach, where he criticizes the server side approach a bit, while still pointing out that his own solution is so dirty it can be regarded as pure filth. He even goes on to compare it to spacer gifs and whatnot.

Anyways, part of his solution is to add an inline Javascript around all images that writes out HTML comments, so that JS-enabled clients won’t see the default images, but instead get responsive images.

Both articles are great reads and great ideas, but also testaments to the fact that browsers are not there yet, technically.

The Filament Group’s solution

While you’re still here reading, I should also mention that The Filament group did a lovely frontend job with the Boston Globe responsive redesign that launched in Dec. 2010. They also had help from the “father” of responsive web design, Ethan Marcotte, and they too faced the problem of responsive images.

I recommend reading their article about context aware image sizing, where they explain how they tackled the issue.

Which solutions do you use?

Comment below!