Адаптивні зображення на сайті: створення за допомогою атрибута srcset

15

Від автора: в нашому взаємопов’язаному світі, де у людей безліч різних пристроїв, плавність роботи веб-сайту на всіх пристроях повинна бути в пріоритеті. Кількість переглядів вашого сайті не складається лише з одного пристрою з певним дозволом. І щоб сайт добре працював з будь-яким дозволом екрану, він повинен бути адаптивним.

Якщо ви чули про адаптивний веб-дизайн (RWD), то, швидше за все, ви знаєте про тонкості, з якими доводиться стикатися (і то як Bootstrapрешает їх!). Важливою складовою адаптивного сайту є адаптивні зображення. У цій статті ми дізнаємося, що таке адаптивні зображення на сайті. Розглянемо створення адаптивних зображень за допомогою атрибута srcset.

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

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

Коли ви хочете, щоб зображення відмінно відображалося на екранах різних фізичних розмірів. Приміром, вам треба показати одне і те ж зображення на 13.5 дюймовому екрані ноутбука і на 5-дюймовому екрані смартфона (вікно браузера на весь екран).

Коли ви хочете, щоб зображення відмінно виглядала на екранах з різним дозволом (або щільність пікселів на різних пристроях).

Коли ви хочете, щоб зображення виглядало відмінно в різних форматах (JPEG XR, наприклад), звичайно, якщо браузер підтримує формат. Формат можна вибрати з-за більшої ступеня стиснення.

Адаптивні блоки підтримуються в більшості сучасних браузерів, в тому числі в Microsoft Edge (починаючи з Windows Insider Build 10547). Підтримку властивості srcset в різних браузерах можна подивитися тут.

Як зробити зображення адаптивними

Існує маса способів зробити зображення адаптивними. Один із старих способів – за допомогою скрипта (не рекомендується). Але з ним пов’язані деякі проблеми. Перша проблема – якщо зображення завантажується через скрипт, але сам скрипт розташований нижче завантажуваного зображення, то можна отримати два зображення. Друга проблема – якщо в розмітці не прописано зображення, і воно завантажується тільки через JS, то є шанс, що зображення взагалі не завантажиться, якщо в браузері відключений JS.

Звідси випливає те, що нам потрібен кращий спосіб для створення адаптивних зображень. І на щастя, він існує! У цьому методі використовуються атрибути: srcset, sizes, picture

Атрибут srcset

Перед тим, як я поясню принцип роботи атрибута srcset, важливо зрозуміти кілька термінів:

Співвідношення логічних і фізичних пікселів на пристрої

Співвідношення логічних і фізичних пікселів це кількість пікселів екрану пристрою на один піксель CSS. Тут є ще два ключових терміна:

Щільність пікселів пристрою (кількість фізичних пікселів на дюйм): У пристроїв з великою роздільною здатністю буде велика щільність пікселів, а отже, на одному рівні масштабування у такого пристрою буде більше співвідношення логічних пікселів до фізичних. Приміром, у смартфона Lumia 950 більшу роздільну здатність, ніж у бюджетній Lumia 630. Отже, у першій люмии співвідношення логічних пікселів до фізичних вище.

Рівень масштабування веб-переглядача: На одному і тому ж пристрої більший рівень масштабування означає більшу кількість фізичних пікселів на один піксель CSS, а отже, і більшу співвідношення логічних і фізичних пікселів. Наприклад, розглянемо таку фігуру:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Якщо наблизити картинку в браузері (Ctrl + Plus), число CSS пікселів для блоку DIV не зміниться, а от кількість фізичних пікселів збільшиться. Тобто збільшиться кількість фізичних пікселів на один CSS піксель. Якщо ви хочете відобразити зображення або його частини за допомогою методу співвідношення логічних і фізичних пікселів, вам знадобиться атрибут srcset:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Дескриптор X в атрибуті srcset задає співвідношення логічних і фізичних пікселів.

Значення 1 – використовується зображення content-1/images/space-needle.jpg.

Значення 2 – використовується зображення space-needle-2x.jpg.

Значення 3 – використовується зображення space-needle-3x.jpg.

Атрибут src використовується для старих браузерів, які не підтримують новий атрибут. Цей спосіб відмінно працює. З допомогою X Дескриптора ви отримаєте абсолютно таке ж зображення на пристроях з однаковим співвідношенням логічних пікселів до фізичних – навіть якщо зображення відображається на 13.5 дюймовому ноутбуку і 5 дюймовому смартфоні.

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

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

З коду випливає, що ширина першого зображення 200px, другого 400px, третього 600px. Якщо ширина екрану користувача становить 150 CSS пікселів, то це прирівнюється до X дескриптору:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

(Не забувайте, що співвідношення логічних і фізичних пікселів це всього лише кількість пікселів пристрою на один CSS піксель)

Атрибут sizes

Якщо вам потрібно відобразити зображення різних розмірів (різні висота і ширина) на різних екранах, тут вам допоможе атрибут sizes разом з w дескриптором атрибута srcset. Ще раз розглянемо кілька прикладів:

Приклад 1

