Адаптивні зображення: використання srcset

Якщо Ви почати використовувати адаптивні зображення (різні зображення в HTML для різних ситуацій) і все, що Ви робите, це перемикаєтесь між різними версіями одного і того ж зображення (найпопулярніший варіант), все, що Вам потрібно, - це атрибут srcset для <img>. Подивиться на цей приклад:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Це не тільки більш простий синтаксис, цей спосіб краще, ніж <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. Але це має деякі недоліки. Так що зараз Ви повинні самі вирішувати потрібно це Вам чи ні.

Джерело