As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on  image-set()  and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.

What is Image-Set()?

You’re probably asking what the heck   image-set()  even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.

How to Use Image-Set()

You use the   image-set()  notation where ever you would use images in your CSS. It has the format:

Add as many images as you need, separated by commas.

The imageURL is written how you normally write URLs in CSS  url('image.png')  and the resolution can be written as  1x  for standard resolution,  2x  for Retina and other high-resolution displays, and even specific DPI like  600dpi  for a 600 dots-per-inch printer version of the image.

Image-Set() Best Practices

To make your  image-set()  images work best you should always do the following:

  • Set a default image first. Browsers that don’t support   image-set()  will load that and ignore the other style properties
    background-image: url('image.png');
  • Use browser prefixes
    -webkit-image-set -moz-image-set -o-image-set -ms-image-set
  • Place the standard property last
    image-set( url 1x, url2 2x )

Example of Image-Set()

Here is a video I did demonstrating the   image-set() notation. And below the video is the source HTML I used.