File Under: CSS

Safari, Chrome Ship Proposed High-Resolution Image Solution

The WebKit project recently added experimental support for the proposed CSS level 4 image-set specification. Image-set is designed to offer web developers a way to target high-resolution screens, solving one of the design challenges of Apple’s Retina displays.

Both Safari 6 and Chrome 21 support image-set with vendor-prefixes and developer Jason Grigsby has put together a test page over at Cloud Four, where you can see the new image-set in action.

The syntax will look something like this:

#selector {
        background-image: url(no-image-set.png); 
        background-image: -webkit-image-set(url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);
        /* other prefixes for -moz, -o and -ms go here */

[Update: I’ve removed the unprefixed version in the above example. As Peter Linss, CSS Working Group Co-Chair, writes in a comment on Grigsby’s post, “It’s fine to try out experimental features on non-production web sites, and reasonable to try to anticipate other vendor’s experimental implementation… But putting a non-prefixed version of a property or value (as in this case) into any style sheet when the feature does not even exist in an official working draft of a specification, let alone in any kind of stable form, is flat out wrong.”]

That may look a bit odd since the prefix is on the property value instead of the property itself, but the basic syntax is pretty straightforward. These rules tell the browser to use myimage.jpg if the pixel density of the screen is 1x and myimage-hires.jpg if the pixel density is 2x.

The big question is why would you want to use image-set instead of media queries, which could accomplish nearly the same thing?

As Grigsby points out, one of the big advantages of image-set is that it doesn’t tell a browser which image to use, it just provides options. That leaves the door open to situations where a screen may be high-res, but the browser is smart enough to know when it’s on a slow network and thus still opt for the lower-resolution image.

For some more details on the syntax and to see it in action head on over the Cloud Four blog, though note that you’ll need either Safari 6 or Chrome 20+ to see image-set in action. It’s also worth noting that image-set is still just a proposal and not yet an official part of the CSS 4 spec. Things could and most likely will change, so proceed with caution in your work.