Тег <picture>

Описание

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

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

Синтаксис

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

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

Атрибуты

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

Закрывающий тег

Обязателен.

Пример.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>picture</title>
 </head>
 <body>
  <picture>
   <source srcset="images/html5-logo.svg">
   <img src="images/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

Браузеры: Настольные Мобильные ?

Internet Explorer	Edge	Chrome	Opera	Safari	Firefox
	13	38	25	9.1	38

Android	Firefox Mobile	Opera Mobile	Safari Mobile
	38	35	9.3

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

HTML5.