SrcSet Attribute

Below is a <img> element with both a regular src attribute as well as a srcset attribute. Inline CSS sets the dimensions of the image to 400x400px. On browsers without srcset support, the value of the src attribute will be used as the image source. On regular resolution displays, the 1x variant of the srcset will be used. On displays with 2 device pixels per CSS pixel, the 2x variant of the srcset will be used. Similarly, there is a 3x image, and a 4x image.

Example of the srcset attribute. Image contains a coloured striped pattern with some inline text that indicates which of the candidate images were selected.

The HTML for the above image is (paths omitted for clarity): 

<img style="width: 400px; height: 400px;" 
     src="image-src.png" 
     srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x"
/>