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

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

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

Синтаксис

1
2
3
4
<picture>
    <source />
    <img />
</picture>

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

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

Атрибуты

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!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>

Ссылки

Комментарии