Тег <picture>: выбор изображения
Как выбирать формат или кадр изображения под условия просмотра и сохранять запасной img.
Зачем нужен этот элемент
picture содержит варианты изображения в source и обязательный завершающий img. Браузер проверяет условия источников по порядку и выбирает подходящий. Такой подход нужен для смены кадрирования или формата, а не для обычного изменения ширины через CSS.
У source можно указать media для условия ширины и type для формата. Альтернативный текст и основные размеры задаются у img. Для одного изображения в нескольких разрешениях часто достаточно srcset и sizes у самого img, без дополнительного picture.
Синтаксис и пример
<picture>
<source media="(min-width: 800px)" srcset="images/wide.webp">
<img src="images/compact.webp" alt="Рабочее место разработчика" width="640" height="480" style="max-width:100%;height:auto">
</picture>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| source media | Условие, при котором подходит вариант. |
| source type | MIME-тип формата изображения. |
| source srcset | Набор источников. |
| img | Запасной источник, alt и основная семантика. |
Частая ошибка
Небольшая практика
Подготовьте широкий и узкий кадр одного изображения. В локальном проекте меняйте ширину окна и проверяйте выбранный ресурс в Network, а не только видимый размер.
Разберите также <img>, <figure>: эти элементы пригодятся в том же интерфейсе.