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:
image-set( imageURL resolution,
imageURL resolution )
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
- 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.
background-image: -webkit-image-set(url(image-set-example-1x.png) 1x,
background-image: -moz-image-set(url(image-set-example-1x.png) 1x,
background-image: -o-image-set(url(image-set-example-1x.png) 1x,
background-image: -ms-image-set(url(image-set-example-1x.png) 1x,