🧱 Суть
<picture> – это HTML-элемент для создания адаптивных изображений.
Он позволяет отдавать разные изображения в зависимости от:
- размера экрана
- типа устройства
- условий отображения
Пример:
<picture>
<source srcset="320.jpg" media="(max-width: 800px)">
<img src="640.jpg" alt="...">
</picture>📦 Проблема
1. Одно изображение не всегда подходит для всех устройств
Например:
- на мобильном нужен маленький файл
- на большом экране – изображение высокого качества
Если использовать одно большое изображение:
<img src="large.jpg">то мобильное устройство будет скачивать лишние данные.
2. Нельзя менять src у обычного <img> по условиям без JavaScript
Приходится писать дополнительную логику.
✅ Решение
Использовать:
<picture>Он позволяет браузеру самому выбрать подходящий источник.
💻 Код
Как работает <picture>
Браузер проверяет элементы <source> сверху вниз:
<picture>
<source srcset="mobile.jpg" media="(max-width: 800px)">
<source srcset="tablet.jpg" media="(max-width: 1200px)">
<img src="desktop.jpg" alt="image">
</picture>Порядок:
- проверяет первый
<source> - если условие подходит → использует его
srcset - остальные
<source>игнорируются
Роль srcset
srcset содержит путь к изображению:
<source srcset="mobile.jpg">Это аналог src у обычного <img>.
Роль media
media задаёт условие:
media="(max-width: 800px)"Изображение будет использоваться только если условие выполнено.
Fallback через <img>
Тег <img> внутри <picture> обязателен:
<picture>
<source srcset="image.webp">
<img src="image.jpg" alt="...">
</picture>Он используется если:
- браузер не поддерживает
<picture> - ни один
<source>не подошёл
🎯 Вывод
<picture>позволяет создавать адаптивные изображения- браузер сам выбирает подходящий источник
<source>проверяются сверху вниз- первый подходящий вариант используется
<img>служит запасным вариантом (fallback)