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:
- 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
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.
11 Reader Comments
This is good news!
Any word on Microsoft support?
@Hugo – According to http://status.modern.ie/pictureelement it is “Under consideration”
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
@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.
Got something to say?
We have turned off comments, but you can see what folks had to say before we did so.
More from ALA
Personalization Pyramid: A Framework for Designing with User Data
Mobile-First CSS: Is It Time for a Rethink?
Designers, (Re)define Success First
Breaking Out of the Box
How to Sell UX Research with Two Simple Questions