<picture>: Елемент зображення

Елемент HTML <picture> (картина, ілюстрація, зображення) вміщає нуль або більше елементів <source> і щонайменше один елемент <img>, завдяки чому пропонує різні зображення для різних варіантів екранів і пристроїв.

Браузер розглядає всі елементи <source> та обирає найбільш придатний з усіх. За браком подібних або якщо браузер не підтримує елемент <picture>, буде завантажено зображення за посиланням, яке вказано в атрибуті src елемента <img>. Його буде відображено у просторі, який займає <img>.

Спробуйте його в дії

Щоб обрати URL-адресу зображення, яке найкраще підходить під наявний макет та можливості пристрою, користувацький агент перевіряє атрибути srcset, media, та type у кожного наданого елемента <source>.

Елемент <img> призначений для двох речей:

1. Описує розмір та інші атрибути зображення та його представлення.
2. Забезпечує запасний варіант на випадок, якщо жоден із запропонованих елементів <source> не надасть годящого зображення.

Поширені способи використання <picture>:

• Графічний дизайн. Обрізання або модифікація зображень для різних умов media (наприклад, у випадку, коли вихідне зображення має занадто високу деталізацію, можна завантажити його спрощену версію для дисплеїв меншого розміру).

• Альтернативні формати зображення для тих випадків, коли певні формати не підтримуються.

  [!NOTE] Наприклад, нові формати, як-от AVIF або WEBP мають багато переваг, але їх можуть не підтримувати деякі браузери. Перелік підтримуваних форматів зображень можна подивитись у посібнику типів файлів та форматів зображень.

• Економія трафіку та пришвидшення завантаження вебсторінок шляхом завантаження найбільш придатної для пристрою користувача версії зображення.

Якщо потрібно надати зображення з високою чіткістю для дисплеїв з високою роздільною здатністю (Retina), скористайтеся атрибутом srcset елемента <img>. Це дає змогу браузерам обирати версії з меншою чіткістю в режимі заощадження даних, і не потребує явних умов media.

Атрибути

Цей елемент підтримує лише глобальні атрибути.

Примітки щодо використання

Можна скористатися властивістю object-position для регулювання розташування зображення в контейнері елемента, і object-fit – для керування тим, як зображення змінює розмір, щоб уміститися в контейнер.

[!NOTE] Використовуйте ці властивості на дочірньому елементі <img>, а не на <picture>.

Приклади

Ці приклади показують, як різні атрибути елемента <source> змінюють вибір зображення всередині <picture>.

Атрибут media

Атрибут media визначає медійну умову (подібно до медіазапиту), яку користувацький агент оцінює для кожного елемента <source>.

Якщо медійний вираз для елемента <source> оцінюється як false, то браузер пропускає його і переходить до наступного елемента всередині <picture>.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

Атрибут srcset

Атрибут srcset пропонує перелік можливих зображень на основі розміру або чіткості зображення.

Він складається із переліку дескрипторів зображення. Кожен дескриптор містить URL-адресу зображення, а також:

• дескриптор ширини, w (наприклад, 300w); АБО
• дескриптор піксельної щільності, x (наприклад, 2x), щоб подавати зображення з високою чіткістю для екранів з високою роздільною здатністю.

Зауважте, що:

• дескриптори ширини та піксельної щільності не слід використовувати разом
• відсутність дескриптора чіткості – це те саме, що 1x
• дублювати значення дескрипторів заборонено (2x & 2x, 100w & 100w)

Наступний приклад демонструє використання атрибута srcset для елемента <source>, що вказує на зображення високої чіткості та стандартну роздільну здатність:

<picture>
  <source srcset="logo.png, logo-1.5x.png 1.5x" />
  <img src="logo.png" alt="Логотип WebDoky" height="320" width="320" />
</picture>

Атрибут srcset можна також застосувати до елемента <img>, навіть не потрібен <picture>. Наступний приклад демонструє, як скористатися srcset для визначення зображень стандартної роздільної здатності та високої чіткості відповідно:

<img
  srcset="logo.png, logo-2x.png 2x"
  src="logo.png"
  height="320"
  width="320"
  alt="Логотип ВебДоків" />

Атрибут sizes під час використання srcset не є обов'язковим, але рекомендується використовувати його для допомоги браузеру у виборі найкращого джерела зображення.

Без sizes браузер використовує усталений розмір зображення, як задано в його розмірах у пікселях. Але це може не бути найкращим вибором для всіх пристроїв, особливо якщо зображення відображається на екранах різних розмірів або в різних контекстах.

Зверніть увагу, що sizes діє лише за умови того, що атрибуту srcset надані дескриптори ширини замість співвідношення пікселів (наприклад, 200w, а не 2x). Для отримання додаткової інформації про використання srcset, дивіться посібник Адаптивні зображення.

Атрибут type

Атрибут type визначає MIME тип для URL-адреси, вказаної в атрибуті srcset елемента <source>. Якщо користувацький агент не підтримує заданий тип, то елемент <source> пропускається.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="фото" />
</picture>

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• Елемент <img>
• Елемент <source>
• Розташування та розміщення зображення всередині його контейнера: object-position та object-fit
• Посібник з типів файлів та форматів зображень