HTML-элемент<picture> служит контейнером для одного или более элементов<source> и одного элемента<img> для обеспечения оптимальной версии изображения для различных размеров экрана. Браузер рассмотрит каждый из дочерних элементов<source> и выберет один, соответствующий лучшему совпадению; если совпадений среди элементов<source> найдено не будет, то будет выбран файл, указанный атрибутомsrc элемента<img> . Затем выбранное изображение отображается в пространстве, занятом элементом<img>.

Чтобы выбрать оптимальное изображение,user agent анализирует атрибутыsrcset,media, иtype элемента<source> и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

Элемент<picture> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

Атрибуты

Этот элемент содержит толькоуниверсальные атрибуты.

Примеры

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

Атрибутmedia

Атрибутmedia позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента<source>. Если медиавыражение определяется как ложное(false), то элемент<source> пропускается.

<picture>  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />  <img src="mdn-logo-narrow.png" alt="MDN" /></picture>

Атрибутtype

Атрибутtype позволяет вам обозначить MIME-тип данных, указанных в атрибутеsrcset элемента<source>. Если браузер не поддерживает данный тип, то элемент<source> опускается.

<picture>  <source srcset="mdn-logo.svg" type="image/svg+xml" />  <img src="mdn-logo.png" alt="MDN" /></picture>

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

Совместимость с браузерами

Смотрите также

• Элемент<img>
• Элемент<source>
• Позиционирование и определение размера изображения в рамках:object-position иobject-fit