Тег <picture> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <picture>

Описание

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

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

Синтаксис

<picture>
	...
	<source>
	...
	<img>
</picture>		    							         (закрывающий тег обязателен)

Атрибуты

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

Ссылки

Примеры

HTML Результат BwCodes
<!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