Атрибут sizes

16

Від автора: сьогодні я розповім про атрибут sizes і найскладнішу частину в новій специфікації. Атрибут sizes досить дивний… Він виглядає дивно, веде себе дивно, однак він є тією відсутньою частиною специфікації, яка збирає все в єдине ціле. Даний атрибут – це ключ до розуміння синтаксису адаптивних зображень.

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

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

працює з співвідношенням сторін і фокусуванням зображення

W і x відповідають за ширину та дозвіл відповідно

Залишилося з’ясувати «А як же це зображення буде вести себе по відношенню до решти контенту на сторінці?». Не знаючи відповіді на питання, браузер робить найкращий вибір з усього масиву можливих.

Альтернативні зображення не потрібні

Почнемо з найпростішого прикладу. У більшості макетів банерів зображення займає 100% ширини, тобто 100vw. Приміром, у нас два зображення salton-large.jpg і content-1/images/salton-small.jpg. Першою шириною 1500px і друге 750px. Щоб визначити, яке зображення відобразити, скористаємося w дескриптором:

Атрибут sizes

За допомогою CSS можна вказати, як зображення буде вести себе в контейнері:

header img { width: 100%; height: auto; }

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

Атрибут sizes

Sizes не використовує одиниці виміру vw, але часто такий підхід дуже корисний. Для тих, хто не знайомий з даними одиницями вимірювання, я приготував статтю.

Тепер у браузера є вся необхідна інформація, щоб визначити, яке з двох зображень використовувати: спершу, браузер розпізнає пристрій і визначить щільність пікселів, потім від w дескриптора отримає реальні розміри обох зображень. Далі, щоб визначити відповідне зображення під розмір вікна на пристрої, підуть обчислення – можливо, буде враховуватися навіть пропускна здатність каналу. Sizes працює лише в поєднанні з w дескриптором і не використовується разом з x дескриптором.

Трохи ускладнимо завдання: наше зображення знаходиться всередині гумового контейнера з властивістю max-width: 750px. Тепер, зображення не обов’язково розтягуватися на всю ширину екрану: на мобільних пристроях, швидше за все, так і буде, а на десктопних версій немає. Щоб браузер зрозумів нашу задумку, скористаємося медіа умовою – форма вбудованих медіа-запитів:

Атрибут sizes

На українську мову значення медіа умови можна перекласти так: «Якщо розмір вікна не менш 750px, то зображення має ширину 750px. В іншому випадку зображення розтягується на 100% ширини.»

Хіба це не змішує розмітку і стилі?

На цьому сайті і будь-якому іншому пристойному сайті про front-end розробці ви побачите постійні заклики відокремлювати HTML від CSS. Це робиться з відомих причин, але атрибут sizes, схоже, знову все перемішав. І на жаль, іншого способу немає: браузер завжди спочатку завантажує HTML і будь-які зображення. Єдиний спосіб змусити браузер відкласти завантаження всіх зображень це додавання в розмітку атрибута sizes і медіа умов.

А чи потрібен мені атрибут sizes?

Все це може завантажити вас, посіявши сумнів щодо необхідності використання даного атрибуту. Атрибут sizes працює дивним чином: замість чітких завдань браузеру, він посилає директиви і підказки. На це питання існує дві відповіді:

Якщо ви використовуєте w дескриптор, то вам потрібно використовувати і атрибут sizes – це частина специфікації. Без цього зображення в браузері будуть відображатися дивно. Тим більше, що не потрібно робити щось складніше нашого першого прикладу.

Не потрібно використовувати атрибут sizes скрізь. Дуже заманливо застосовувати нову технологію під всі зображення. Але реальність така, що даний атрибут необхідно застосовувати тільки там, де з його допомогою можна надати користувачам зображення кращої якості під різні розміри екранів.

Цей атрибут можна поєднувати як з w дескриптором, так і тегом picture. Приклади я приберіг до фінальної статті про розширених можливостях адаптивних зображень, яка вийде трохи пізніше.