adaptImages.js provides a simple function
adaptImages, which you can use to support responsive images on your web pages today.
Here's an example.
Most of what I've done here is inspired from research already done by many other excellent developers, including Scott Jehl, Jason Grigsby, Mairead Buchan, Ethan Marcotte and others. A big thank you, from me, to all of them.
Pros and Cons
Responsive images aren't currently supported by web browsers, although many smart people are working towards that.
All available approaches, today, for adapting your pages to show the right size and resolution of images are hacks that compromise on one thing for another. It is important to understand what these compromises are before you pick a particular approach for your next project.
Here are the pros and cons of the approach
Works well when all images on your page follow the same criteria for selecting the version of an image to show. For example, if a page's width is greater than 640px, show the large version of all images on the page.
Is very fast since it only has to test the context once, unlike approaches that must support a different criteria for each image and each source.
Works completely client side, unlike earlier similar approaches, which require server side code.
Is quite flexible and lets you decide how to choose between versions of images to show. You could use page width, device resolution, matchMedia, observed network speed or any other mechanism to make your choice.
Is quite compact, the minified version is
Doesn't give you fine grained control on how each image is selected. Approaches that support
srcsetand media queries for each source are much better if you need that control.
The markup is a semantic mess.
The markup isn't future proof. In the future when a standard is implemented for responsive images, you will need to either continue to use adaptImages script or update all old content to support the new
How to use
To make an
img element adaptable (or responsive) you have to wrap it in a
noscript element. This ensures that the wrapped
data-* on the
noscript element to insert the correct img element onto the page.
noscript element must also define
data-version attributes, for example
<noscript data-s="s.jpg" data-l="l.jpg" data-alt="Red and Blue"> <img src="s.jpg" alt="Red and Blue" /> </noscript>
The default set of supported versions is
['l', 's'], but your page can override this by defining a
data-img-versions attribute on the document's body which takes a
space separated list of versions to support.
<body data-img-versions="large small large-2x small-2x"> <noscript data-alt="Cats" data-large="cats.large.jpg" data-large-2x="cats.large.2x.jpg" data-small="cats.small.jpg" data-small-2x="cats.small.2x.jpg"> <img src="cats.small.jpg" alt="Cats" /> </noscript> </body>
noscript element must also define a
data-alt attribute, the value of which will be used as the
alt attribute of the
img that is inserted in place of this
Once the DOM has loaded, you can call
adaptImages with the version you wish to show:
A more appropriate example could be:
adaptImages(document.documentElement.clientWidth > 640 ? 'l' : 's')
Or if you've defined
data-img-versions="large small large-2x small-2x" on the document's body, you could use this to support high pixel density devices, like Apple's Retina display:
var r = window.devicePixelRatio || 1; var w = document.documentElement.clientWidth; var s = w > 640 ? 'large' : 'small'; s = r > 1 ? s+'-2x' : s; adaptImages(s)
Build and Test
To build you need a posix shell like
bash with GNU make, nodejs and npm installed.
$ make $ make tests
- [whatwg] The <pic> element by Kornel Lesiński
- Picture Polyfill by Scott Jehl
- Creating responsive images using the noscript tag by Mairead Buchan
- A framework for discussing responsive images solutions by Jason Grigsby
- The real conflict behind and @srcset by Jason Grigsby
- Responsive Images: How they Almost Worked and What We Need by Mat Marquis
- Responsive Images by Filament Group
- Responsive Images by Ethan Marcotte
- Responsive Web Design by Ethan Marcotte
Copyright © 2012 Mrinal Wadhwa
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.