Ответ
Тег <picture> позволяет загружать разные изображения в зависимости от условий (разрешение экрана, плотность пикселей и т.д.). Он оборачивает несколько <source> и один <img> как fallback.
Пример:
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Описание">
</picture>Ключевые особенности:
- Браузер выбирает первый подходящий
<source> - Если ни один не подошел — загружается
<img> - Поддерживает разные форматы (WebP/AVIF с fallback на JPEG/PNG)
- Оптимизирует загрузку, особенно для респонсива