Responsive Images: Finally The Picture Element Arrives!

This has taken quite a while. There was a lot of discussion, but now reality has it. The picture element as propagated by the W3C has finally arrived. If you are into the matter, you might know that the WhatWG had tried to standardize an additional attribute to the image element, named srcset as opposed to picture. Whoever believed in what WhatWG said, as they stated they'd stand for the "living standard" while W3C would be more an administrator of a static snapshot, got it wrong. W3C is alive and kicking.

Responsive Images: Rocky Road to Standardization

I won't bother you with all the details of the discussion of the last two years. Just allow me a little introduction for those who didn't follow the topic too closely. In the ongoing debate around standards for the next web not everything went without controversy. During the struggle about which would be the right solution for responsive images and other important decisions for setting the direction, one of the most important working groups, the Web Hypertext Application Technology Working Group (WHATWG) split with W3C and announced, they'd be much quicker developing new standards alone, than under the realm of the W3C. That was in July 2012. A few days before the split happened, WhatWG had decided to propagate srcset as the solution for responsive images. W3C didn't take too long to react. In the fall of 2012 they made clear, that their HTML Working Group, supported by the W3C Community Group, would instead be propagating and developing the picture element. They set up a tight schedule to do so. After that skirmish, not a lot happened, though there may have been loads of activities behind the curtain. In February of 2014 we here at Noupe lost our patience and suggested, you'd better no longer wait for the standard, whatever it might be, but go with a then new solution by the name of rwd.images.js.

Responsive Images: Chrome Canary Has it, More to Come

And now it actually happened. We hadn't dared to hope for it anymore. Then, in an article in A List Apart just yesterday Mat Marquis, head of the Responsive Images Community Group, former member of the jQuery Mobile team and designer/developer at not so unknown Filament Group, announced the availability of the first browser implementation of the picture element. It's Chrome Canary, the developer version of Google's Chrome browser, that you can take for immediate testing. At that's what Marquis asks you to do, testing. Chrome Canary is available here. Open it after installation and paste this line to the url bar

chrome://flags/#enable-experimental-web-platform-features

push "Enter" and in the following window click "Enable". No worries, changes made to Canary will not reflect in your regular Chrome installation. The two are held completely separate. As a starting point for your tests, Marquis recommends the Picturefill demos, as their polyfills are designed to only enter when the calling browser lacks native capabilities. Looking at the roadmaps of the other major players, we can verify, that Firefox as well as the Webkit project are approaching implementation fast, too. It is only the dormant giant from Redmond, that stays behind. Microsoft notes the picture element as well as the srcset attribute as Under Consideration. Well, I have IE not even under consideration anyway. So what... And now, warriors of web development. Go for it! What do you think of the current implementation? By the way: At this moment, the picture element will not automatically resize on viewport changes, click refresh to force it to. This flaw will be ironed out in the next update.