The BostonGlobe.com on mobile, tablet and laptop screens
We've looked at several different ways to handle images in responsive web design, but new techniques keep popping up, many of them well worth exploring. Part of the reason there is no one answer, no go-download-this-code sort of solution, is that everything about responsive design is still very experimental, responsive images doubly so.
Even some of the best examples of responsive design -- like the recently launched BostonGlobe.com -- don't handle responsive images properly (the team behind the Globe site is reportedly working on a fix).
One thing is clear though, serving full size images to mobile users is a bad idea. Using max-width on your images means that they will scale yes, but, by itself, it doesn’t address the bandwidth issue. In fact, loading big images and forcing mobile browsers to scale them is the worst of both worlds — large image downloads and processor-intensive downscaling. And, not only are large images a waste of bandwidth for mobile users, with mobile data caps becoming more common, you may well be costing your visitors money.
The question is, which of the myriad options is the right way to serve responsive images?
Jason Grigsby over at the Cloud Four blog has started a series of articles tackling that question, and the answer is, it depends. "When I started working on this project two months ago," writes Grigsby, "I thought I would get to the end and be able to say, 'Here are the three approaches that work best. Go download them... but what I’ve found is that there is no comprehensive solution."
Grigsby then dives into the most comprehensive rundown of responsive image techniques that we've ever seen. For some more background on what responsive images are, why you want them and how you can go about creating future-friendly" images, check out Responsive IMGs Part 1. Then, when you're ready to dive into the various possibilities, read Responsive Images Part 2, which covers everything from JavaScript solutions to server side detection techniques.
See Also:
