Введення
На даний момент зображення залишаються найбільшою за обсягом трафіку частиною вмісту веб-сторінки. Тому для того, щоб сайт швидко завантажувався і швидко реагував на дії користувача, веб-розробникам надзвичайно важливо жорстко контролювати розмір зображень і їх якість. У цьому сенсі «потрапити в яблучко» не так просто.
Ви можете автоматизувати створення зображень та одержувати «непоганий» якість у більшості випадків, але для отримання найкращих результатів, вам доведеться стежити за рівнем якості з допомогою ваших, людських очей. У цій статті представлена невелика історична довідка, причини і методи стиску зображень, щоб розуміти і правильно адресувати проблеми стиснення зображень при роботі з вашим сайтом.
Пам’ятка: Контрольний список після стиску зображень
- Налаштуйте рівень стиснення зображень вручну, де це можливо.
- Автоматизуйте стиснення інших, щоб досягти найвищої продуктивності.
Чому важливо бути маленьким
Якщо говорити дуже спрощено, чим більше сторінка, тим довше вона завантажується. Проведено безліч досліджень, які показують, що користувачі повільних сайтів проводять менше часу на сайті, менше натискають на лінки та рекламні блоки, і витрачають менше грошей. Маленькі сайти, такі як AutoAnything, які вдвічі скоротили час завантаження сайту, відзначили збільшення виручки на 13 відсотків. А дослідження на великих сайтах, таких як Amazon, показали, що їх виручка знижується на 1 відсоток на кожні 100 мілісекунд затримки завантаження.
Що може бути гірше, ніж змушувати користувачів платити за завантаження вашого сайту
На додачу до того, що великі сторінки негативно впливають на продуктивність стаціонарних комп’ютерів, найбільше роздуті сторінки змушують страждати мобільних користувачів. Сторінка розміром в 1Мб не тільки нескінченно довго завантажується, вона також може неприємно позначитися на рахунку за послуги зв’язку.
Навіть так звані «безлімітні» тарифні плани для мобільних телефонів, насправді такими не є. Більшість з них надають близько 2Гб за фіксовану плату, а перевищення цього ліміту може тарифікуватися додатково. Не кажучи вже про те, що є багато місць в світі, де відсутні безлімітні тарифні плани і де вартість завантаження інформації є серйозною проблемою для користувачів.
Великі зображення – великі проблеми
Ми можемо бачити, що найбільшу частку в обсязі сторінки займають зображення. Це погані новини для мобільних пристроїв, де картинка буквально коштує тисячі слів.
Неправильна обробка зображень часто стає причиною поганої продуктивності. Занадто великі, недостатньо стиснені зображення або зображення дуже високої якості можуть виявитися занадто важкими, що надає прямий вплив на швидкість завантаження вашого сайту. Вибрати правильний метод стиснення і досягти при цьому найкращих результатів нескладно, знаючи про особливості цього процесу.
Види алгоритмів стиснення
У загальному випадку існують дві стадії стиснення зображення: з втратою даних і без втрати даних. Алгоритми стиснення з втратою даних оброблять вихідний потік даних, що втрачені дані не можуть бути відновлені при декомпресії.
Більшість алгоритмів стискання зображень з втратою даних базуються на особливостях людського зору і часто позбавляються від інформації, яку ми насправді не можемо бачити, за рахунок цього зменшуючи обсяг. Наприклад, обмежуючи кількість кольорів, які використані у зображенні. Менше квітів – менший обсяг даних для передачі. Як правило, коли ви зберігаєте зображення у форматі, що підтримує втрату даних, ви вибираєте деяке значення, що представляє собою співвідношення якості зображення до його розміру.
Досвідчені веб-розробники розуміють, що існує золота середина, коли якість досить висока, а розмір файлу скорочений, наскільки це можливо.
| До | Після |
| 0.123, 1.2345, 21.2165, 21.999, 12.123 | 0,0,20,20,10 |
Рис. 1 – Приклад стиснення з втратою даних. Значення округлюється до найближчого числа, кратного 10. Це перетворення необоротно.
Після стиснення з втратою даних застосовується стиснення без втрат, коли дані при декомпресії відновлюються в початковий стан. Такі алгоритми стиснення дозволяють відновити вихідні дані безпосередньо без будь-якої втрати точності чи іншої інформації. Для зображень популярними кодеками є LZ77, RLE і Арифметичне кодування. Алгоритми стиснення без втрат є основою стиснення, часто вичавлюючи останні відсотки економії вашого контенту.
| До | Після |
| aaaaabbbbbcccddddeeeeffffaaaaabb | a5b4c2d4e4f4a5bb0 |
Рис. 2 – Приклад стиснення без втрат. Кількість символів, що йдуть підряд, визначається числом, після символу. Ми можемо точно відновити вихідні дані. Зауважте, що якщо поспіль тривають не більше двох символів, має сенс просто залишити їх як є. Ви бачите такий приклад наприкінці потоку у вигляді ‘bb’.
Формати зображень
Формат зображень для забезпечення економії розміру при стисненні, як правило, з’єднує разом різні алгоритми стиснення з втратами і без. Існує декілька форматів, підтримуваних веб браузерами, з різними характеристиками. Точніше, не існує (поки що) одного формату «на всі випадки життя». Різні види зображень повинні бути закодовані в різні формати, в залежності від того, що зображення, від того, які формати підтримує браузер і від потреб конкретної веб-сторінки.
У загальному випадку веб-розробнику при виборі формату зображення потрібно відповісти на наступні питання:
- Потрібна прозорість?
- Потрібна анімація?
- Потрібно високу якість зображення?
‘Lena’ – поширене зображення для оцінки і порівняння алгоритмів стиснення зображень.
PNG – простий формат, який підтримує прозорість і стиснення без втрат. Він дозволяє вам вибрати альфа-канал для вашого зображення, щоб замаскувати прозорі області, а також, за бажанням, активувати компресор даних Deflate.
(Deflate – це комбінація двох компресорів: LZ77 та Коду Хаффмана). Оскільки стиснення відбувається без втрат, якість зображення залишається ідентичним вихідного. Однак це породжує проблеми: розміри файлів зазвичай виходять роздутими, не такими маленькими, якими вони можуть бути.
GIF – ще один формат, який підтримує прозорість поряд з анімацією. Формат GIF містить дві стадії стиснення: етап стиснення з втратою даних або визначення палітри (обмеження колірної гами зображення до 256 кольорів), за яким слід стиснення без втрат по алгоритму LZW. Процес квантування кольорів зображення до всього лише 256 виробляє агресивне зниження якості на користь меншого розміру, що також добре впливає на стиск на етапі LZW.
Кольт МакАнлис:
Більшість сучасних передових компресорів найбільше виграють від поєднання декількох етапів кодування. Один етап може змінити потік даних так, що наступні зможуть стиснути його краще, ніж сам вихідний потік. Популярні архіватори, такі як 7zipз’єднують в собі кодування словника по алгоритму LZ, що виробляє зменшене набір символів, яке може бути більш ефективно використано в алгоритмі Ланцюг Маркова.
Або, наприклад, ви можете застосувати алгоритм стиснення без втрат поверх існуючого формату з втратою даних, отриманого від графічного процесора, щоб ще більше стиснути дані. Найбільший виграш можна отримати від правильної комбінації алгоритмів.
Якщо вам не потрібна прозорість або анімація, JPG – найкращий формат для вас.
Спочатку він був розроблений, щоб забезпечувати стиснення високоякісних фотографій, однак він надає набір налаштувань стиснення з втратою даних, дозволяючи вам знайти компроміс між якістю стиснення і розміром зображення, підходящий для вашого застосування.
Якщо ви шукаєте щось більш універсальне серед форматів зображень, варто звернути увагу на WebP. Цей формат може похвалитися не тільки кращим співвідношенням якості стиснення і розміру, але також і підтримкою прозорості, та анімації. Він використовує стиснення, як з втратою, і без втрати даних, і багато в чому так само, як формат JPG, дозволить вам визначити відповідний рівень якості і розміру файлу.
Звичайно, новий формат поки не підтримується всіма браузерами, тому веб-розробники, які вже впровадили його, зараз стикаються з проблемами юзабіліті. Незважаючи на це, 30% економія, порівняно з JPG поряд з можливістю адаптації формату на рівні сервера доводять, що WebP – домінуючий формат для будь-яких сайтів, де розмір зображень представляє проблему.
| Стиснення | Без втрат | З втратами | Прозорість | Анімація | |
| PNG | Хороше | Так | Немає | Повна | Немає |
| GIF | OK | Так | Так | Бінарна | Так |
| JPG | Хороше | Так | Так | Немає | Немає |
| WebP | Відмінне | Так | Так | Повна | Так |
Рис. 3 – Особливості деяких форматів, що підтримуються браузерами.
Компроміс між якістю і розміром
Для тих зображень, якість яких ви не можете змінити, очевидно, що найбільший виграш ви можете отримати, тільки вручну оптимізувавши якість, щоб отримати найменший файл. На сайті Допомоги Вебмайстрам Google є чудове відео, яке покаже вам кілька шляхів тестування якості вашого зображення і як правильно перевірити його сприйняття.
Крім того, як показує проект imgmin, як правило, при стисненні JPG на рівні від 75 до 100 сприйняття якості змінюється незначно:
Для середнього зображення JPEG *видиме* зміна якості від 100 до 75 часто незначно, зате дуже помітна різниця у розмірі файлу на кожному рівні.
Це означає, що багато зображення виглядають добре для звичайного користувача на рівні якості 75, але вдвічі менше за розміром, ніж, якби вони були на рівні якості 95. По мірі того, як якість опускається нижче 75, з’являються більш помітні візуальні зміни, а економія в розмірі зменшується.
Наступна таблиця показує, що на більшості великих веб-сайтів рівень якості коливається близько 75 практично для всіх зображень JPG:
| Сайт | Якість JPG |
| Ескізи картинок Google | 74-76 |
| Повнорозмірні зображення на Facebook | 85 |
| Зображення JPEG на головній сторінці Yahoo | 69-91 |
| Зображення JPEG на головній сторінці Youtube | 70-82 |
| Зображення у Вікіпедії | 80 |
| Фонове зображення на Windows live | 82 |
| Зображення JPEG користувачів Twitter | 30-100 |
Рис. 4 – Середній рівень якості JPG, який використовується на найбільших сайтах.
Настройка параметрів кожного зображення на вашій сторінці, проведена з метою збалансувати якість і розмір, дозволить вам домогтися найкращої економії при найкращих рівнях якості. Однак на великих сайтах розміщено безліч зображень, і вони зазвичай не можуть вручну оптимізувати кожне, тому індивідуальна для кожного зображення настройка рівня якості практично неможлива.
Деякі розробники вибрали більш автоматизований підхід до цього типу кодування, часто застосовуючи до зображень власні евристичні процеси кодування під час розробки. Цей спосіб обробки підходить в якості золотої середини між налаштуванням та автоматизацією, яка допоможе більшості веб-розробників. Ви можете також використовувати різні додатки, наприклад JPEGmini, яке також автоматично налаштує ваш рівень стиснення JPG, щоб отримати найкращу якість.
Трохи радикальним підходом, який використовують розробники, щоб зменшити розмір зображення, є перетворення всіх простих піктограм і зображень у файли SVG, і їх растеризування на стороні клієнта перед відображенням.
Цей процес – компроміс між розміром файлу і швидкодією клієнта: він економить трафік, але провокує велике навантаження на стороні клієнта, щоб реконструювати зображення при рендерінгу.
Як такий, формат SVG-зображень сильно відрізняється від інших типів файлів тим, що це векторний формат, тобто остаточне зображення генерується процедурно, використовуючи інформацію про описані у файлі формах, до отримання певного остаточного зображення. Коли зображення SVG завантажується, воно конвертується у растровий формат (двовимірний масив пікселів, начебто бітової карти) перед тим, як буде відображено.
Рис. 5 – Приклад растрового зображення (зліва) в порівнянні з векторним зображенням (праворуч). Зауважте, що векторне зображення набагато простіше і менш деталізовано. Це з-за того, що даний формат не призначений для створення високоякісних зображень.
Думайте про SVG як про формат, який дозволяє вам зберігати «опис» зображення в дуже невеликому об’ємі пам’яті та генерувати високоякісне, незалежне від дозволу зображення на клієнта, незалежно від розміру вихідних даних. Одне з обмежень формату SVG полягає в тому, що він може бути використаний для подання тільки певного виду зображень, інакше кажучи, векторні зображення повинні бути спрощеними і використовувати набір примітивних типів, щоб визначити, як відобразити кольору на екрані.
Луг в преріях, наприклад, вимагав би надто багато складних форм, щоб добитися економії при стисненні. Растрові зображення краще всього використовувати для фотографій та інших інформаційно-щільних зображень, тоді як векторні зображення прекрасно підходять для логотипів і інших простих шаблонів зображень.
Якість зображень, розмір і різні дозволи екранів.
Одна з великих проблем, з якою стикаються розробники – це кількість пікселів монітора щодо розміру створюваних зображень. Тобто, якщо автор створює зображення для настільного веб-сайту, швидше за все, розміри зображень були обрані ним для перегляду на великих настільних моніторах. Однак мобільні пристрої створюють проблему, так як розміри їх екранів набагато менше і їх трафік набагато дорожче. Як наслідок користувачі будуть завантажувати зображення розміром більше, ніж їм потрібно або чим вони можуть відобразити.
Є кілька способів вирішити цю проблему.
Одне з рішень полягає в попередньому, автономному, розрахунку розмірів зображень для кожного можливого вирішення. Більшість статичних веб-сайтів можуть легко домогтися цього на етапі створення, можливо змінюючи розміри зображень за допомогою наборів інструментів, типу Grunt.
Переваги цієї техніки в тому, що зображення належним чином кешуються в тому форматі, який необхідно кожному пристрою, і ви не втрачаєте час або трафік, щоб доставити інформацію клієнту. Однак з іншого (негативної) боку, це божевілля – керувати експоненціально зростаючим обсягом даних і додаткової логікою, щоб відправляти інформацію, призначену для конкретних користувачів.
Едді Османі:
Якщо ви зацікавлені в використанні Grunt для генерації цього контенту, я б порекомендував спробувати наш спосіб створення адаптивних зображень з допомогою Grunt спільно з ImageMagic для автоматичної генерації зображень з попередньо розрахованими розмірами.
Для тих, хто використовує Node/Express, в якості альтернативи підійде express-processimage, або ви можете створити сценарій, що викликає для вас ImageMagick.
Однак, поки одна з не вирішених проблем з цим підходом – знайти гарне рішення для управління зростанням обсягу ваших даних. Що стосується логіки, є надія, що атрибут srcset вирішить цю проблему (движок WebKit, як ви знаєте, підтримує його, Blink має намір реалізувати підтримку, FF буде його підтримувати в iOS).
А поки можна використовувати polyfill для srcset в якості проміжного кроку.
Інший підхід, розрахований на вибуховий поширення мобільних пристроїв з великою роздільною здатністю екрану, полягає в тому, що ви можете пограти з якістю зображення, його розмірами і ціною перетворення розміру на стороні клієнта.
Фактично, ви можете зберігати зображення з удвічі більшою роздільною здатністю (масштабированное), однак, коли ви експортуєте його у формат з втратою даних, ви обираєте дуже низька якість (що призводить до кращого стиснення). Ідея в тому, щоб вибрати такий рівень якості, при якому стислий більше зображення буде менше за розміром, ніж стислий меншу зображення.
На стороні клієнта ви можете вказати бажані розміри зображення (які повинні бути менше поточних, оскільки зображення було масштабоване). Веб-браузер зменшить зображення до бажаного розв’язання, в процесі чого згладяться шуми, що виникли при низькоякісному стиску; у деяких випадках – повністю. Остаточний результат – менший файл, який легко масштабується в кілька дозволів екрану і не виявляє помітного зниження якості.
Розміри зображень, сприйняття користувача і час завантаження
По суті, єдине, що важливо, це щоб користувачеві здавалося, що сайт завантажується швидко. Швидко з’являється, значить швидко завантажується, тому видима продуктивність набагато важливіше, ніж справжня швидкість.
Існує два основних способи відображати зображення в мережі.
- Почекати повного завантаження зображення і відобразити його після завантаження;
- Відобразити частину зображення, завантажену на даний момент.
Браузери не використовують перший варіант, так як це приводить до найбільш повільної завантаженні сторінки.
Більшість сайтів в мережі побудовано на другому варіанті. Я впевнений, ми всі знайомі з поступовим «розгортанням» зображення зверху вниз. Це відбувається тому, що зазвичай зображення зберігаються у растровому порядку, інакше кажучи, перші байти зображення, які отримує браузер, знаходяться в лівому верхньому куті зображення і далі йдуть по порядку горизонтально. Очевидно, що якщо ми зберігаємо зображення по-іншому, ми можемо змінити порядок передачі бітів по мережі, що змінить те, як зображення відображається на екрані.
Цей «прогресивний» метод кодування може надати сприятливий вплив на користувача, змусивши його думати, що сторінка завантажується «швидко» (зауважте, що це твердження спірне і залежить від користувача). Це досягається шифруванням декількох додаткових версій зображення меншого дозволу, які можуть бути швидше доставлені користувачеві, що дозволяє йому побачити контури зображення, які поступово, по мірі завантаження, стають все чіткіше.
На Coddinghorror.com є прекрасний приклад візуальної різниці цих двох технологій. Ви можете бачити, як стандартний метод розгортає зображення зверху вниз, тоді як прогресивний робить його все чіткіше у міру одержання нових даних.
| Лінійна | Прогресивна |
|
|
Рис. 6 – Приклад лінійної і прогресивної завантаження зображень.
Якщо ви не любите єдинорогів, можете також подивитися більш докладний приклад в блозі Патріка Минана або навіть протестувати ваші зображення, використовуючи інтерактивний тестер Патріка.
Використовувати цю властивість для ваших зображень надзвичайно просто: Просто збережіть ваші GIF або PNG зображення з опцією «interlaced», або JPEG зображення з опцією «progressive» — і вашим користувачам почне подобатися час завантаження вашого веб-сайту. Хоча, варто уточнити, що прогресивні зображення поки не підтримуються всіма браузерами, і завантаження прогресивного зображення на таких платформах, насправді може погіршити продуктивність.
Нестандартні зображення
Інтернет повний геніальних веб-розробників, тому жодна стаття з стиску зображень не буде повною без згадки деяких прекрасних зломів, обхідних шляхів і взагалі вражаючих речей, зроблених цими розробниками, які дозволили їм створити вражаючі маленькі, але якісні зображення.
Поділ вашого прозорого шару для поліпшення стиснення.
Розробники ігор під HTML5 зазвичай пересилають більше зображень, ніж ваш звичайний веб-сайт, більшість з яких – прозорі рамки для анімації. На жаль, це змушує робити PNG зображення, щоб досягти прозорості. Однак кілька розробників винайшли обхідні шляхи, щоб отримати краще стиснення і прозорість зображень. Наприклад, ви можете розділити дані по квітам і прозорості в двох різних файлів зображень (наприклад, два файлу JPG), і відновити їх на клієнта, використовуючи елемент CANVAS. Хоча це і збільшує кількість запитів у мережі, економія в розмірі зображення може бути істотною для розробників, у яких на сайті безліч прозорих зображень.
Джейк Арчибальд:
Варто відзначити, що може бути швидше просто використовувати -webkit-mask там, де це підтримується замість всього цього божевілля з canvas. На щастя я створив бібліотеку, щоб допомогти вам у цьому.
Поліпшення стиснення PNG за рахунок кращої обробки.
Опція Deflate в PNG – це кодер без втрат, але це не повинно зупиняти вас від використання попередньої обробки з втратою якості, якщо ви хочете. Інструменти обробки зображень, такі як ImageAlpha і ImageOptim, можуть стиснути ваше PNG зображення, використовуючи метод з втратою даних в якості попередньої обробки перед кодуванням зображення у формат PNG. Це створює двоступінчастий процес, де стиснення з втратами і без втрат здійснюються двома різними додатками. Результати вражаючі: зменшення простору кольорів дозволяє стискання без втрат знайти і обробити більше збігів у файлі, що виливається в краще стиснення.
Після того, як ви зберегли зображення у форматі PNG, можна переупакувати ваші дані PNG, використовуючи більш досконалі компресори, щоб згенерувати менший файл PNG. Такі інструменти, як advPNG, візьмуть ваш файл PNG і проженуть його через покращений Deflate компресор, щоб отримати менший файл. Або ви можете поєднати PNGOUT з інструментами, начебто OptiPNG або Zopfli, щоб добитися того ж ефекту. Звичайно, кожна з цих систем видає трохи різні результати, залежно від вхідних даних, тому мудрою думкою буде використовувати систему, яка зробить стиснення кількома компресорами і вибере найменший файл. Якщо вам ліньки її створювати, ScriptPNG візьме на себе всю важку роботу.
Не всі анімації створені рівними.
Команда SublimeText запустила вебсайт, де вони хотіли широко використовувати анімацію для показу особливостей їх редактора. Замість використання відео або стандартного GIF, вони створили власну систему анімації і стиснення, щоб отримувати прекрасну анімацію при набагато менших розмірах файлів. Цей метод дозволяє їм відображати високоякісну анімацію на різних платформах без необхідності використовувати складне відео або flash плагін.
Існує більше одного шляху до чуйним зображень.
Оскільки сприйняття користувача – це найважливіший елемент сайту, варто сказати, що існують інші способи створити сайти, які «сприймаються» як швидкі. Нещодавно BBC змінили підхід до обробки чуйних зображень. Їх метод дозволяє клієнту завантажити спочатку маленьке зображення (щоб створити видимість картинки), а потім отримувати зображення у високому дозволі з допомогою ледачою завантаження при необхідності. Ви можете знайти більш детальний опис цього способу, а також версію з відкритим кодом, щоб спробувати її на вашому сайті.
Висновок
Зображення – це хитрий тип вмісту, який може поліпшити якість і сприйняття користувачами вашого сайту, але також може підірвати ваші зусилля по його швидкої завантаженні і чуйності. Перед тим, як ви викладіть ваш сайт в мережу, переконайтеся, що він відповідає контрольному списку за стиску зображень
- Налаштуйте рівень стиснення зображень вручну, де це можливо
- Автоматизуйте стиснення інших, щоб досягти найвищої продуктивності
Корисні інструменти
- ImageAlpha
- ImageOptim
- advPNG
- ImageAlpha w/ Canvas Library Helper
- Interactive tool for testing progressive images
Переклад статті «Image Compression for Web Developers» був підготовлений дружною командою проекту Сайтостроение від А до Я.
