Респонсивний елемент <img>

Контекстні зображення на екранах зі збільшеною піксельною щільністю також потрібно завантажувати з більшим числом точок на той самий розмір зображення. Відтак браузеру потрібно вказати коли яке зображення завантажувати. Крім того, можна завантажувати різні файли в залежності від ширини вʼюпорту (відтак в залежності від пристрою на якому відкрито застосунок). Ці техніки будуть розглянуті далі.

Атрибут srcset

Атрибут srcset разом із тегом <img> використовують для вказання декількох різних варіантів зображення, які можуть вибиратися в залежності від розміру вʼюпорту або піксельної щільності екрана користувача.

У цьому атрибуті потрібно вказувати не різні зображення (за контентом або форматом), а різні варіації одного і того ж зображення.

<img srcset="" src="" alt="">

Дескриптор x

Дескриптор x використовують в атрибуті srcset. Він вказує щільність пікселів зображення - тобто скільки фізичних пікселів зображення буде відображено на один логічний піксель екрана.

Наприклад, якщо піксельна щільність екрану - 2x (Retina) потрібно вказати 2x.

<img srcset="шлях_до_зображення_1.jpg 1x,
             шлях_до_зображення_2.jpg 2x,
             шлях_до_зображення_3.jpg 3x"
     src="зображення_за_замовчуванням.jpg" 
     alt="Опис зображення">

шлях_до_зображення_1.jpg - це зображення зі звичайною щільністю пікселів (вказують 1x).

шлях_до_зображення_2.jpg - це зображення з щільністю пікселів 2 рази більше, ніж звичайна (вказують 2x).

шлях_до_зображення_3.jpg - це зображення з щільністю пікселів 3 рази більше, ніж звичайна (вказують 3x).

Зображення різної піксельної щільності вказують через кому. Після шляху до файлу через пробіл вказують якраз піксельну щільність екрану (1x і 2x тощо). Браузер вибере зображення відповідно до розширення екрану користувача.

В атрибуті src вказують версію зображення стандартної піксельної щільності. Це зображення завантажать старі браузери, які не знають про атрибут srcset.

<img
  srcset="./people.png 1x, ./[e-mail] 2x"
  src="./people.png"
  alt="Люди"
/>

Якщо відкрити інструменти розробника і перейти на вкладку Network, то видно, що завантажується тільки одне зображення, яке підходить для щільності екрану, на якому відкрита веб-сторінка. Наприклад, якщо відкрити на Macbook з екраном подвійної піксельної щільності, то завантажиться зображення з дескриптором 2x.

Якщо відкрити вкладинку Elements і навести курсор на атрибут src, то ми також побачимо поточний файл зображення, який завантажився, навіть попри те, що в розмітці там вказано файл для екранів стандартної піксельної щільності.

Використовуючи цей дескриптор браузер вибирає зображення тільки враховуючи щільність пікселів екрану.

Хотілось би, щоб браузер вибирав зображення в залежності від щільності пікселів, ширини вʼюпорту і розміру самого зображення на екрані. Це питання вирішує наступний дескриптор.

Дескриптор w

Дескриптор w в атрибуті srcset вказує ширину зображення в пікселях. Він дозволяє вказати ширину зображення, якому відповідає даний варіант в srcset. Це дозволяє браузеру точно визначити, яке зображення вибрати в залежності від фактичної ширини, на яку буде відображено зображення на сторінці.

<img srcset="шлях_до_зображення_1.jpg 400w,
             шлях_до_зображення_2.jpg 800w,
             шлях_до_зображення_3.jpg 1200w"
     src="зображення_за_замовчуванням.jpg" 
     alt="Опис зображення">

шлях_до_зображення_1.jpg, шлях_до_зображення_2.jpg та шлях_до_зображення_3.jpg - це різні варіанти зображень з різною шириною.

400w, 800w та 1200w - це дескриптори, які вказують ширину зображень в пікселях.

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

При цьому, щоб і самим розуміти скільки респонсивних зображень ми маємо їм дають назви в яких описано ширину. Наприклад якщо розмір зображення 400х300 пікселів, то назвати зображення треба так image-400.jpg. І помічаємо це зображення дескриптром 400w. Тобто в імені вказують ширину зображення, щоб не забути її.

Атрибут sizes

