Элемент picture
Синтаксис
<picture>
<source srcset="[URL]">
... <!-- Может присутствовать несколько
«source» элементов -->
<img src="..." alt="...">
</picture>
Описание
Элемент picture
(от англ. "picture" ‒ «картина, изображение») создаёт контейнер, используемый для указания нескольких альтернативных версий одного и того же изображения. На основании указанных URL-адресов альтернативных изображений данный элемент предоставляет браузеру возможность выбрать наиболее подходящий вариант. Выбранный браузером вариант изображения выводится с помощью вложенного img
элемента. При этом сам по себе данный элемент не имеет ни каких визуальных эффектов.
Примечание
Альтернативные версии одного и того же изображения указываются для разных (типов) экранов с разной плотностью пикселей, областью просмотра, величиной размеров, форматом/типом изображения и другими факторами. На основании имеющихся альтернатив браузер производит выбор наиболее оптимального ресурса в соответствии с собственными возможностями, а так же в соответствии с текущими параметрами страницы и устройства на котором будет отображаться изображение.
Условия использования
В данный элемент может вкладываться несколько элементов source
, после чего должен быть вложен один img
элемент, за которым могут следовать скрипт-поддерживаемые элементы.
Поддержка браузерами
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
5.0 | |
5.1 | 4.7.3. The picture element |
XHTML | |
1.0 | |
1.1 |
Атрибуты
Пример использования
<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>