Jun 05 2014

Responsive Images: Finally The Picture Element Arrives!

Advertisement

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

1
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.

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and 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 webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • roscabgdn, 06 June 2014

    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 :)

  • chetan@9spl, 09 June 2014

    Nice article. thanks for the sharing…

  • John Nicholson, 10 June 2014

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

  • Rob, 15 August 2014

    Yeah, finally! No it’s time for some testing.

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description