Srcset

srcset is an HTML attribute used on img and source elements to provide a list of image resources for responsive images. It allows authors to specify multiple versions of the same image at different resolutions or display widths, enabling the browser to pick the most appropriate candidate for a given device and layout.

Each item in a srcset list consists of a URL followed by an optional descriptor. Descriptors can be width descriptors (a number followed by w, such as 600w) or density descriptors (a number followed by x, such as 2x). The browser uses these descriptors, together with the sizes attribute (when present), to choose the best image to download. When using width descriptors, the sizes attribute defines the intended display width of the image for different viewport conditions; when using density descriptors, the device pixel ratio guides the selection. The sizes attribute itself contains media conditions and corresponding layout widths, for example: (max-width: 600px) 480px, 800px.

srcset can be used on img to provide replacements for the src attribute, or within a picture element with multiple source elements for art direction or different media conditions. The img element will fall back to its src if no suitable candidate is available.

Using srcset helps reduce data usage and improve perceived performance by delivering an image that matches the device capabilities while preserving visual quality. It is widely supported by modern browsers; older browsers may ignore it, in which case a standard src attribute provides a fallback.

Example: <img src="image-800.jpg" srcset="image-320.jpg 320w, image-480.jpg 480w, image-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" alt="...">