image-set – CSS for retina displays

September 1, 2016

There are a few different ways to serve higher quality images to screens with retina displays. A new one I just found out about is the CSS image-set function.

At the time of this writing, it only works on Chrome and Safari.

CSS image-set function caniuse

Image-set Example

The CSS looks a little something like this:

background-image: -webkit-image-set(url(./img/logo.png) 1x,
                                    url(./img/logo.png) 2x,
                                    url(./img/logo.png) 3x);

The function can take up to three parameters. According to the W3 spec:

This example shows how to use ‘image-set()’ to provide an image in three versions: a “normal” version, a “high-res” version, and an extra-high resolution version for use in high-quality printing (as printers can have extremely high resolution):

So you get your regular image, a retina display one and lastly a high res one to send for printing!

Pretty cool stuff.