<picture>: Элемент Picture

Элемент <picture> HTML содержит ноль или более элементов <source> и один элемент <img>, чтобы предложить альтернативные версии изображения для различных сценариев отображения/устройств.

Браузер рассмотрит каждый дочерний элемент <source> и выберет наилучшее соответствие среди них. Если совпадений не найдено — или браузер не поддерживает элемент <picture> — выбирается URL атрибута <img> элемента src. Выбранное изображение затем отображается в пространстве, занимаемом элементом <img>.

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

Элемент <img> выполняет две функции:

1. Он описывает размер и другие атрибуты изображения и его отображения.
2. Он обеспечивает резервный вариант, если ни один из предложенных элементов <source> не может предоставить изображение, пригодное для использования.

Типичные сценарии использования <picture>:

• Направление дизайна. Обрезка или изменение изображений для различных media условий (например, загрузка упрощённой версии изображения, содержащего слишком много деталей, на экранах меньшего размера).
• Предложение альтернативных форматов изображений в случаях, когда определённые форматы не поддерживаются.

  Примечание: Например, новые форматы, такие как AVIF или WEBP, имеют много преимуществ, но могут не поддерживаться браузером. Список поддерживаемых форматов изображений можно найти по адресу: Руководство по типам и форматам файлов изображений.

• Экономия трафика и ускорение загрузки страницы путём загрузки наиболее подходящего изображения для дисплея зрителя.

Если нужно предоставить версии изображений с более высокой плотностью пикселей для дисплеев с высокой плотностью пикселей (Retina), используйте атрибут srcset в элементе <img> вместо этого. Это позволяет браузерам выбирать версии с меньшей плотностью пикселей в режимах экономии данных, и вам не нужно писать явные media условия.

Этот элемент включает только глобальные атрибуты.

Для изменения позиционирования изображения в пределах фрейма элемента можно использовать свойство object-position, а для управления масштабированием изображения для подгонки под фрейм — свойство object-fit.

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

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

Если условие среды элемента <source> оценивается как false, браузер пропускает его и оценивает следующий элемент внутри <picture>.

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

Атрибут srcset используется для предоставления списка возможных изображений на основе размера или плотности пикселей дисплея.

Он состоит из списка описателей изображений, разделённых запятыми. Каждый описатель изображения состоит из URL изображения и либо:

• описателя ширины, за которым следует w (например, 300w); ИЛИ
• описателя плотности пикселей, за которым следует x (например, 2x) для предоставления изображения высокого разрешения для экранов с высокой плотностью пикселей.

Убедитесь, что:

• описатели ширины и плотности пикселей не должны использоваться вместе
• отсутствие описателя плотности пикселей подразумевает 1x
• повторяющиеся значения описателей недопустимы (2x и 2x, 100w и 100w)

Следующий пример демонстрирует использование атрибута srcset с элементом <source> для указания изображения с высокой плотностью пикселей и стандартного разрешения:

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="MDN Web Docs logo" height="320" width="320" />
</picture>

Атрибут srcset также может быть использован в элементе <img> без необходимости элемента <picture> . Следующий пример показывает, как использовать атрибут srcset для указания изображений стандартного разрешения и высокого разрешения соответственно:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="MDN Web Docs logo" />

Атрибут sizes не является обязательным при использовании srcset, но рекомендуется для предоставления дополнительной информации браузеру, чтобы помочь ему выбрать наилучший источник изображения.

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

Обратите внимание, что размеры будут действовать только в том случае, если описатели ширины будут предоставлены с srcset вместо значений соотношения сторон пикселей (например, 200w вместо 2x). Для получения дополнительной информации об использовании srcset, см. документацию по респонсивным изображениям.

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

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

• <img> элемент
• <source> элемент
• Позиционирование и размер изображения в его рамке: object-position и object-fit
• Руководство по типу и формату файлов изображений