Responsive Images Are Here. Now What?

Responsive images have landed in Chrome and Opera. They are in development for Firefox and Webkit. They are under consideration for Internet Explorer.

This is an amazing accomplishment. To get here, the following happened including many firsts:

• The Responsive Images Community Group was formed. It now cited as a model for how W3C Community Groups can inform the standards process.
• There have been four major specifications (picture, srcset, src-n, and the final picture specification) along with many minor iterations along the way.
• An IndieGogo campaign to fund Yoav Weiss’s implementation of the feature in Blink. The first crowd-sourced funding of a browser feature ever.
• Hours of time put in by volunteers and browser makers to make sure these standards will work and implementing them in browsers.

After nearly four years and a ton work, we finally have responsive images.

Now the hard work begins.

Responsive images will now go from the limited number of people in the Responsive Images Community Group to the web at large.

Many people will struggle to learn the new tools and to ascertain when it makes sense to use each. Not to mention the navigating the thorny, unsolvable problems of responsive image breakpoints.

For the last few weeks, I’ve been working on ways to help people learn responsive images. The first output of that work will start tomorrow with a presentation called “Responsive Images Are Here. Now What?” at An Event Apart Atlanta. I’m repeating the talk at AEA Seattle and San Diego.

If you want a deeper dive, I’m giving a full day workshop at UX Mobile Immersion on When Responsive Web Design Meets the Real World which will cover images in detail.

The research I did to prepare for those talks has created a backlog of articles that I want to write. Watch this space. They are coming soon.

So responsive images are here, and they are going to be a big deal for the web in 2015. It’s time to prepare for them; to understand how to use them; and to start tackling the tough challenges of integrating them into our sites.

I can’t wait to see how people use these new browser features.

P.S. If you attend AEA or UXIM, you can use these discount codes to save money. ‘AEAGRIG’ will save you $100 on any AEA event. ‘UXIMSPK’ will save you $300 on the UXIM workshops.