<picture>¶

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

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

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

Демо¶

Изображения и мультимедиа

Поддержка браузерами¶

Can I Use picture? Data on support for the picture feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

<picture> polyfill

Синтаксис¶

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

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

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

Атрибуты¶

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

Спецификации¶

WHATWG HTML Living Standard

Описание и примеры¶

<!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>

Ссылки¶

Тег <picture> ^{MDN (рус.)}