<source> в <picture>: art direction для hero

media и type для AVIF/WebP.

`<picture>` с несколькими `<source media="(min-width: 768px)" srcset="...">` отдаёт разный кроп hero на мобильном и десктопе — art direction без одного `<img src>`.

Последний `<img>` — обязательный fallback для старых браузеров.

<picture> — MDN — Responsive images.
Responsive images — web.dev — picture и source.

Форматы

`<source type="image/avif">` перед WebP и JPEG — браузер выберет первый поддерживаемый.