Learn Performance - Images

This demo uses the scrcset attribute to indicate to the browser a list of possible image sources. The srcset value used in this demo has a pixel-density descriptor for each image:

srcset="../image-640.jpg,../image-1280.jpg 2x,../image-1920.jpg 3x"

This srcset value recommends the browser to use image-640.jpg on a 1x device, image-1280.jpg on a 2x device and image-1920.jpg on a 3x device and above.

If you look at the table above, you could see which image is being used, together with its file size and resolution (intrinsic width and height). Try experimenting on different devices to see which image is used. Are you able to distinguish the different images just by looking at the image?

<img
  alt="Photograph of a group of pedestrians crossing the street."
  width="640"
  height="426"
  src="../image-640-uncompressed.jpg"
  srcset="../image-640-uncompressed.jpg, ../image-1280-uncompressed.jpg 2x, ../image-1920-uncompressed.jpg 3x"
/>