HTML тег <picture>

Элемент <picture> (от англ. "picture" ‒ «картина, изображение») представляет собой контейнер для хранения нескольких элементов <source>, каждый из которых содержит имена файлов альтернативных версий одного и того же изображения вместе с условиями, при которых те должны быть загружены. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Выбранный браузером вариант изображения выводится с помощью вложенного элемента <img>. Элемент <picture> может ускорить загрузку ваших сайтов, особенно на мобильных девайсах.

Вот несколько областей применения элемента <picture>:

• для ЖК-дисплеев «Retina», отличающихся высокой плотностью пикселей, можно загружать изображения с высоким разрешением;
• выводить картинки разного размера для браузеров мобильных или настольных устройств, например, обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном;
• загружать по-разному ориентированные изображения в разных пропорциях для того, чтобы соответствовать изменениям в макете, учитывающем ориентацию устройства;
• выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать картинку с другим расширением.

Синтаксис

<picture>
  <source srcset="URL">
  ... 
  <img src="..." alt="...">
</picture>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты.

Различия между HTML 4.01 и HTML5

Элемент <picture> был введен в HTML 5.

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

В следующем примере загружаемое изображение зависит от размера экрана:

<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="iphone@tablet.png">

  <img src="iphone.png"
      alt="iPhone">

</picture>

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

Учебник HTML

HTML уроки: HTML Элементы

HTML Изображения