Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD

17

Від автора: «Зменшіть вагу сторінки» — один з найбільш частих рад на сайті Dareboost. За даними HTTP Archive trends зображення становлять 53% від середньої ваги сторінки, будь-то десктоп або мобільний пристрій. Якщо ви хочете зменшити вагу веб-сторінок, оптимізація зображень повинна бути на першому місці.

Під кожне зображення свій формат

Не завжди так просто знайти відповідний формат зображень. Візьмемо наш логотип, наприклад. Ми могли зберегти його в PNG, JPEG, WebP або SVG. Вага зображень сильно б розрізнявся. З допомогою тесту це можна візуалізувати:

Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD

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

Розглянемо другий приклад, на цей раз з фотографією зльоту шаттла. SVG просто не може уявити коректно таке зображення (чому пояснимо трохи пізніше). Ми отримуємо приблизно однакові зображення в форматах JPEG, PNG і WebP:

Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD

Результати разюче відрізняються. WebP явно виділяється при поданні всій складності фотографії. На жаль, цей формат підтримується тільки в Chrome і Opera, тому ми віддаємо перевагу JPEG.

Порада: при тестуванні веб-продуктивності на Dareboost наш інструмент систематично визначає правильне використання формату PNG (або радить використовувати інший формат).

При збереженні JPEG велика частина З запитує вас, яку якість залишити, так як це формат з втратою якості. Вибираючи якість менше 100%, можна зберегти дорогоцінні байти, коригуючи лише певні точки зображення. Давайте збережемо наше зображення з якістю 80%. Ми отримаємо досить цікавий результат: вага впав більш ніж на 50%, а суттєво змінилося всього пара точок.

Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD

Як бачите, вибір формату не така вже тривіальна задача, і не всі формати підходять для всіх зображень. Давайте пояснимо детальніше…

Як вибрати правильний формат зображення?

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

Що з себе являє моє зображення?

Деякі формати файлів кодують зображення рівно так, як вони з’являються на екрані – у вигляді матриці кольорових точок. Кожна кольорова точка кодується на кілька байт і розташовується усередині карти зі своїми координатами. Тому такі формати іноді називають bitmap. Потім різні алгоритми стиску зменшують простір, займане цієї інформації на жорсткому диску. Ці формати відносяться до растровій графіці. Їх перевага в тому, що вони вміють обробляти будь-які фотографії, а у деяких форматів, наприклад PNG, є додаткові можливості типу оптимізації колірної палітри і прозорості.

На жаль, цей процес кодування перед позиціонуванням точок повинен визначити розміри матриці (дозвіл зображення). Як наслідок – якщо збільшити растрову графіку JPG, PNG або WebP, значно знижується якість.

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

Зменшення ваги зображень за рахунок інформації

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

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

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

Нижче представлено кілька форматів файлів і відповідні до них інструменти оптимізації. Деякі з них включають графічне ПО типу Photoshop або GIMP:

PNG: Zopfli-png, PNGOUT, OptiPNG, AdvPNG, PNGCrush, PNQQuant

JPG: JPEGOptim, MozJPEG, Jpegtran, Guetzli

FileOptimizer (Windows), ImageOptim (Mac) або Trimage (Linux) – поєднує в собі кілька алгоритмів. У них можна тестувати різні оптимізації з різними рівнями втрат і експортувати оптимізоване зображення. Вони навіть здатні зберігати PNG в PNG-8 (варіант PNG з палітрою в 256 кольорів), а не в PNG-24 для економії байт.

Чому нічого не сказано про GIF?

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

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

Якщо вам потрібен формат GIF, є алгоритм стиснення gifsicle. З його допомогою зручно маніпулювати GIF контентом – зменшуйте колірну палітру, розмір, обрізайте і кадруйте… Іноді я використовую gifsicle для кодування коротких записів свого екрану і вставити їх в email, так як більшість email клієнтів не вміють читати вбудовані відео.

Подавайте правильний розмір файлу під контекст

Підібрати правильний формат файлу недостатньо для того, щоб надати оптимальне зображення.

Уявіть, що ви використовуєте зображення 2680 пікселів в ширину на задньому тлі сайту, спроектованого під комп’ютери з високою роздільною здатністю екрану (HiDPI і Retina™). На мобільному пристрої або меншому дозволі з 3G з’єднанням браузер не лише буде завантажувати великий обсяг необов’язкових даних, але він також буде сам змінити розмір зображень з допомогою внутрішнього алгоритму, щоб вписати ширину в екран телефону. Результат буде не дуже, не кажучи вже про затримку в рендері… Замість цього було б краще створити кілька версій оригінального зображення під різні дозволи і дозволити браузеру вибирати зображення під поточний контекст.

Адаптивні зображення – термін, що втілює в собі всі методи, які входять у процес створення декількох зображень для однієї області веб-сторінки, які будуть адаптовані під можливі контексти навігації. Для фонів і декоративних зображень можна використовувати CSS медіа запити.

