Testing Responsive Images

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?

1. Download Chrome Canary
2. Copy and paste the following into Canary’s address bar:
   chrome://flags/#enable-experimental-web-platform-features
3. 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.