Респонсивний елемент <img>
Контекстні зображення на екранах зі збільшеною піксельною щільністю також потрібно завантажувати з більшим числом точок на той самий розмір зображення. Відтак браузеру потрібно вказати коли яке зображення завантажувати. Крім того, можна завантажувати різні файли в залежності від ширини вʼюпорту (відтак в залежності від пристрою на якому відкрито застосунок). Ці техніки будуть розглянуті далі.
Атрибут srcset
Атрибут srcset разом із тегом <img> використовують для вказання декількох різних варіантів зображення, які можуть вибиратися в залежності від розміру вʼюпорту або піксельної щільності екрана користувача.
У цьому атрибуті потрібно вказувати не різні зображення (за контентом або форматом), а різні варіації одного і того ж зображення.
Дескриптор x
Дескриптор x використовують в атрибуті srcset. Він вказує щільність пікселів зображення - тобто скільки фізичних пікселів зображення буде відображено на один логічний піксель екрана.
Наприклад, якщо піксельна щільність екрану - 2x (Retina) потрібно вказати 2x.
шлях_до_зображення_1.jpg - це зображення зі звичайною щільністю пікселів (вказують 1x).
шлях_до_зображення_2.jpg - це зображення з щільністю пікселів 2 рази більше, ніж звичайна (вказують 2x).
шлях_до_зображення_3.jpg - це зображення з щільністю пікселів 3 рази більше, ніж звичайна (вказують 3x).
Зображення різної піксельної щільності вказують через кому. Після шляху до файлу через пробіл вказують якраз піксельну щільність екрану (1x і 2x тощо). Браузер вибере зображення відповідно до розширення екрану користувача.
В атрибуті src вказують версію зображення стандартної піксельної щільності. Це зображення завантажать старі браузери, які не знають про атрибут srcset.
Якщо відкрити інструменти розробника і перейти на вкладку Network, то видно, що завантажується тільки одне зображення, яке підходить для щільності екрану, на якому відкрита веб-сторінка. Наприклад, якщо відкрити на Macbook з екраном подвійної піксельної щільності, то завантажиться зображення з дескриптором 2x.
Якщо відкрити вкладинку Elements і навести курсор на атрибут src, то ми також побачимо поточний файл зображення, який завантажився, навіть попри те, що в розмітці там вказано файл для екранів стандартної піксельної щільності.
Використовуючи цей дескриптор браузер вибирає зображення тільки враховуючи щільність пікселів екрану.
Хотілось би, щоб браузер вибирав зображення в залежності від щільності пікселів, ширини вʼюпорту і розміру самого зображення на екрані. Це питання вирішує наступний дескриптор.
Дескриптор w
Дескриптор w в атрибуті srcset вказує ширину зображення в пікселях. Він дозволяє вказати ширину зображення, якому відповідає даний варіант в srcset. Це дозволяє браузеру точно визначити, яке зображення вибрати в залежності від фактичної ширини, на яку буде відображено зображення на сторінці.
шлях_до_зображення_1.jpg, шлях_до_зображення_2.jpg та шлях_до_зображення_3.jpg - це різні варіанти зображень з різною шириною.
400w, 800w та 1200w - це дескриптори, які вказують ширину зображень в пікселях.
Позначаючи кожне зображення дескриптором w ми дозволяємо браузеру вибрати найбільш підходящий варіант зображення залежно від фактичних умов відображення на пристрої користувача.
При цьому, щоб і самим розуміти скільки респонсивних зображень ми маємо їм дають назви в яких описано ширину. Наприклад якщо розмір зображення 400х300 пікселів, то назвати зображення треба так image-400.jpg. І помічаємо це зображення дескриптром 400w. Тобто в імені вказують ширину зображення, щоб не забути її.
Атрибут sizes
У разі використання дескриптора w необхідно використовувати атрибут sizes, щоб підказати браузеру приблизний розмір полотна, на якому в браузері буде малюватися зображення. Розміри можна вказувати як у пікселях, так і у відносних одиницях.
Якщо зображення матиме фіксовану ширину на різних пристроях, то можна вказати одну ширину.
Якщо ширина буде мінятися в залежності від ширини вʼюпорту, то вказують різні розміри.
sizes атрибут вказує браузеру, яку ширину повинно займати зображення на сторінці в залежності від ширини вьюпорту користувача. У цьому прикладі, якщо ширина вьюпорту менше або рівна 600px, зображення візьме ширину 400px; якщо ширина вьюпорту менше або рівна 1200px, зображення візьме ширину 800px; в інших випадках, воно візьме ширину 1200px.
Як браузер вибирає зображення для завантаження
Щоб визначити, яке зображення завантажити браузер перемножує розмір полотна sizes на щільність пікселів і вибирає зображення, яке найбільше підходить.
Створимо фіксовану розмітку зображення на 100% ширини вʼюпорту. Також створимо чотири варіанти зображення на ширину 600px, 768px, 1024px і 1280px. І подивимося на поведінку завантаження зобрадень.
Нехай будемо відкривати це зображення на компʼютері 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.
У прикладі вище зображення розтягається у всю ширину вʼюпорту. А можна зробити зображення фіксованої ширини.
В такому разі на екранах зі стандартною піксельною щільністю (1х) завантажиться зображення tree-600-374.jpg.
На компʼютерах Macbook (2x): 500x2=1000px завантажиться зображення tree-1024-638.jpg.
А на мобільних пристроях зі щільністю 3х: 500x3=1500px завантажиться зображення tree-1280-797.jpg.
Покликання:
Last updated
