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: https://github.com/filamentgroup/Responsive-Images#readme
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.