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

2 хв. читання
18 листопада 2020

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

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: srcset, атрибут media, source srcset