<picture> Элемент HTML picture

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

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

Попробуйте

<!--Change the browser window width to see the image change.-->

<picture>
  <source
    srcset="/shared-assets/images/examples/surfer.jpg"
    media="(orientation: portrait)" />
  <img src="/shared-assets/images/examples/painted-hand.jpg" alt="" />
</picture>

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

Элемент <img> выполняет две задачи:

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

Распространённые сценарии использования <picture>:

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

• Предоставление альтернативных форматов изображений на случай, если некоторые форматы не поддерживаются.

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

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

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

Атрибуты

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

Примечания по использованию

Вы можете использовать свойство object-position, чтобы настроить положение изображения внутри рамки элемента, а свойство object-fit — чтобы задать способ изменения размера изображения для размещения в рамке.

Примеры

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

Атрибут media

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

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

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

Вы можете менять изображения для светлой и тёмной тем с помощью медиахарактеристики prefers-color-scheme:

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="logo-light.png" media="(prefers-color-scheme: light)" />
  <img src="logo-light.png" alt="Product logo" />
</picture>

Атрибут srcset

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

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

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

Обратите внимание, что:

• дескрипторы ширины и плотности пикселей нельзя использовать одновременно
• если дескриптор плотности пикселей не указан, подразумевается значение 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

Атрибут sizes элемента <source> позволяет указать набор пар «медиавыражение — длина» и задать размер отображения изображения для каждого условия. Это помогает браузеру выбрать наиболее подходящее изображение из атрибута srcset, в котором перечислены изображения с их внутренней шириной.

Браузер проверяет медиавыражения в атрибуте sizes до загрузки каких-либо изображений. Дополнительные сведения см. в описании атрибута sizes элементов <img> и <source>.

Например:

<picture>
  <source
    srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
    sizes="(max-width: 600px) 400px, 800px"
    type="image/jpeg" />
  <img src="fallback.jpg" alt="Example image" />
</picture>

В этом примере:

• Если ширина области просмотра составляет 600 пикселей или меньше, размер слота равен 400 пикселям; в противном случае он равен 800 пикселям.
• Браузер умножает размер слота на коэффициент плотности пикселей устройства, чтобы определить идеальную ширину изображения, а затем выбирает из srcset ближайшее доступное изображение.

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

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

Атрибут type

Атрибут 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
• Руководство по типам и форматам файлов изображений
• медиахарактеристика prefers-color-scheme