Dieter Petereit June 5th, 2014

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. html5-logo

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.

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

4 comments

  1. I`ve been waiting for this moment since i was a “child” :). i guess i`ve needed this so bad that the time flew so fast i didn`t realize.

    let`s hope that in the nearer future IE (10 and 11) will support this feature, so we can work with it an have no problems with our customers :)

  2. Finally, something new to try I hope the developers keep the project going so we can use it to the fullest.

Leave a Reply

Your email address will not be published. Required fields are marked *