What Is Meant by "1x", "2x", etc. in CSS image-set()?

The "1x", "2x", etc. in the CSS image-set() function represent the device pixel ratio (DPR), where x is merely an alias for dppx (i.e. the number of dots per CSS pixel unit). Each "x" unit value specifies the DPR at which the corresponding image should be used. For example:

.foo {
  background-image: image-set(
    url('image.jpg') 1x,
    url('image-2x.jpg') 2x
    /* ... */
  );
}

When you specify "1x" and "2x" in image-set(), you're telling the browser to use "image.jpg" when the device pixel ratio is 1 and "image-2x.jpg" when the device pixel ratio is 2, where:

  • "1x" corresponds to the standard resolution or 96dpi (i.e. 1 device pixel per CSS pixel unit);
  • "2x" means twice the DPR of the standard resolution (i.e. 2 device pixels per CSS pixel, which is typically associated with high-density/high-resolution or Retina displays).

This allows the browser to automatically select the appropriate image based on the user's device capabilities, providing a more optimized experience for different screens.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.