<picture>
- 25 января 2023
Тег <picture>
используется для отображения изображений с альтернативными источниками в зависимости от разрешения экрана. Это позволяет браузеру выбирать наиболее подходящее изображение для текущего экрана и загружать только его, что уменьшает время загрузки страницы и улучшает производительность.
Синтаксис тега <picture>
<picture>
<source srcset="image-small.jpg" media="(max-width: 768px)">
<source srcset="image-medium.jpg" media="(max-width: 1024px)">
<source srcset="image-large.jpg">
<img src="image-default.jpg" alt="Image description">
</picture>
Спецификация HTML
Тег <picture>
является частью спецификации HTML Living Standard.
Семантический или нет
Тег <picture>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Отображение разных изображений в зависимости от ширины экрана:
<picture>
<source srcset="image-small.jpg" media="(max-width: 768px)">
<source srcset="image-medium.jpg" media="(max-width: 1024px)">
<source srcset="image-large.jpg">
<img src="image-default.jpg" alt="Image description">
</picture>
Отображение разных форматов изображений в зависимости от браузера:
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.png" alt="Image description">
</picture>
Отображение фонового изображения с альтернативным источником:
<div style="background-image: url('image-default.jpg');">
<picture>
<source srcset="image-large.jpg">
<img src="image-default.jpg" alt="Image description">
</picture>
</div>
Для чего использовать тег <picture>
Тег <picture>
используется для отображения изображений на веб-странице с помощью различных источников, форматов и разрешений в зависимости от устройства пользователя.
Атрибуты тега <picture>
Тег <picture>
не имеет специфических атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Для использования тега <picture>
нет никаких ограничений.
Нюансы
Для каждого изображения должен быть указан альтернативный текст через атрибут alt
.
Поддержка браузерами
Тег <picture>
поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.
Альтернативные теги
Вместо тега <picture>
можно использовать тег <img>
с атрибутом srcset
, который позволяет указать несколько источников изображения и браузер выберет наиболее подходящее для данного устройства.
Чем заменить тег
Тег <picture>
можно заменить тегом <img>
с атрибутом srcset
, как описано выше.
Актуальность
Тег <picture>
является актуальным и рекомендуется к использованию в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023