<picture>

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

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

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

Обязателен

Поддержка:

HTML5

Атрибуты:

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

Пример:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="ru"> 
  <title>picture</title> 
 </head> 
 <body> 
  <picture>
   <source srcset="weblector.svg">
   <img src="weblector.png" width="256" height="256" alt="weblector">
  </picture> 
 </body> 
</html>