This work led me to wonder what ever happened to the
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
image-set(), but the biggest difference is that
image-set() deals with CSS images whereas
srcset is an attribute on the
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.
image-set() for the exact same reasons we need
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
srcset and media queries for
<picture> and the same logic applies.
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:
- Internet Explorer — image-set() is on the IE’s new User Voice platform where you can vote for image-set() to get implemented.
- Mozilla — The bug tracking implementation of image-set() is named after the specification: Bug 703431 – Implement CSS Image Values and Replaced Content Module Level 3. Chime in there to express your desire to see image-set() implemented.
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.
- 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.