Anyone who has put together a website with high-DPI displays in mind has likely used the {prefix}-device-pixel-ratio CSS media query and then specified the background images independently under each different media query. This can not only get tedious but media queries also split the display rules for a single element into multiple locations in your stylesheet. You can get away from this separation by using the SASS CSS preprocessor and the @media directive which allows you to keep your element media query rules with the element styles. Also available is the recently released css function called image-set() available under the -webkit- prefix.

background-image: -webkit-image-set(
  url(image1x.jpg) 1x,
  url(image2x.jpg) 2x
);

The image-set() CSS function tells the browser that it can choose from multiple images to display depending on the pixel-ratio. Not only will the browser download only the appropriate image but it will also properly scale it.

background-image: url(image1x.jpg);
background-image: -webkit-image-set(
  url(image1x.jpg) 1x,
  url(image2x.jpg) 2x
);

As I’m sure you can already guess, but at the time of this writing the support for this CSS function is very limited so you should use a fallback similar to the one posted above. At the time of writing this is in the CSS4 working draft and is supported in Safari 6 and Chrome 21+ but there is no doubt that the others are working towards an implementation as well.

Have you used this function? Plan to use it in your application? Let me know how it goes - comment below or mention me on twitter @fromanegg. Thanks for reading!