CSS Function - image-set()

Quiz

The image-set() function in CSS lets the browser select the most appropriate image from a given set, mostly for high pixel density screens.

The browser will choose the most appropriate image based on the device's display characteristics. If the device has a higher pixel density, it will select an image with a higher pixel density (if available). The same device with slow mobile connection will prefer to recieve a low-resolution image rather than waiting for a high-resolution one or nothing at all to load.

The function image-set() permits a user to provide the options for images, rather than fixing one.

Syntax

<image-set()> = image-set( <image-set-option># )

Some sample syntaxes are as follows:

image-set(
   "sampleimage1.png" 1x,
   "sampleimage2.png" 2x
);

image-set(
   url("sampleimage1.png") 1x,
   url("sampleimage2.png") 2x
);

/* use of gradient as image */
image-set(
   linear-gradient(red, yellow) 1x,
   linear-gradient(green, yellow) 2x
);

/* use of supported formats of images */
image-set(
   url("sampleimage1.png") type("sampleimage.png"),
   url("sampleimage2.jpg") type("sampleimage2.jpeg")
);

In the above syntax:

url("sampleimage1.png") 1x indicates the first image source with a pixel density of 1x.
url("sampleimage2.png") 2x indicates the second image source with a pixel density of 2x.

Possible values

The image-set() function can contain following values:

<image>: Can be any image type except an image set, which means, the function image-set() can not be nested in another image-set() function.
<string>: Lists a URL to an image.
<resolution>: Optional and specifies the resolution of an image, which is denoted in various units, such as:
- x, dppx: for dots per pixel unit.
- dpi: for dots per inch unit.
- dpcm: for dots per centimeter unit.
type(<string>): Optional and specified a valid MIME type string, like "sampleimage.jpeg".

The prefix -webkit should be used for Chrome and Safari. Recommended to use the prefix versions for full compatability of the browsers.

Accessibility concerns: No special information is provided to the assistive technologies about the background images and hence nothing will be announced in the screen readers as well about the background images. In case such background image is important and signifies any imformation to the user, will get missed by the assistive technologies. It is advised to descrivbe such information semantically in the document.

CSS image-set() - Alternative Background Image

Following example demonstrates the use of image-set() function is used to set an alternative background image:

<html>
<head>
<style>
   .box {
      background-image: -webkit-image-set(
         "images/border.png" 1x,
         "images/white-flower.jpg" 2x
      );
      background-image: image-set(
         "images/border.png" 1x,
         "images/white-flower.jpg" 2x 
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS image-set() - Alternative Image Formats

Following example demonstrates the use of image-set() function is used to specify an alternative image format for a background image:

 
<html>
<head>
<style>
   .box {
      background-image: -webkit-image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      background-image: image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS image-set() - Providing a fallback option

In case the image-set() function is not supported by any browser, you can provide a fallback option image as background. You need to make a separate declaration, before the line using image-set() function, as the function has no inbuilt fallback option.

<html>
<head>
<style>
   .box {
      /* adding a fallback option*/
      background-image: url("images/white-flower.jpg")

      background-image: -webkit-image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      background-image: image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

Print Page