Элемент <picture>


	13	38	25	9.1	38


38	38	25	9.3

Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Вот несколько областей применения <picture> (от англ. picture — картинка, изображение):

для экранов ретина можно показывать картинку большего размера;
выводить рисунки разного размера для мобильных и настольных устройств;
отображать изображения разных пропорций, учитывающих ориентацию устройства;
выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать PNG.

Синтаксис

<picture>
  <source>
  <img>
</picture>

Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>picture</title> </head> <body> <picture> <source srcset="image/html5-logo.svg"> <img src="image/html5-logo.png" width="256" height="256" alt="HTML5"> </picture> </body> </html>

В данном примере используется два изображения: одно в формате SVG, а второе в PNG. Браузеры, которые поддерживают элемент <picture>, отобразят картинку в векторном виде (рис. 1). Браузер IE покажет изображение в формате PNG (рис. 2). Для наглядности логотип дан размером 128х128 пикселей и увеличен до 256х256.

Картинка в формате SVG

Рис. 1. Картинка в формате SVG

Картинка в формате PNG

Рис. 2. Картинка в формате PNG

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

Спецификация	Статус
HTML Living Standard	Живой стандарт