The A List Apart Blog Presents:

Testing Responsive Images

Article Continues Below

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

11 Reader Comments

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

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

Voice Content and Usability

In this excerpt from Voice Content and Usability, author Preston So talks about the messy, primordial nature of human speech and challenges with programming computers to deal with these complexities.

Designing for the Unexpected

As devices continue to diversify in dizzying ways, how can we make sure our work on the web stays as relevant as ever for the long haul? Cathy Dutton shares how practitioners must perfect designs both for the paradigms of the present and the twists of the future, come what may.

Asynchronous Design Critique: Getting Feedback

Receiving feedback can be a stressful experience: will an open-ended question attract helpful guidance or harsh criticism? Erin “Folletto“ Casali coaches us through a process to ensure that feedback always lands gracefully.

Asynchronous Design Critique: Giving Feedback

You’ve heard the term “constructive criticism” countless times but do you know how to deliver it? Part one of this series from Erin ‘Folletto’ Casali gives you a framework for it! Flex your feedback muscles and practice these skills to empower and inspire others without deflating or confusing them.

That’s Not My Burnout

If, like many folks during the pandemic, you’ve begun confusing burnout for achievement, Donna Bungard will show you how to recognize that you’re low on fuel and give you a map of rest stops where you can refill your tank.