The <img> element

This demo includes an uncompressed image with an intrinsic width of 640px. On a device with a viewport larger than 540px, the image is displayed at a maximum of 640px. On devices with a smaller viewport, it is displayed at calc(100vw - 2rem).

Photograph of a group of pedestrians crossing the street.

Each demo includes a script that updates the table below. The Percentage Used is calculated as:

(Display Width * Display Height) * DPR^2 / Intrinsic Width *
      Intrinsic Height

For the script to work it downloads the image an extra time. If you have Disable cache selected, you would see duplicate requests in the Network tab on DevTools.

Image details:

File
Size
Intrinsic Width
Intrinsic Height
Display Width
Display Height
DPR
Percentage Used

If you look at the table above, you could see that the image size is 445 KB and it's resolution is 640px x 426px. The area it is displayed in, marked as Display Width and Display Height is dependent on your device's viewport. The DPR shows the device-pixel ratio of your device.

If the Percentage Used is greater than 100%, then the image is smaller than the area in which it is rendered. If the Percentage Used is less than 100%, then the image is bigger than the area in which it is rendered.

View Source Code

<img
  alt="Photograph of a group of pedestrians crossing the street."
  width="640"
  height="426"
  src="../image-640-uncompressed.jpg"
/>

Learn Performance - Images

The <img> element