<picture> с несколькими <source media="(min-width: 768px)" srcset="..."> отдаёт разный кроп hero на мобильном и десктопе — art direction без одного <img src>.
Последний <img> — обязательный fallback для старых браузеров.
- [<picture> — MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) — Responsive images.
- [Responsive images — web.dev](https://web.dev/articles/responsive-images) — picture и source.
---
## Форматы
<source type="image/avif"> перед WebP и JPEG — браузер выберет первый поддерживаемый.