/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 ---

Атрибуты


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

Листинг кода
<!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>
<!-- .png изображения под различные размеры экрана -->
<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)">
<!-- .jpg изображения под экраны с различной плотностью пикселей -->
<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