<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Mountain lake at sunrise"
width="1200" height="600">
</picture>
Only
hero.webpThe browser checks each <source> in order and uses the first one whose type it supports. Here that is WebP, so it downloads only hero.webp.
"hero.webp and also hero.jpg" is the tempting wrong answer. The <img> is still needed: it displays the chosen file and holds alt, width and height. But its src is only the fallback. The browser skips AVIF without downloading it, because the type tells it the format is unsupported. AVIF and WebP are usually much smaller than JPEG for the same quality.