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 or96dpi
(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.