Picture element with three sources for different device widths, with support for retina, and fallback

three-level-sourceset-image.html

<!-- 
  Source set to choose differently sized images depending on device
  This is a scenario where large screens have a 500px wide image,
  medium screens a 350px wide image, and small screens a 250px wide
  image. It is then up to the browser to select the correct image
  based on pixel density (1000w image for the 500px container if on
  a 2x retina display, for example).

  https://codepen.io/perenstrom/pen/JjbMvMa
-->
<img srcset="https://via.placeholder.com/1000x1000 1000w,
             https://via.placeholder.com/700x700 700w,
             https://via.placeholder.com/500x500 500w,
             https://via.placeholder.com/350x350 350w,
             https://via.placeholder.com/250x250 250w"
     sizes="(min-width: 768px) 500px,
            (min-width: 480px) 350px,
            250px"
     src="https://via.placeholder.com/500x500"
     />

<!-- Progressive enhancement from jpg to webp to avif depending on browser support, with retina versions-->
<picture>
  <source
    srcSet="https://example.com/example_retina.avif 2x, https://example.com/example.avif 1x"
    type="image/avif"
  />
  <source
    srcSet="https://example.com/example_retina.webp 2x, https://example.com/example.webp 1x"
    type="image/webp"
  />
  <source
    srcSet="https://example.com/example_retina.jpg 2x, https://example.com/example.jpg 1x"
    type="image/jpeg"
  />
  <img src="https://example.com/example.jpg" />
</picture>