У разі використання дескриптора w необхідно використовувати атрибут sizes, щоб підказати браузеру приблизний розмір полотна, на якому в браузері буде малюватися зображення. Розміри можна вказувати як у пікселях, так і у відносних одиницях.

Якщо зображення матиме фіксовану ширину на різних пристроях, то можна вказати одну ширину.

<img srcset="шлях_до_зображення_1.jpg 400w,
             шлях_до_зображення_2.jpg 800w,
             шлях_до_зображення_3.jpg 1200w"
     sizes="400px"
     src="зображення_за_замовчуванням.jpg" alt="Опис зображення">

Якщо ширина буде мінятися в залежності від ширини вʼюпорту, то вказують різні розміри.

<img srcset="шлях_до_зображення_1.jpg 400w,
             шлях_до_зображення_2.jpg 800w,
             шлях_до_зображення_3.jpg 1200w"
     sizes="(max-width: 600px) 400px, 
            (max-width: 1200px) 800px,
            1200px"
     src="зображення_за_замовчуванням.jpg" alt="Опис зображення">

sizes атрибут вказує браузеру, яку ширину повинно займати зображення на сторінці в залежності від ширини вьюпорту користувача. У цьому прикладі, якщо ширина вьюпорту менше або рівна 600px, зображення візьме ширину 400px; якщо ширина вьюпорту менше або рівна 1200px, зображення візьме ширину 800px; в інших випадках, воно візьме ширину 1200px.

Браузер читає медіа-записи в атрибуті sizes, зліва направо. Браузер обирає перше значення, яке задоволбняє умову. тому треба стежити за вказанням порядку оголодення розмірів.

Як браузер вибирає зображення для завантаження

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

Створимо фіксовану розмітку зображення на 100% ширини вʼюпорту. Також створимо чотири варіанти зображення на ширину 600px, 768px, 1024px і 1280px. І подивимося на поведінку завантаження зобрадень.

    <img
      srcset="
        ./tree-600-374.jpg   600w,
        ./tree-768-479.jpg   768w,
        ./tree-1024-638.jpg 1024w,
        ./tree-1280-797.jpg 1280w
      "
      sizes="100vw"
      src="./tree-600-374.jpg"
      alt="Опис зображення"
    />

Нехай будемо відкривати це зображення на компʼютері Macbook із щільністю пікселів 2х.

На 300px вʼюпорту вміститься 600px зображення по ширині (бо щільність пікселів 2). І завантажиться зображення tree-600-374.jpg.

Так само, якщо вʼюпорт 384px завширшки - піксельна ширина зображення буде 768px. І завантажиться зображення tree-768-479.jpg.

Для вʼюпорту шириною 512px зображення вшир матиме 1024px і завантажиться зображення tree-1024-638.jpg.

Для ширини вʼюпорту 640px вміститься вшир 1280px і завантажиться зображення tree-1280-797.jpg.

При перетині "точки перелому" не завжди буде братися більше зображення! Браузер обере те, яке найкраще підходить у даній ситуації.

На відміну від розробника, який знає тільки розмір зображення і приблизний розмір полотна, на якому воно буде відображатися, браузер знає всі важливі технічні характеристики пристрою, на якому була відкрита веб-сторінка.

Браузер може враховувати й інші фактори, такі як швидкість інтернет-з'єднання і стан заряду батареї.

Щоб перевірити роботу цього коду варто перекопіювати його в свій проект локально на компʼютері.

У прикладі вище зображення розтягається у всю ширину вʼюпорту. А можна зробити зображення фіксованої ширини.

    <img
      srcset="
        ./tree-600-374.jpg   600w,
        ./tree-768-479.jpg   768w,
        ./tree-1024-638.jpg 1024w,
        ./tree-1280-797.jpg 1280w
      "
      sizes="500px"
      src="./tree-600-374.jpg"
      alt="Опис зображення"
    />

В такому разі на екранах зі стандартною піксельною щільністю (1х) завантажиться зображення tree-600-374.jpg.

На компʼютерах Macbook (2x): 500x2=1000px завантажиться зображення tree-1024-638.jpg.

А на мобільних пристроях зі щільністю 3х: 500x3=1500px завантажиться зображення tree-1280-797.jpg.

Покликання:

Трохи детальніше про адаптивні зображення англ.

Також про адаптивні зображення