The Forgotten Responsive Images Spec: image-set()

Programming - Apr 19, 2024

Now that responsive images have landed in Chrome and Opera, I’ve started working on a flowchart to help people decide how to use these new features.

This work led me to wonder what ever happened to the image-set() specification.

For those who haven’t heard of the image-set() specification, it was a precursor to srcset which is now part of the responsive images specification. It was originally proposed in February 2012, and WebKit-based browsers shipped prefixed support for it in August of the same year.

The are a few differences between srcset and image-set(), but the biggest difference is that image-set() deals with CSS images whereas srcset is an attribute on the <img> element.

In 2012, the image-set() spec was still under development and we were cautioned against using it at the time. Because media queries were available in CSS, handling CSS images in responsive designs wasn’t as difficult as handling responsive images in HTML itself.

So the Responsive Images Community Group focused on how to solve the <img> problem. And I gradually forgot about image-set() thinking that it was moving forward in the CSS Working Group and browsers.

It seems that I may not have been the only one who forgot about image-set() because despite being two years older than <picture>, it is still only supported under prefixing in Chrome and Safari.1 Worse, it isn’t on the roadmap for either Internet Explorer or Firefox.

We need image-set() for the exact same reasons we need srcset and sizes. Whenever we are dealing with a CSS image that fits the resolution switching use case instead of the art direction use case, we should be using image-set() instead of media queries.

In fact, you can take nearly everything I wrote in Don’t Use <picture> (most of the time) and substitute image-set() for srcset and media queries for <picture> and the same logic applies.

We need image-set() for resolution switching because it gives browsers the choice of what size image source will work best. And in cases where all we are dealing with is resolution switching, the browser is better informed than we are as web authors.

We need your help to make sure that image-set() is implemented in browsers. Help us by voicing your support and ask browsers to prioritize this feature:

Image-set() is a key piece of having a comprehensive responsive images solution in browsers. It has been languishing too long. Let’s get it back on track.


  1. Eugeny Vlasenko built a nice test for image-set() as well as publishing the results of testing a bunch of browsers and their support of the spec.
Previous Next
Copyrights
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More