19/09/2019 2 Minutes read Tech 

Responsive images: where are we at?

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.
ekino paris Team communication

[Lire en version française]

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.

The polyfill only takes over in the event that the feature isn’t natively supported, so it can be used with no risk of conflict with the native implementation. The only drawback to consider before using it is that an http request for the fallback image will have to be made before JavaScript can kick in and call the correct one. But we’re all using the “mobile first” principle and having a lightweight image as a fallback, aren’t we ? Anyhow, we’ve got a shiny new toy to play with, and our responsive sites can only get better with it. Will your next website be the first to offer real responsive images to your users ?

Links