Responsive images can either be defined based on absolute widths or relative pixel densities.

Width descriptors use the "w" unit, which refers to the width of the image file (not to be confused with "px", which refers to so-called CSS pixels in the HTML document). The srcset attribute in combination with the sizes attribute provide hints to the browser which one of the provided image files should be used. The browser is free to consider other factors, such as network speed, user preferences, or client-side caching status.

Density descriptors use the "x" unit and target client devices based on the pixel density of their screens. "1x" will be loaded for low-density devices, while "2x", "3x"... target higher densities, also referred to as "High DPI" or "Retina".

According to the HTML standard, "w" and "x" units cannot be mixed. Instead, browsers will usually consider the pixel density, even if "w" units are used. In practice, "x" is only relevant for fixed-width images across device sizes (e. g. an icon that always has the same visual size). In all other cases, "w" should be preferred.

Examples

Width descriptors

   <source srcset="{f:image.srcset(image: imageObject, srcset: '1000w, 1200w, 1400w', cropVariant: 'desktop')}" media="(min-width: 1000px)" sizes="100vw" />

Output::

   <source srcset="/path/to/csm_myimage_1000.jpg 1000w, /path/to/csm_myimage_1200.jpg 1200w, /path/to/csm_myimage_1400.jpg 1400w" media="(min-width: 1000px)" sizes="100vw" />

Density descriptors

Output::