Для недекоративных зображень специфікація picture додала атрибут srcset в тег Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD у 2014 році (так, вже три роки минуло!). Атрибут srcset являє собою колекцію URL-адрес на різні версії одного зображення з різними дозволами (але зі збереженням співвідношення сторін). Атрибут дає браузеру можливість вибрати версію зображення, виходячи з контексту. На жаль, без завантажених файлів CSS браузер може не зрозуміти відносне простір, займане зображенням у вікні, тому також необхідно визначити атрибут sizes.

Якщо крім оптимізованого зображення ви хочете запропонувати формати, підтримувані обмеженим числом браузерів (таких як WebP), або хочете керувати різним співвідношенням сторін залежно від контексту (питання дизайну), можете загорнути зображення в тег picture і кілька source:

Оптимізація зображень для зменшення ваги сторінки: формати файлів, інструменти і RWD

З усіма можливими медіа файлами, стилями, дозволами, щільністю пікселів і підтримуваними форматами HTML розмітка адаптивних зображень може стати досить великою. Але не забувайте, що HTTP відповідь завжди повинен бути стиснутий. Ну і різниця в 500B між цією розміткою і просто одним тегом img буде істотним зрушенням у бік зменшення ваги зображення.

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

Автоматизуйте, автоматизуйте, автоматизуйте

Вибір правильного формату зображення, генерація превью, іноді використання інших форматів, більш адаптованих під контекст (WebP), після чого повторна генерація превью… Виконувати цю роботу з великою кількістю зображень високої якості – титанічна праця. Всього пара інструментів, будь-то WCM або E-Commerce платформи, включають просунуті функції по управлінню зображеннями. Навіть рішення Digital Asset Management будуть марні, які зазвичай приділяють увагу управлінню візуальними файлами, де управління адаптивними зображеннями повинно бути прерогативою.

Тим не менш, існують рішення типу Cloudinary — сторонній сервіс на SaaS — або Thumbor (пристрій, яке необхідно встановити в мережі). Поговоріть зі своєю командою розробки і виберіть найкраще рішення, не забудьте пояснити учасникам проблеми і підготувати їх до обраного рішення. Не забувайте зберігати оригінальні зображення (в кращому якості) і думати про оптимізацію, навіть з втратою якості.

Наприклад, на E-Commerce сайті фотографії товарів набагато критичніше, ніж декоративні зображення, тому вам не можна знижувати їх якість. Точно так само якщо ви в дорогому магазині, ваші відвідувачі будуть очікувати бездоганної якості зображень. Вам необхідно тонко налаштувати оптимізацію. Іноді, як було з Flickr, правильна настройка може зайняти кілька місяців.

Використовуйте ліниву завантаження по максимуму (з або без візуального ефекту)

Ще один спосіб поліпшити продуктивність веб-сторінки – уникати непотрібних зображень при первинному завантаженні. Наприклад, можна затримати завантаження всіх зображень, які не з’являються в першій видимій області сторінки (лінива завантаження). Існує безліч JS бібліотек, але деякі несумісні з вашим кодом: порадьтеся з командою розробки або запропонуйте незалежну бібліотеку на чистому JS типу Lozad. Лінива завантаження також доступна на Apache і nginx: ModPageSpeed Lazyload.

Раптова поява зображень – одна з проблем ледачою завантаження. Тому необхідно визначати коли і як завантажувати зображення з затримкою, щоб користувач не помічав цього. Але коли? Після первинної завантаження сторінки (onload)? Коли користувач скролит контент і вьюпорт досягає певної області? Ліниву завантаження необхідно обговорювати з UX дизайнерами, які можуть порадити, як анімувати поява зображень, щоб це було не так різко. Деякі сайти заповнюють область брендованим контентом. Інші використовують основні кольори зображення або навіть форму реального зображення SVG.

Зниження кількості зображень за допомогою стека зображень

В мережах з високою затримкою можна швидко заощадити час, зменшивши кількість завантажуваних зображень. Замість завантаження окремих файлів зображення можна згрупувати в один файл. Спрайт – приклад такої техніки для растрових зображень. Шрифти іконок і SVG символи – еквівалент для векторних зображень.

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

Нарешті: затримка може бути не постійною проблемою. В протоколі HTTP/2 з’єднання оптимізовані на одночасне завантаження декількох ресурсів ця техніка втратить свою значимість. В теорії.

Кінець?

Ну немає! Управління зображеннями (адаптивними) ще далеко від досконалості.

Наприклад, замість відправки великої кількості інформації в браузер і можливості вибрати правильне зображення під контекст чому не попросити браузер передавати контекст під час первинної завантаження і обчислювати всі контексти на сервері? Про це думають кілька членів What WG в специфікації «Client Hints». Підтримка досі сильно обмежена, але концепція стандартизується в IETF. Вона дуже схожа на ініціативу на початку 2010 Responsive Web Design + Server Side Components, aka RESS, яка вже намагалася втілити серверні механізми.

Чи вийде цього разу?