HTML тег <picture>

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

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

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

Синтаксис

HTML тег <picture> парный, содержимое записывается между открывающим (<picture>) и закрывающим (</picture>) тегами.

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

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Некоторая информация об изображениях</p>
  </body>
</html>

Атрибуты

Атрибут Значение Описание
media media_query Указывает, что файл адаптирован под определённые виды устройств.
sizes Указывает допустимые относительные размеры источника. Добавлен в HTML5
src URL Указывает URL адрес медиа-файла.
srcset URL Указывает изображения, которые используются в разных ситуациях (для экранов планшетов, для экранов ретина и др.). Добавлен в HTML5.
type video/ogg
video/mp4
video/webm
audio/ogg
audio/mpeg
Указывает MIME-тип медийного источника.

Тег <X> поддерживает также глобальные атрибуты .




Related articles