/html/picture:> Контейнер альтернативных версий изображения_

Элемент `picture`

Синтаксис

HTML

<picture>
  <source srcset="[URL]">
  ... <!-- Может присутствовать несколько
  «source» элементов -->
  <img src="..." alt="...">
</picture>

Описание

Элемент picture (от англ. "picture" ‒ «картина, изображение») создаёт контейнер, используемый для указания нескольких альтернативных версий одного и того же изображения. На основании указанных URL-адресов альтернативных изображений данный элемент предоставляет браузеру возможность выбрать наиболее подходящий вариант. Выбранный браузером вариант изображения выводится с помощью вложенного img элемента. При этом сам по себе данный элемент не имеет ни каких визуальных эффектов.

Примечание

Наглядное представление действия элемента «picture». — Наглядное представление действия элемента `picture`.

Альтернативные версии одного и того же изображения указываются для разных (типов) экранов с разной плотностью пикселей, областью просмотра, величиной размеров, форматом/типом изображения и другими факторами. На основании имеющихся альтернатив браузер производит выбор наиболее оптимального ресурса в соответствии с собственными возможностями, а так же в соответствии с текущими параметрами страницы и устройства на котором будет отображаться изображение.

Условия использования

В данный элемент может вкладываться несколько элементов source, после чего должен быть вложен один img элемент, за которым могут следовать скрипт-поддерживаемые элементы.

Поддержка браузерами

Chrome

38+

Firefox

38+

Opera

25+

Maxthon

~~Поддерж.~~

IExplorer

~~Поддерж.~~

Safari

9.1+

iOS

9.3+

Android

47+

Спецификация

Верс.	Раздел
HTML
2.0	~~---~~
3.2	~~---~~
4.01	~~---~~
5.0	~~---~~
5.1	4.7.3. The picture element
XHTML
1.0	~~---~~
1.1	~~---~~

Атрибуты

Глобальные атрибуты: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент picture</title>
<script type="text/javascript" src="imgSize.js"></script>
</head>
<body>
<h1>Пример использования элемента "picture"</h1>
<div>
<picture>

<source srcset="/examples/images/pineberry/480.png" type="image/png" media="(max-width: 854px)">
<source srcset="/examples/images/pineberry/720.png" type="image/png" media="(max-width: 1280px)">
<source srcset="/examples/images/pineberry/1080.png" type="image/png" media="(max-width: 1920px)">

<source srcset="/examples/images/pineberry/360.jpg 1x, /examples/images/pineberry/480.jpg 1.5x, /examples/images/pineberry/720.jpg 2x, /examples/images/pineberry/1080.jpg 2.5x, /examples/images/pineberry/original.jpg 5x" type="image/jpeg">
<img src="/examples/images/pineberry/360.png" alt="Клубника «пайнберри»" onclick="imgSize(this)">
</picture>
</div>
</body>
</html>

Элемент picture