The srcset Attribute.

Below is a image (img) element with both a regular src attribute as well as a srcset attribute. Inline CSS sets the image to fill the width of the page. On browsers without srcset support, the value of the src attribute will be used as the image src [default image]. On regular resolution displays or at smaller widths, the 1x variant of the srcset will be used [1x image]. On displays with 2 device pixels per CSS pixel, or at larger widths, the 2x variant of the srcset will be used [2x image]. 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:

<img src="image-src.png" srcset="image-1x.png 400w, image-2x.png 800w,
                                 image-3x.png 1200w, image-4x.png 1600w">