<picture> HTML

Тег <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>.

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

WAI ARIA

Нет значения role по-умолчанию.

Атрибуты

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

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

Примеры

<!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>