Modern Web Engineerinng

[munem15-4873]

Filament Group's Responsive Images


This technique, presented by the Filament Group, takes this issue into
consideration and not only resizes images proportionately, but shrinks
image resolution on smaller devices, so very large images don't waste
space unnecessarily on small screens.

This technique requires a few files, all of which are available on Github. First,
a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif).
Then, we can use just a bit of HTML to reference both the larger and
smaller resolution images: first, the small image, with a .r prefix to clarify
that it should be responsive, and then a reference to the bigger image
using data-fullsrc.

1 <img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute, defined in the files linked
to above. For any screen that is wider than 480 pixels, the larger-resolution
image (largeRes.jpg) will load; smaller screens wouldn't need to load the
bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript file inserts a base element that allows the page to separate
responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large
or small images are loaded as necessary. With other techniques, all higherresolution
images would have had to be downloaded, even if the larger
versions would never be used. Particularly for websites with a lot of images,
this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari,
Chrome and Opera, as well as mobile devices that use these same browsers
(iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still
resize as one would expect of a responsive image, except that both
resolutions are downloaded together, so the end benefit of saving space
with this technique is void.