The Forgotten Responsive Images Spec: image-set()
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.
How we forgot about image-set()
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.
Why we need image-set()
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.
Help get image-set() into browsers
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.
-
Caniuse.com — image-set() has been so forgotten that caniuse.com isn’t tracking it despite the spec’s age. Help out by voting to add
image-set()to caniuse.
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.
Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.
