State of Responsive Images 2017

Written by Jason Grigsby on

Tomorrow I’m speaking at ImageCon. It’s been over a year since I last gave my talk. As I dusted off my presentation and updated it, it seemed like a good time to assess the state of the responsive images.

Good news: wide browser support

To start with, we should acknowledge that we’re in fantastic shape compared to where we were in 2010 when I first wrote about responsive images.

The new responsive images standards are available in all current browsers with the exception of Opera Mini. And if your fallback image is optimized for small screens—which it should be—Opera Mini’s lack of support isn’t a problem.

Mixed news: inconsistent implementations

I still get questions from designers and developers who find different behavior from browser to browser. Some of this is by design. We want browsers to compete to find better ways to process images more quickly and thus srcset allows browsers the freedom to experiment in their implementations.

But the different behavior causes confusion. The most common question I hear is from people testing srcset in Safari and not seeing new images download as the viewport size changes.

There is nothing that says that the browser needs to download new images as the viewport changes. In fact, it probably doesn’t make sense to download a new image if the browser already has a larger version of it and can downsize it.

So while this may be a feature and not a bug, we could do a better job setting expectations for developers.

Unfulfilled opportunities

The new responsive image standards makes it possible for us to experiment with different types of image formats without breaking the web.

Unfortunately, I haven’t seen much experimentation happening in this space. Our tooling for different image formats remains inadequate for the task.

Some of the lack of experimentation has do with the fact that many organizations need to automate their image workflows. Organizations seem to recognize this need, but the work often gets bumped in favor of more pressing priorities.

Unfinished business

While our responsive images work covered the most pressing needs, we’re stalled on some important additions to our responsive images toolkit:

Our forgotten image-set

image-set was the precursor to srcset, but now it languishes behind srcset. It needs support for width-descriptors to be as powerful as srcset. This has been discussed, but has stalled.

SVG embedded responsive images

SVG needs support for embedding responsive images. This has been an obstacle on several of our projects recently. We find SVG with embedded raster images to be incredibly useful and efficient with the notable exception of the embedded image size.

Client hints support

Client hints can greatly simplify our responsive images markup. Unfortunately, they are only supported in Blink-based browsers (Chrome and Opera) as of now. To use client hints, you need user agent detection to decide whether or not you can skip the more verbose responsive images markup or not.

The state of responsive images

We’re in a much better place than we were even two years ago. But we’ve got some remaining work to do before we can close the book on responsive images altogether.

Jason Grigsby

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He spends far too much time obsessing over mobile and the web. Follow him at @grigs.

Never miss an article!

Get Weekly Digests


Comments

Add a comment

You can imitate responsive SVG-embedded images with <foreignObject>:

<svg>
<foreignObject width="whatevs" height="foo">
<img srcset="...">
</foreignObject>
</svg>

There's <switch> for IE fallbacks, but lookahead preparsers download images twice then, which sucks. A fixup script is probably the best way to go.

(Be careful with sizes inside SVG, since its sizing can get complex.

Hi Jason,
Great writeup! I'm curious why you only referred to SVGs in terms of embedded images, when SVG is a responsive image with potentially really tiny filesizes out of the box itself? I've made full illustrative graphics in less than 2KB, that can not only adjust to any size but stay crisp while doing so. We can also do other things like adjust the viewBox and change up the image for different screen sizes, use SVG sprites, the possibilities are endless :)

Also, as Taylor mentioned, SVGs do pretty easily support embedded bitmaps, with foreign object- so that is possible as well.

Thanks for the writeup and status on all the other image formats! It helps the rest of us adjust understand where things are at with the spec. Much appreciated.

Best wishes,
Sarah

Replies

Hi Sarah,

YAY! It made my day to see your comment. Let me see if I can answer your questions.

I'm curious why you only referred to SVGs in terms of embedded images, when SVG is a responsive image with potentially really tiny filesizes out of the box itself?

This has more to do with what I'm talking about when I say responsive images. Responsive images became a bit of a shorthand for the types of images that weren't working in responsive designs. In particular, the inline imgs which have the biggest problems.

SVG images have always worked well for responsive designs. Back in 2013, I wrote 8 guidelines for responsive images and the first guideline was to use SVG as much as possible.

(I also mentioned icon fonts in that article, but as my colleague Tyler explained, we've stopped using them in favor of SVG.)

I've made full illustrative graphics in less than 2KB, that can not only adjust to any size but stay crisp while doing so. We can also do other things like adjust the viewBox and change up the image for different screen sizes, use SVG sprites, the possibilities are endless :)

We're big SVG fans. In fact, it is a running joke in our office that you don't want to get Tyler started talking about SVG. Tyler's written quite a few articles about SVG.

Also, as Taylor mentioned, SVGs do pretty easily support embedded bitmaps, with foreign object- so that is possible as well.

This is incredibly exciting. We didn't know about <foreignobject>. We can't wait to try it out!

Thanks again for the comment. And I haven't yet had a chance to thank Taylor as well. Comments like these make it worth writing.

Thank You,

Jason

Hi Jason, what is your opinion on responsive images on-demand services like Sirv, Cloudinary, Imgix etc?

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us