HTML - элемент <picture>
Элемент HTML <picture>позволяет отображать разные изображения для разных устройств или размеров экрана.
HTML-элемент <picture>
Элемент HTML <picture>дает веб-разработчикам больше гибкости при указании ресурсов изображения.
Элемент <picture>содержит один или несколько <source>элементов, каждый из которых ссылается на разные изображения через srcset
атрибут. Таким образом, браузер может выбрать изображение, которое лучше всего подходит для текущего вида и/или устройства.
У каждого <source>элемента есть
mediaатрибут, который определяет, когда изображение является наиболее подходящим.
Пример
Показать разные изображения для разных размеров экрана:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Примечание. Всегда указывайте <img>элемент как последний дочерний элемент <picture>элемента. Элемент <img>используется браузерами, которые не поддерживают этот <picture>элемент, или если ни один из <source>тегов не совпадает.
Когда использовать элемент изображения
<picture>У элемента два основных назначения :
1. Пропускная способность
Если у вас небольшой экран или устройство, нет необходимости загружать большой файл изображения. Браузер будет использовать первый <source>
элемент с соответствующими значениями атрибутов и проигнорирует любой из следующих элементов.
2. Поддержка форматов
Некоторые браузеры или устройства могут поддерживать не все форматы изображений. Используя этот
<picture>элемент, вы можете добавлять изображения всех форматов, и браузер будет использовать первый формат, который он распознает, и проигнорирует любой из следующих элементов.
Пример
Браузер будет использовать первый распознанный формат изображения:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Примечание . Браузер будет использовать первый <source>элемент с соответствующими значениями атрибутов и игнорировать все последующие <source>элементы.
HTML-теги изображений
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .