Тег <picture> используется для хранения одного и более элементов <source> и элемента <img>. В каждом элементе <source> содержится имя файла альтернативных версий изображения, а также условия, при которых браузер должен их загрузить.
Браузер по очереди рассматривает содержание дочерних элементов <source>, и в случае, если ни одно из указанных условий для загрузки изображений не может быть удовлетворено, браузер загружает изображение, указанное в теге <img>.
Использование элемента <picture> позволяет загружать несколько вариантов изображения, оптимизированных под различные размеры и другие параметры экрана.
Синтаксис
HTML тег <picture> парный, содержимое записывается между открывающим (<picture>) и закрывающим (</picture>) тегами.
Элемент <picture> может содержать один и более элементов <source> и один элемент <img>, который является последним дочерним элементом в блоке.
<picture>
<source media="...">
<source media="...">
<img src="...">
</picture>Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна веб-страницы</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Некоторая информация об изображениях</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Указывает, что файл адаптирован под определённые виды устройств. |
| sizes | Указывает допустимые относительные размеры источника. Добавлен в HTML5 | |
| src | URL | Указывает URL адрес медиа-файла. |
| srcset | URL | Указывает изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.). Добавлен в HTML5. |
| type |
video/ogg video/mp4 video/webm audio/ogg audio/mpeg |
Указывает MIME-тип медийного источника. |
Тег <X> поддерживает также глобальные атрибуты .
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 38+ | 38+ | 9.1+ | 25+ |
Практикуйте свои знания
