Елемент <picture>

Як ми вже розібралися, респонсивний елемент <img> дозволяє завантажувати різні версії (розміри) однакового зображення. Елемент <picture> використовується у разі, коли необхідно завантажити зображення різного формату (розширення), зображення різної геометрії (кадрування) або зображення для підтримки режиму темної теми.

Корисно

У кожній ситуації необхідно використовувати правильний інструмент, здебільшого буде достатньо респонсивного елемента <img>, не обов'язково всюди застосовувати <picture>.

Синтаксис

Елемент <picture> - це контейнер для одного або більше елементів <source>, в яких перераховуються можливі варіанти, та одного обов'язкового елемента <img>.

<picture>
  <source srcset="" media="" sizes="" type="" />
  <source srcset="" media="" sizes="" type="" />
  <img src="" alt="" />
</picture>

• Браузер перевірить кожен з елементів <source> і вибере найбільш придатний. Щоб вибрати оптимальне зображення, браузер аналізує атрибути srcset, media, sizes і type.
• Якщо жоден з варіантів не підійде, буде вибране зображення, вказане в атрибуті src елемента <img>.
• Вибране зображення малюється на полотні, яке займає елемент <img>.

Підтримка сучасних форматів

Елемент <picture> застосовується для завантаження зображень в сучасних форматах (наприклад webp). Для браузерів, які не підтримують такі формати, вказується дефолтне зображення в альтернативному форматі (наприклад jpg або png). Атрибут type вказує MIME-тип зображення. Якщо браузер не підтримує його, то цей елемент <source> пропускається.

Наступний приклад визначає елемент <picture>, який дозволить браузерам завантажити photo.webp, водночас надається альтернатива photo.jpg для браузерів, які ще не підтримують webp.

<picture>
  <source srcset="photo.webp 1x, photo@2x.webp 2x" type="image/webp" />
  <source srcset="photo.jpg 1x, photo@2x.jpg 2x" type="image/jpeg" />
  <img src="photo.jpg" alt="Кіт" />
</picture>

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

Корисно

Для того щоб швидко і зручно конвертувати зображення у формат webp, можна використовувати онлайн-інструменти, наприклад squoosh.app.

Кадрування (art direction)

Техніка кадрування використовується для завантаження різних зображень для кожного екрану. Це дозволяє показати користувачеві максимум корисної інформації і деталей зображення, навіть на маленьких пристроях. Наприклад, завантажувати альбомну (landscape) або книжкову (portrait) версію зображення, залежно від орієнтації або роздільної здатності пристрою.

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

<!-- Для екранів ширше 600px буде завантажений photo-wide.jpg -->
<picture>
  <source srcset="photo-wide.jpg" media="(min-width: 600px)" />
  <img src="photo.jpg" alt="Фотографія" />
</picture>

Перейдіть у приклад і змінюйте ширину області перегляду.

• Для екранів шириною до 600px буде завантажено портретне зображення 400x600 пікселів.
• Для екранів шириною від 601px і ширше, буде завантажено ландшафтне зображення 800x400 пікселів.

Для підтримки екранів з високою щільністю пікселів, кожному елементу <source> необхідно додати набір зображень з дескрипторами в атрибут srcset, і не забути задати атрибут sizes.

Додамо в код попереднього прикладу підтримку ретіни зі щільністю 2x, використовуючи дескриптор w. Обмежимо ландшафтну версію зображення максимальною шириною 800px, якщо в'юпорт ширший за 800 пікселів. В іншому випадку зображення тягнеться на 100% в'юпорту.