Тег <picture>

Syntax

<picture>
  <source srcset="photo.avif" type="image/avif">
  <img src="photo.jpg" alt="Описание">
</picture>

Example

<picture>
  <source media="(max-width: 600px)" srcset="banner-mobile.jpg">
  <source media="(min-width: 601px)" srcset="banner-desktop.jpg">
  <img src="banner-desktop.jpg" alt="Баннер">
</picture>

Notes

• picture обязательно должен содержать img в конце — именно он реально отображается, source лишь предлагают варианты.
• В отличие от srcset в самом img (где браузер выбирает только по размеру/плотности), picture позволяет art direction — разное кадрирование для разных экранов.

Accessibility

• alt задаётся на img внутри picture, а не на source или picture.

Похожие инструменты