Главная » Руководство по HTML – HTML5 введение » Изображения HTML » Элемент picture HTML

Элемент picture HTML

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

HTML Элемент picture

HTML - элемент <picture>

HTML - элемент <picture> дает веб-разработчикам больше гибкости при указании графических ресурсов.

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

Каждый элемент <source> имеет медиа-атрибут, который определяет, когда изображение является наиболее подходящим.

Этот код показывает разные изображения для разных размеров экрана:

<picture>
  <source media="(min-width: 650px)" srcset="img_duck.jpg">
  <source media="(min-width: 465px)" srcset="img_tree.jpg">
  <img src="img_vortex.jpg">
</picture>

Измените размер окна браузера, чтобы увидеть, как это работает.

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

Когда использовать элемент <picture>

У элемента <picture> есть две основные цели:

1. Пропускная способность

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

2. Поддержка форматов

Некоторые браузеры или устройства могут поддерживать не все форматы изображений. Используя элемент <picture>, вы можете добавлять изображения всех форматов, и браузер будет использовать первый формат, который он распознает, и проигнорирует любой из следующих элементов.

В этом примере браузер будет использовать первый распознанный формат изображения:

<picture>
  <source srcset="/htm/img_tree.jpg">
  <source srcset="/htm/img_duck.jpg">
  <img src="/htm/img_clouds.png" alt="Вихревое облако" style="width:auto;">
</picture>

ПРИМЕР

★ Примечание: браузер будет использовать первый элемент <source> с соответствующими значениями атрибутов и игнорировать все последующие элементы <source>.

Справочник по тегам HTML

Справочник по тегам содержит дополнительную информацию об элементах HTML и их атрибутах.

Тег	Описание
<img>	Определяет изображение
<map>	Определяет карту изображения
<area>	Определяет интерактивную область внутри карты изображения
<picture>	Определяет контейнер для нескольких ресурсов изображений

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Фавикон HTML (Favicon)

Фоновые изображения HTML ☚

Поделиться ссылкой