Елемент <picture>

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

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

Але не завжди потрібно використовувати елемент <picture>, інокри просто достатньо респонсивного <img>.

Синтаксис

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

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

picture - контейнер в якому описують можливі варіанти зображення.

source - браузер перевіряє кожен такий елемент і вибирає той, який найбільше підходить. Браузер для цього аналізує його атрибути srcset, media, sizes і type.

img - застосується це зображення, якщо жоден варіант source не підійде.

Кінцеве зображення завантадиться в полотні, яке займає елемент <img>.

Різні формати зображень

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

У прикладі показано, як вказати браузеру завантажити сучасний формат зображення webp, або його альтернативу в png, якщо формат webp не підтримується.

Всі можливі варіанти зображень перераховують у елементах <source>. Браузер їх послідовно обробляє.

Сервіс https://squoosh.app/ працює із форматами зображень webp.

<picture>
  <source srcset="picture.webp 1x, [e-mail] 2x" type="image/webp" />
  <source srcset="picture.jpg 1x, [e-mail] 2x" type="image/jpeg" />
  <img src="picture.jpg" alt="Опис зображення" />
</picture>

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

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

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

<picture>
  <!-- Зображення для ширини вьюпорту менше або рівне 767px -->
  <source media="(max-width: 767px)" srcset="small-image.jpg">
  <!-- Зображення для ширини вьюпорту більше 767px та щільністю пікселів 2x -->
   <source media="(min-width: 768px) and (min-resolution: 192dpi)" srcset="large-image-2x.jpg">
  <!-- Зображення для ширини вьюпорту більше 767px -->
  <source media="(min-width: 768px)" srcset="large-image.jpg">
        
  <!-- За замовчуванням виводимо зображення для ширини вьюпорту менше 768px -->
  <img src="small-image.jpg" alt="Опис зображення">
</picture>

Щоб побачити цей ефект в дії відкрийте приклад CodePen в окремому вікні натиснувши Edit on Codepen і міняйте ширину вікна. На переході 600px ви побачите зміну зображення.

<picture>
  <source media="(max-width: 600px)" srcset="eifel-400-600.jpg">
  <source media="(min-width: 601px)" srcset="eifel-800-500.jpg">

  <img src="eifel-800-500.jpg" alt="Опис зображення">
</picture>

У цьому прикладі:

• При вьюпорті до 600px буде завантажено портретне зображення 400x600.

• Для екранів шириною від 601px і ширше, буде завантажено ландшафтне зображення 800x500.

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

    <picture>
      <source
        media="(max-width: 600px)"
        srcset="./eifel-400-600.jpg 400w, ./eifel-800-1200.jpg 800w"
        sizes="400px"
      />
      <source
        media="(min-width: 601px)"
        srcset="./eifel-800-500.jpg 800w, ./eifel-1600-1000.jpg 1600w"
        sizes="800px"
      />

      <img src="./eifel-800-500.jpg" alt="Опис зображення" />
    </picture>

Покликання:

Responsive images

Complete Guide to Responsive Images

Handling responsive images in HTML