Ви хочете, щоб зображення займало половину ширини області перегляду. Код:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Тепер браузер сам вирішить, яке зображення завантажити, грунтуючись на ширині вікна браузера і співвідношенні пікселів на пристрої. Наприклад: якщо ширина браузера становить 500 CSS пікселів, зображення буде займати 250px в ширину (50vw). Те ж саме можна отримати і таким способом:

srcset=»content-1/images/content-1/images/space-needle.jpg 0.8 x, images/space-needle-2x.jpg 1.6 x,
images/space-needle-hd.jpg 2.4 x»

Для екранів 1.5 x браузер завантажить зображення images/space-needle-2x.jpg, так як співвідношення пікселів одно 1.6 x (найбільш підходяще для екранів 1.5 x).

Приклад 2

Ви хочете, щоб зображення займало половину ширини області перегляду, якщо ширина браузера більше 40em. Якщо ширина браузера дорівнює або менше 40em, зображення повинне займати всю ширину області перегляду. Код:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Принцип схожий з медіа запитами. Якщо область перегляду завширшки дорівнює 39em, вираз (max-width: 40em) повертає true, виконується 100vw. Зображення займає всю ширину області перегляду. Тобто якщо ширина вікна браузера становить 500 CSS пікселів, то зображення буде 500px в ширину. Того ж можна досягти й іншим способом:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Схожий на перший спосіб. Браузер визначає, яке зображення більше підходить під заданий розмір екрану. Якщо ширина області перегляду 41em, то вираз (max-width: 40em) звертається в false, і виконується 50vw. Зображення займає половину ширини області перегляду. Наступним ми розглянемо елемент picture, але спочатку пригадаємо все, що ми дізналися Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Рішенням останньої задачі буде елемент picture!

Тег picture

Як було відмічено вище, тег picture використовується в тих випадках, коли необхідно відобразити різні зображення під різні розміри екрану. Тег picture являє собою контейнер для інших елементів, за допомогою якого можна контролювати завантаження зображень. Розглянемо приклад:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Якщо в першому source медіа запит в атрибуті media повертає true, то при максимальній ширині перегляду в 20em завантажиться відповідне зображення з папки images/small. Всі зображення в атрибуті srcset це дублі одного і того ж зображення, але під різні дозволи.

Сам по собі тег picture нічого не відображає. Навіть тег source окремо від атрибута srcset нічого не відображено. Тег source повинен містити атрибут srcset і необов’язкові атрибути sizes, media type. В кінці обов’язково додайте всередину тега picture зображення img.

Вибір відповідного зображення можна робити і з підтримуваних форматів в браузері. Такий спосіб відмінно підходить, якщо якийсь формат відмінно зберігає чіткість зображення. Приміром, JPEG-XR формат, що має меншу вагу файлу в порівнянні із звичайним JPG. Підтримується в Microsoft Edge і IE9+. Протестувати даний формат можна за допомогою атрибута type в тезі source:

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Буде вибрано потрібне зображення тільки при виконанні двох атрибутів media type. Якщо браузер не розпізнає ні один формат, буде взято звичайне зображення з тега img.

Збираємо всі разом

Після осмислення принципу роботи адаптивних зображень, розглянемо заключний приклад, використовує всі три способи разом – srcset, sizes і picture.

Responsive images are here!
Адаптивні зображення на сайті: створення за допомогою атрибута srcset

У цьому прикладі ви використовуємо тег picture з двома source. Перший спрацьовує, якщо максимальна ширина області перегляду дорівнює 700px. Далі атрибут sizes вирішує, яке завантажити зображення залежно від розміру екрана. Принцип роботи нічим не відрізняється від атрибута sizes. Тобто якщо максимальна ширина 500px (від 0px до 500px), зображення займе половину області перегляду. Картинка вибирається в залежності від співвідношення пікселів. Але якщо ширина області перегляду більше 500px (але <=700px, оскільки ми знаходимося в першому source), то зображення займе лише 1/10 частина області перегляду.

Схожим чином буде обраний другий source у випадку, якщо максимальна ширина становить 1400px (тобто ширина варіюється від 701px до 1400px). Атрибут sizes перевіряє область перегляду. Якщо її ширина становить 701px-1000px, зображення займе всю область. Якщо ж ширина знаходиться в межах 1001px-1400px, то зображення займе половину ширини області перегляду. В якості перевірки всіх можливих випадків, я просто змінював розмір вікна браузера. В реальному світі на ваш сайт будуть заходити з різних пристроїв. Ось саме тоді і ви відчуєте всю міць адаптивних зображень. Ось що у мене вийшло:

Область перегляду вікна браузера в межах від 1001px до 1400px: ширина зображення – половина від розміру вікна

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Область перегляду вікна браузера в межах від 701px до 1000px: ширина зображення – все вікно

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Область перегляду вікна браузера в межах від 501px до 700px: ширина зображення – 1/10 вікна браузера

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Область перегляду вікна браузера в межах від 0px до 500px: ширина зображення – половина вікна браузера

Адаптивні зображення на сайті: створення за допомогою атрибута srcset

Майже у мети!

Адаптивні зображення дозволяють вам, як розробнику, надати кращий сервіс для ваших клієнтів на всіх пристроях. Саме час інтегрувати їх на ваш веб-сайт. Сподіваюся, вам було приємно читати цю статтю!