<picture>

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

Синтаксис тега <picture>

<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1024px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="Image description">
</picture>

Спецификация HTML

Тег <picture> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <picture> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Отображение разных изображений в зависимости от ширины экрана:

<picture>
  <source srcset="image-small.jpg" media="(max-width: 768px)">
  <source srcset="image-medium.jpg" media="(max-width: 1024px)">
  <source srcset="image-large.jpg">
  <img src="image-default.jpg" alt="Image description">
</picture>

Отображение разных форматов изображений в зависимости от браузера:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.png" alt="Image description">
</picture>

Отображение фонового изображения с альтернативным источником:

<div style="background-image: url('image-default.jpg');">
  <picture>
    <source srcset="image-large.jpg">
    <img src="image-default.jpg" alt="Image description">
  </picture>
</div>

Для чего использовать тег <picture>

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

Атрибуты тега <picture>

Тег <picture> не имеет специфических атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Для использования тега <picture> нет никаких ограничений.

Нюансы

Для каждого изображения должен быть указан альтернативный текст через атрибут alt.

Поддержка браузерами

Тег <picture> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

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

Чем заменить тег

Тег <picture> можно заменить тегом <img> с атрибутом srcset, как описано выше.

Актуальность

Тег <picture> является актуальным и рекомендуется к использованию в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.