The Responsive Images Community Group — a group of developers helping the W3C create a web standard for handling images across devices — has a new demo page showing off how the proposed HTML element will work.
If you’d like to see the still-very-draft proposal in action, grab a copy of the special Chromium build (OS X and Linux only) and head on over to the new Responsive Images Demo Hub.
There are five demos, showing off a variety of features. The first is the obvious use case — serving smaller images to small screens and larger images to large screens. There are more sophisticated use cases as well, like the so-called art direction use case where the crop (or even the entire image) changes according to screen size.
For example, imagine you have a large image of someone giving a speech. You served that image to any screen larger than 800px. But for smaller screens you might not want to just shrink that image down since the speaker would be too small to recognize. Instead the element can be used to serve up a separate, more tightly cropped image to smaller screens.
Other use cases include serving up a monochrome image for print and serving different images based on device orientation.
If you’d like to create your own demo, head on over to the Responsive Images Community Group’s Github page and fork the demo code.
