Type attribute
Serve modern formats like AVIF/WebP progressively.
Format selection with type
The other attribute on <source> is type, which declares the image format (MIME type). The browser skips formats it cannot decode and picks the first one it can.
For instance, AVIF gives similar quality at smaller file sizes; WebP works almost everywhere; PNG/JPEG is the oldest fallback. Writing type="image/avif" lets the browser try AVIF and skip it if unsupported. This is called progressive enhancement.
The order of progressive enhancement
When serving formats with <picture>, the order is: the most modern format on top, the oldest format at the bottom (in the <img>). The browser tries top to bottom and takes the first one it can decode.
Key point: the src of the final <img> must always point to an old format (PNG or JPEG). That <img> is the last fallback when no source works, so old browsers must still render it. Putting AVIF last would show a broken image on browsers that cannot decode it.
Exercise Write picture with AVIF, WebP and PNG
Add a <picture> to body. Put two <source> tags inside: the first with type set to image/avif and srcset set to blue-sea.avif; the second with type set to image/webp and srcset set to blue-sea.webp. Finish with an <img> whose src is blue-sea.png and alt is Blue sea.
Show example solution
<body>
<picture>
<source type="image/avif" srcset="blue-sea.avif">
<source type="image/webp" srcset="blue-sea.webp">
<img src="blue-sea.png" alt="Blue sea">
</picture>
</body>Test yourself
-
Which is the RIGHT order to serve AVIF and WebP with <picture>?
- First img AVIF, then source WebP
- Just img src="image.avif" is enough
- First source PNG, then AVIF, last img PNG
- First source AVIF, then WebP, last img PNG as fallback
Show answer
First source AVIF, then WebP, last img PNG as fallback — Correct. The most modern format (AVIF) sits on top, the oldest (PNG) in the img.
-
Write the type attribute on source
<picture> <source ____="image/avif" srcset="coffee.avif"> <source type="image/webp" srcset="coffee.webp"> <img src="coffee.png" alt="Coffee cup"> </picture>Show answer
<picture> <source type="image/avif" srcset="coffee.avif"> <source type="image/webp" srcset="coffee.webp"> <img src="coffee.png" alt="Coffee cup"> </picture> -
Match each MIME type to its format
- image/avif
- AVIF format
- image/webp
- WebP format
- image/png
- PNG format
- image/jpeg
- JPEG format