HTML :: Тег <picture>

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

Чтобы выбрать наиболее подходящее для данной ситуации изображение, браузер анализирует атрибуты srcset, media, и type каждого элемента <source> и только затем выбирает изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

Синтаксис

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

	Закрывающий тег: обязателен.

Атрибуты

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

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-picture-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
<p>
	При изменении ширины окна браузер будет автоматически<br> 
	подбирать подходящий размер изображения.
</p>
	
<picture>
	<source srcset="robot_2.png" media="(min-width: 1000px)">
	<source srcset="robot_1.png" media="(min-width: 700px) and (max-width: 999px)">
	<img src="robot.png" alt="Робот Вася"> 
</picture> 	
	
</body>
</html>

Пример №1