Picture tag helper snippet

picture-tag-helper-snippet.html

<!-- Revised snippet based on https://www.stefanjudis.com/snippets/a-picture-element-to-load-correctly-resized-webp-images-in-html/ -->
<picture>
  <!-- load avif if supported -->
	<source type="image/avif"
	srcset="image-100x200.avif 100w,
	image-200x400.avif 200w" 
	sizes="
	(max-width: 768px) calc(100vw - 3em),
	(max-width: 1376px) calc(50vw - 8em),
	550px"
	>

  <!-- load webp images if supported -->
	<source type="image/webp"
	srcset="
	image-100x200.webp 100w,
	image-200x400.webp 200w"
	sizes="
	(max-width: 768px) calc(100vw - 3em),
	(max-width: 1376px) calc(50vw - 8em),
	550px">
  
  <!-- load traditional supported image format -->
  <img
    srcset="
      image-100x200.jpg 100w,
      image-200x400.jpg 200w"
    sizes="
      (max-width: 768px) calc(100vw - 3em),
      (max-width: 1376px) calc(50vw - 8em),
      550px"
    src="image-100x200.jpg 100w"
    alt="Alt tag goes here"
    loading="lazy"
    decoding="async"
    width="400"
    height="800">
</picture>