It’s been a few years now that Responsive Web Design (RWD) came to be part of the web best practices. Since then, a lot of effort has been put in finding a solution to the problem of responsive images. Facing an evergrowing number of devices width, pixel ratios, and the need for ways to handle art direction in those various contexts, the task was huge. The Responsive Images Community Group (RICG) was created about three years ago to look for an answer to that conundrum, and suggest possible solutions to the web standards organisation (W3C). A lot of discussions and attempts ensued. Ekino followed this evolution closely, and was present at the Responsive Images Meetup in september 2013, which managed to gather representants of every browser vendor at the same table to discuss the topic.
We’re happy to announce that the problem has now been solved, and some solutions have been found to handle RWD images. And those solutions can be used as soon as today!
The specifications for the revised “picture” element have been agreed upon by most major browser vendors, along with the “srcset” and “sizes” attributes on the “img” element. New image types, like WebP, are also handled.
One of the major improvement that came with the latest developments is that instead of having the developers try to handle every cases, they now provide all required informations to the browser, and it gets to pick the correct image. This allows for an additional flexibility. For example, the browser can decide to download a lower quality image in case of low bandwidth, or according to user preferences.
On the native implementation side, this feature is available today in Chrome Canary 37, the beta channel for Chrome, and should arrive in the public version of Chrome 38 by september 2014. Folks at Firefox are working on it too, and it has landed in their beta channel of Firefox 32. Is should be available in Firefox 33 by next october. WebKit work is officially underway too. Opera should quickly follow (we expect the feature in Opera 25), and even Internet Explorer has officially declared the feature as “under consideration”.
So far, the implementation in Chrome is working great on page load, and should be working on resize in the weeks to come.
Even better, a new version of the PictureFill “polyfill” has been created and can port the feature to nearly all browsers. Only IE8 can’t handle it, as it requires media queries support. It also has partial only support in Android 2.3, which can handle the two new “img” attributes but not the “picture” element. Note that most use cases can be covered without “picture”, though.
- Our demo of ‘srcset’ and ‘sizes’ attributes
- Our demo of the picture element
- Download the demo
- The official specifications
- The polyfill
Photo credits: Matthieu Larcher, photo taken at the responsive images meetup hosted by Mozilla in september 2013.