Вісім рекомендацій і одне правило для адаптивних зображень

25

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

Одним з уроків виявилося те, що ми провели багато часу в дискусіях про те, якими повинні бути інтерфейсні рішення для адаптивних зображень—новий елемент picture або srcset, або чарівний новий формат зображення—і мало часу в суперечках про те, які зміни можуть знадобитися серверних систем і людської праці.

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

Ці розмови привели мене до документування свого ідеального сценарію. Якби у мене була чарівна паличка для організацій, що б я затвердив у процесах та інструменти їх адаптивних зображень?

Результатом стали вісім рекомендацій і одне правило адаптивних зображень.

Вісім рекомендацій для адаптивних зображень

1. Де можете, використовуйте векторні зображення або шрифтові іконки

По можливості, уникайте проблем піксельних зображень, використовуючи їх векторні альтернативи.

SVG має гідної браузерною підтримкою. У Filament Group є проект під назвою Grunticon, який генерує SVG і альтернативні PNG’і поряд з необхідним вам CSS.

Шрифтові іконки теж відмінне рішення з досить великою підтримкою. Можна створювати власні шрифти лише з необхідними вам іконками. Група зображень може міститися в єдиному HTTP-запиті, і це означає, що іконки зі шрифтом гарантують ті ж переваги, що і спрайт CSS.

Тільки переконайтеся, що використовуєте для своїх іконок концепцію прогресивного поліпшення і застосовуєте їх в зрозумілому вигляді.

РЕСУРСИ

Можна застосувати: SVG

Можна застосувати: мережеві шрифти Web Fonts

A List Apart: епоха символічних шрифтів Symbol Fonts

IcoMoon

Pictos

FontForge

2. Заохочуйте вивантаження найбільш якісних джерел

Так як вартість HD-екранів знижується, вони починають з’являтися в більшій кількості пристроїв і у великих розмірах. Неважко в недалекому майбутньому представити собі Apple випускає дисплеї Retina Cinema.

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

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

3. Забезпечте автоматична зміна розміру зображень і сервіс стиснення

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

Вісім рекомендацій і одне правило для адаптивних зображень

Наприклад, якщо клієнт, з яким я радився, вирішив, що їм потрібно три контрольні точки з адаптивними зображеннями, які означали б в три рази більшу кількість поточних 800 000 зображень. І це – звичайне завдання. Помножте кількість зображень на два, якщо хочете підтримувати дисплеї Retina. Остаточний результат складе 4,8 мільйона зображень.

Зараз їм не знадобиться обробка всіх зображення відразу, але все одно це великий обсяг роботи. Так що замість цього компаніям потрібно створити або придбати централізовані системи, які стануть змінювати розмір і стискати зображення.

4. Зображення можна змінювати до будь-якого розміру з допомогою параметрів ДО а

Сервіс зміни розмірів зображень повинен вміти вважати інформацію, яка ідентифікує початкове зображення, а також ті розміри, які потрібні зображення, і на льоту змінити його.

Хороший приклад такого сервісу – це Sencha SRC. Подивіться, як можна оголосити в ДО е лише ширину або висоту, і сервіс пропорційно змінить розмір зображення. Як раз те, що вам потрібно.

Вісім рекомендацій і одне правило для адаптивних зображень

Якщо ви є клієнтом Akamai, вам міг би стати в нагоді сервіс Akamai Edge Image Manipulation. Він зараз знаходиться в експлуатаційному тестуванні і пропонує величезну кількість корисної функціональності.

Що б ви не робили, потрібно переконатися, що ви забезпечуєте правильне кешування і не руйнуєте зовнішній кеш.

5. Забезпечте автоматичний випуск розмітки зображень

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

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

Наприклад в шаблонах ви могли б не застосовувати прямого HTML, а замість того визначити серію вихідних зображень та контрольні точки, як тут:

{
«source»:»/source.jpg»,
«breakpoints»: [
{ «max-width»:»30em»,»pixel-density»:1,»width»:360px},
{ «max-width»:»30em»,»pixel-density»:2,»width»:720px},
{ «max-width»:»30em»,»pixel-density»:1,»width»:800px},
{ «max-width»:»30em»,»pixel-density»:2,»width»:1600px},
{ «pixel-density»:1,»width»:800px},
{ «pixel-density»:2,»width»:1600px},
]
}

А потім передати це основної функції, яка буде виробляти правильну розмітку PictureFill або ту розмітку, яку ви збираєтеся застосовувати.

Не зациклюйтеся на синтаксисі або даних, що містяться у прикладі. Головне – те, що, централізувавши у функції розмітку зображень, ви зможете швидко змінювати її по мірі розвитку стандартів.

6. Забезпечте спосіб заміни масштабованих зображень в художніх цілях

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

Часом ви виявите, що простої зміни розміру недостатньо. Більш дрібна версія того ж зображення стає нераспознаваемой.

Вісім рекомендацій і одне правило для адаптивних зображень

В маленькому розмірі зображення нелегко розглянути.

Вісім рекомендацій і одне правило для адаптивних зображень

Якщо у зменшеному форматі зробити зміни в исходнике, то зображення буде легше бачити.

Вісім рекомендацій і одне правило для адаптивних зображень

Це те, що зветься випадком художньої редактури.

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

Для цього проекту ми змогли встановити деяку кількість шаблонів, де могла б знадобитися художня редактура. Під ці шаблони CMS буде модифікована, щоб дати можливість авторам вивантажувати різні вихідні коди і визначати, в яких контрольних точках вони повинні використовуватися.

7. Об’єднайте найкраще з досвіду стиснення зображень

Якщо збираєтеся централізувати зміна розмірів зображень в якості сервісу, то це ідеальна можливість об’єднати кращі інструменти стиснення.

У Google’е є відмінна інформація з методів оптимізації зображень. І, само собою зрозуміло, що вам слід встановити для своїх зображень довгострокові заголовки.

8. Бонус: Відстежуйте підтримку формату зображень WebP і користуйтеся ним

Оскільки ви централизуете передачу зображень, чому б не розглянути підтримку WebP?

В середньому розмір файлу WebP на 25% – 34% менше у порівнянні з файлом у форматі JPEG. WebP стискає на 34% краще, ніж libpng, і на 26% — ніж pngout для стиску зображень без втрат.

Нещодавно Google писав про те, як при запиті зображень у них перевіряється наявність підтримки WebP і автоматично надається альтернатива у форматі WebP, якщо браузер здатний таке зображення відобразити.

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

Одне-єдине правило адаптивних зображень:

Майте на увазі, те, що ви робите зараз, в майбутньому буде заборонено до використання

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

Єдине, у чому можна бути впевненим – що, коли стандарти наблизяться до адаптивним зображень, нам доведеться змінити те, що ми робимо зараз.

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