HTML Элемент picture

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

Элемент HTML <picture>

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

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

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

Пример:

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

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

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

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

Есть две основные причины использовать элемент <picture>:

1. Оптимизация загрузки (Bandwidth)

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

2. Совместимость форматов изображений (Format Support)

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

Пример:

Браузер выберет первый опознанный им формат изображения:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

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