Responsive Images Are Here. Now What?

Written by Jason Grigsby on

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.


Never miss an article!

Get Weekly Digests


Comments

Here the online utility to create responsive SVG icons http://icons8.com/responsive-icons

It allows to compound any two or three SVG images to insert it into HTML and the to show only one of them depending on the available space for the image. Big and high-detailed for wide space and low-res for a little space.

Silly me, I read your article assuming you were going to answer the question in the title. Instead I got a pitch for your upcoming presentations which I also assume will answer the question. Maybe you could write a follow up article, though, which answers the question.

Replies

Follow up articles is a great idea. In fact, I've written two since I wrote this post with a third in progress.

This was meant to kick things off and was written from the back of the room as I was preparing to go on stage and talk for the first time about all of the research I had done.

Anyways, there's an abundance of posts both before this one and after this one on responsive images. Enjoy!


Let’s discuss your project! Email Us