The srcset attribute

Github Page

A simple test to determine if devices will display different images based on their device-pixel-ratio - using the srcset attribute.

• Devices that have 1x device pixel ratio should display an image labelled "1x"
• Devices that have 1.5x device pixel ratio should display an image labelled "1.5x"
• Devices that have 2x device pixel ratio should display an image labelled "2x"
• Devices that have 3x device pixel ratio should display an image labelled "3x"

Example

Code

<img
  srcset="assets/img/image-1x.jpg 1x,
          assets/img/image-15x.jpg 1.5x,
          assets/img/image-2x.jpg 2x,
          assets/img/image-3x.jpg 3x"
  src="assets/img/image-1x.jpg"
  alt="Test image">

Github Page