Learn Performance - Images

The picture element

In this demo we are using the <picture> element with a different <source> for AVIF and WebP. The <img> element uses a JPEG image as a fallback.

This demo uses the same image resolution for all devices as it does not use any srcset or sizes attributes.

Photograph of a group of pedestrians crossing the street.

Image details:

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

When looking at the table above, which file type is the browser using? How does this compare with the image's file size?

If you are using Google Chrome, you able to Disable AVIF or WebP while testing to emulate unsupported types.

View Source Code 
<picture>
  <source type="image/avif" srcset="../image-1280-lossy.avif" />
  <source type="image/avif" srcset="../image-1280-lossy.webp" />
  <img
    alt="Photograph of a group of pedestrians crossing the street."
    width="1280"
    height="852"
    src="../image-1280-lossy.jpg 1280w"
  />
</picture>