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.”