At long last, the native picture
element isn’t just coming: it’s here. The picture
element has landed in Canary—Google’s “beta” channel for upcoming Chrome releases—and we can try it out for ourselves right now. Firefox isn’t far behind, and WebKit work is officially underway.
We got the picture
element this far, and now that we’re in the final stages we have another opportunity to help things along: testing and filing bugs. Yoav Weiss is hard at work, testing and patching as much as possible before this ships in Chrome stable—but the more eyes we have on this, the better.
Ready to get started?
- Download Chrome Canary
- Copy and paste the following into Canary’s address bar:
chrome://flags/#enable-experimental-web-platform-features
- Click “enable”
The page at chrome://flags
allows you to tinker with the browser’s internals a bit, enabling and disabling features that might not quite be ready for prime time: the picture
element is, for now, behind the “experimental web platform features” option—including sizes
and srcset
. Don’t worry: changing this option in Canary won’t have any effect on your regular Chrome app.
Kicking the tires
And now—finally—we can try out the native picture
element for ourselves. The Picturefill demos are a great place to get started, since Picturefill only takes over in the event that the element isn’t natively supported. One thing to note is that this early version of picture
doesn’t re-evaluate when the viewport resizes—at least until the next major patch lands—so you’ll need to reload the page to see things change, for now.
Experiment with the new markup for yourself, either by forking the Picturefill repo and making changes to the existing demos, or by writing your own from scratch. If something seems wrong, file an issue on Yoav’s fork of the Google Blink code, or join us in the RICG IRC channel to discuss what you’re seeing—or just to share your test cases with us, so we can test the Firefox and Safari implementations against them when the time comes.
We couldn’t have made it this far without the hard work of the design and development community—and the more testing we do now, the better responsive images will be for it.
This is good news!
Any word on Microsoft support?
@Hugo – According to http://status.modern.ie/pictureelement it is “Under consideration”
Rejoice!
If you want to test on Linux without compiling everything, http://atix.be/ZZU
Great article – cool features…enabled. Thx
Great article… Trying this out now, Thankss
Anyone have any deets on the
sizes
element??NotAMatMarquisFan: XOXO
@Henri – the sizes attribute is also enabled by the same flag.
Wonderful….. I followed the above three steps and it shows me the best result that is really important if we are going to develop a fully responsive website.
Really nice article…. Quite knowledgeable … Thanks for sharing information. I have become habitual to read your knowledgeable articles. Keep it up.