Якщо Ви почати використовувати адаптивні зображення (різні зображення в HTML
для різних ситуацій) і все, що Ви робите, це перемикаєтесь між різними
версіями одного і того ж зображення (найпопулярніший варіант), все, що Вам
потрібно, - це атрибут srcset
для <img>
. Подивиться на цей приклад:
<img src="small.jpg">
Це не тільки більш простий синтаксис, цей спосіб краще, ніж <picture>
\+
<source>
з явними атрибутами media
. Плюс, він має можливість мати набагато
кращу браузерну підтримку в майбутньому.
З srcset, браузер сам з'ясовує, яке зображення краще
В прикладі вище, все, що ми робимо, це повідомляємо браузеру про зображення, які є в наявності та їх розмір. Потім браузер робить всю іншу роботу, з'ясовуючи, який варіант буде найкращим.
Для прикладу, нехай ми маємо екран шириною 320px та 1x (non-retina дисплей) та зображення: small.jpg (500px в ширину), medium.jpg (1000px) і large.jpg (2000px).
Браузер виконує наступні дії:
500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25
Значення 1.5625 є найближчим до того, що мені потрібно.
Тепер інший браузер заходить на сайт. Це також 320px дисплей, але це retina (2x). Переглядач виконує необхідні розрахунки і визначає оптимальне зображення
- з коефіцієнтом 3.125.
Бачите, як це вже корисно? Ви дозволяєте браузеру виконувати роботу за Вас, з'ясовуючи, що краще, а не намагаєтеся самі в цьому розібратися.
Браузери стануть ще розумнішими
Пам'ятайте, що вже зараз srcset
має переваги.
-
Браузер може пропонувати користувачам потрібні їм зображення;
-
Браузер може почати виконувати факторинг смуги пропускання;
Так, теоретично, але це питання часу.
Надання браузеру можливості самому вирішувати що краще, створює плацдарм для розвитку цього та подібних інструментів.
Коли?
Якщо ви хочете використовувати srcset прямо зараз і розраховуєте на гарну браузерну підтримку, Вам потрібен polyfill. Але це має деякі недоліки. Так що зараз Ви повинні самі вирішувати потрібно це Вам чи ні.
Ще немає коментарів