The picture element and srcset

In this demo we extend the <picture> element by combining type to serve modern image formats and media, srcset , and sizes to recommend the best image resolution and quality.

<source media="(min-width: 560px) and
      (-webkit-min-device-pixel-ratio: 1.5)" type="image/avif"
      srcset="../image-1280-lossy.avif?v=7 1280w,
      ../image-1920-lossy.avif?v=7 1920w" sizes="(min-width:
      540px) 640px, calc(100vw - 2rem)" />

The media attribute is used to distinguish between small viewports and larger viewports. We are also combining this with the -webkit-min-device-pixel-ratio to only use these images on devices with a DPR that is at least 1.5x. We are using these rules to avoid serving large, high quality images on mobile devices since the human eye is not able to recognize details at such a small size. This gives us the possibilty to heavily compress images that will only be used on small viewports.

Note that the media attribute is not a hint and must be followed by the browser.

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 the file name ends with -sm, such as image-1280-lossy-sm.avif?v=7, then we are using a heavily compressed image that is suitable for small viewports devices. Are you able to distinguish this from the less compressed image?

View Source Code

<picture>
  <source
    media="(min-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    type="image/avif"
    srcset="../image-1280-lossy.avif 1280w, ../image-1920-lossy.avif 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    media="(max-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    type="image/avif"
    srcset="../image-1280-lossy-sm.avif 1280w, ../image-1920-lossy-sm.avif 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    type="image/avif"
    srcset="../image-640-lossy.avif"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    media="(min-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    type="image/webp"
    srcset="../image-1280-lossy.webp 1280w, ../image-1920-lossy.webp 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    media="(max-width: 560px) and (-webkit-min-device-pixel-ratio: 1.5)"
    type="image/webp"
    srcset="../image-1280-lossy-sm.webp 1280w, ../image-1920-lossy-sm.webp 1920w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <source
    type="image/webp"
    srcset="../image-640-lossy.webp 640w"
    sizes="(min-width: 540px) 640px, calc(100vw - 2rem)"
  />
  <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

The picture element and srcset