Proposal: Enhance the Image Component to leverage the best image formats

[dmatis]

I noticed in the Image component that it does not yet support serving alternate image formats when they are available for a particular browser. For instance, AVIF will soon be widely available and provides better image compression.

We could leverage the picture tag to provide multiple image formats with a fallback:

<picture>
  <source
    type="image/avif"
    srcSet={`
      https://<my-image-src>/img/dog.avif 1x,
      https://<my-image-src>/img/dog@2x.avif 2x
    `}
   />
  <source
    type="image/jpeg"
    srcSet={`
      https://<my-image-src>/img/dog.jpg 1x,
      https://<my-image-src>/img/dog@2x.jpg 2x
    `}
   />
   <img
     alt="A dog looking out the window"
     src="https://<my-image-src>/img/dog.jpg"
   />
</picture>

Relatedly, NextJS can internally generate different sizes of an image and determine which of the images to download for a specific viewport size. A simpler solution would be exposing a slot prop where the consumer provides multiple source elements.

Any thoughts or interest?

Great article on AVIF
picture tag docs
NextJS Image Source