A Look Into: CSS4 Image Set

The emerging trend of HD screens for computer devices has changed the way we build websites, including how we add images. In the past, we could simply use background-image and set the image URL.

Today, this is no longer relevant, since we also need to provide an image optimized for higher-resolution displays, or the image will look pixelated or blurred. So, technically we need two sets of images, one in regular size and another twice the size.

In our previous post, we have discussed using Media Queries to serve images on high-DPI screens. However, the downside of using this approach is that you need to separate CSS rules for a single selector in different locations. If you have many background images to insert, this can become complicated and hard to maintain.

So, in this post, we are going to look at an alternative way of doing this. We are going to look into CSS Image Set.

CSS Image Set Function

The CSS Image Set function, image-set(), is classified as CSS Images Level 4. By using this function, we can insert multiple images that will be set for normal and high-resolution displays.

Apart from that, this function also attempts to deliver the most appropriate image resolution based on connection speed. So, regardless of the screen resolution, if the user accesses the image through a slow internet connection, the smaller image will be delivered.

At the time of this writing, CSS Image Set is experimental. It is supported only in Safari 6 and Google Chrome 21 and requires the prefix – -webkit-image-set().

This function is declared within the background-image property. The background URL is added within the function, followed by the resolution parameter (1x for normal display and 2x is for high-res display), like so.

.selector {
  background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
}

As said, since it is experimental, we need to provide a fallback for browsers that do not support the image-set() function. So, we add one background-image declaration at the top, like so.

.selector {
  background-image: url('../img/image-1x.jpg');
  background-image: -webkit-image-set(url('../img/image-1x.jpg') 1x, url('../img/image-2x.jpg') 2x);
}

We have created a demo page for this code, which you can view via the following links.

Final Thought

The image-set() function seems a promising solution for serving images in high resolution. But, with the current limited browser support, image-set() is not yet ready for implementation on a live site. In addition, the implementation might change in the near future. For further reference on this function, you can head over to the documentation page at the W3C.