State of Responsive Images 2017

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.

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.

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.

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.

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

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

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.