Accept header

In this demo we are using the same <picture> element as in the previous example, but instead of defining the different image formats in the HTML, the server is selecting the image based on the Accept request header.

This makes it seamless to the user, while making the HTML markup much smaller and easier to write. Many image optimization services use this technique.

Photograph of a group of pedestrians crossing the street.

Image details:

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

If you observe the image request in your browser's DevTools and compare it with the file name in the above table, you should be able to see that the image type is AVIF or WebP even if the file URL ends in .jpg

View Source Code

// index.html
<picture>
  <source
    media="(min-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    srcset="../image-1280-lossy.jpg 1280w, ../image-1920-lossy.jpg 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    media="(max-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    srcset="../image-1280-lossy-sm.jpg 1280w, ../image-1920-lossy-sm.jpg 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <img
    alt="Photograph of a group of pedestrians crossing the street."
    width="640"
    height="426"
    src="../image-640-lossy.jpg"
  />
</picture>

Learn Performance - Images

Accept header