Элемент picture HTML

Элемент 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>

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

Когда использовать элемент <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>

ПРИМЕР

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

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

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

Является ли утверждение верным?

Проверьте себя, насколько хорошо вы запомнили материал.

Проверить себя

Вопрос

Ваш ответ:

Правильный ответ:

Следующий

Правильных ответов {{SCORE_CORRECT}} из {{SCORE_TOTAL}}

Результат

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

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