Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img>. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Вот несколько областей применения <picture> (от англ. 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="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.

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

Рис. 2. Картинка в формате PNG
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.