Элемент picture: WebP, AVIF и JPEG fallback без ломки кэша
Порядок source, MIME type и зачем оставлять img с универсальным форматом последним.
Браузер выбирает первый поддерживаемый `<source>`; финальный `<img>` обязан быть совместим со старыми клиентами.
Указывайте `type="image/avif"` и `image/webp"` явно, чтобы не полагаться на расширение файла.
- Serve images with WebP — web.dev — picture, source и fallback.
- The picture element — MDN — Синтаксис и responsive art direction.
CDN
При переписывании по заголовку Accept не забывайте `Vary: Accept` для кэшей.
Генерируйте AVIF/WebP на билде для тяжёлых hero, чтобы не жечь CPU на запросе.