Перейти к содержанию

<picture>

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

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

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

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

Can I Use picture? Data on support for the picture feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Синтаксис

<picture>
  <source />
  <img />
</picture>

Внутри <picture> содержится ноль или несколько элементов <source>, которые идут перед одним элементом <img>.

Закрывающий тег обязателен.

Атрибуты

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

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

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>picture</title>
  </head>
  <body>
    <picture>
      <source srcset="image/html5-logo.svg" />
      <img src="image/html5-logo.png" width="256" height="256" alt="HTML5" />
    </picture>
  </body>
</html>