Using the picture element to progressively enhance images

We will soon see how to use the picture element for “art direction,” serving up different images for different situations. However, I have actually found the greatest practical utility of the picture element is for providing alternative image formats. Let’s look at that first.

The most common use case I find myself currently needing is providing an AVIF version of an image, if possible, then a WebP version for users if they can’t make use of AVIF, and then a JPG if a user can’t make use of an AVIF or a WebP. Here is how we can do that with picture:

<picture>
    <source srcset="scone.avif" type="image/avif" />
    <source srcset="scone.webp" type="image/webp" />
    <img
        src="scone.jpg"
        alt="A delicious scone, baked to perfection"
        loading="lazy"
    />
</picture...