Элемент <picture>

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

Выводить рисунки разного размера для мобильных и настольных устройств.

<picture>
 <source
  srcset="hero-small.jpg  400w,
          hero-medium.jpg 800w,
          hero-large.jpg  1200w">
 <img src="image/hero.jpg" alt="">
</picture>

Для экранов ретина можно показывать картинку большего размера.

<picture>
 <source srcset="hero@2x.jpg 2x, hero.jpg 1x">
 <img src="image/hero.jpg" alt="">
</picture>

Отображать изображения разных пропорций, учитывающих ориентацию устройства.

<picture>
 <source media="(orientation: landscape)" srcset="image/hero-langscape.jpg">
 <source media="(orientation: portrait)" srcset="image/hero-portrait.jpg">
 <img src="image/hero.jpg" alt="">
</picture>

Выводить изображение в векторном формате SVG, а для стырых браузеров, его не поддерживающих, показывать PNG.

<picture>
 <source srcset="image/logo.svg">
 <img src="image/logo.png" alt="">
</picture>

Использовать современные графические форматы для изображений AVIF и WebP и формат JPEG как резервный для старых браузеров.

<picture>
 <source srcset="image/logo.avif" type="image/avif">
 <source srcset="image/logo.webp" type="image/webp">
 <img src="image/logo.jpg" alt="">
</picture>

Синтаксис

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

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

Атрибуты

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

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>picture</title> </head> <body> <picture> <source media="(orientation: landscape)" srcset="image/mushroom_landscape.jpg"> <source media="(orientation: portrait)" srcset="image/mushroom_portrait.jpg"> <source srcset="image/mushroom_retina.jpg 2x, image/mushroom.jpg 1x"> <img src="image/mushroom.jpg" alt="Сыроежка"> </picture> </body> </html>

В данном примере указано несколько изображений, которые браузер отображает в зависимости от условий: