picture

<picture>

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

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

Синтаксис

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

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

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

Обязателен.

Атрибуты

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

Пример

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

Браузеры