Responsive images: where are we at?
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.