Skip to Main Content

Responsive Images: Solving the Image Overhead Problem

When implementing responsive web design techniques, one issue raised by detractors is that the largest image needed for any layout gets downloaded automatically resulting in potentially large bandwidth overhead – an undesirable side effect especially for mobile devices that may be using slower or expensive data connections.

Here’s one solution:

The technique explained and demonstrated enables “developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.” Pretty nifty.

The technique should work for Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), and Opera but results in larger bandwidth overhead in Firefox as well as IE 7 and earlier.

I’d like to hear if you give this a try, send me a link to your site or demo.

I’m cautiously optimistic about this approach. While is has limitations, it’s a good start on solving an important problem.