Тег <picture>

Синтаксис

<picture>
    <source srcset="...">
    <img src="..." alt="...">
</picture>

Описание

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

Внутри контейнера <picture> размещается один тег <img> и один или более тегов <source>.

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

Тег <picture> работает аналогично тегам <video> и <audio>. Вы устанавливаете различные источники, и первый источник, который соответствует предпочтениям, используется.

Тег поддерживает глобальные атрибуты и атрибуты события.

Пример

HTML-код:

Отображение в браузере:

Параметры CSS по умолчанию

Нет.

Поддержка браузера