Тег <picture>

<picture> дозволяє браузеру обрати найкраще джерело зображення з кількох source залежно від розміру екрана чи підтримки формату, з img як fallback.

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.

Схожі інструменти

Тег <img>

Атрибути src, alt, loading та srcset тегу <img> з прикладами.

Responsive image

Як віддати браузеру кілька варіантів зображення для різних розмірів екрана.