Зображення є найпопулярнішим видом медіа на кожному сайті і найчастіше вони займають значну частку ресурсів. Користувачі цінують високоякісні фото та в хорошому дозволі, за умови, що вони швидко провантажуються. Завжди існувала потреба у форматах графіки, які за мінімальної ваги файлу забезпечували максимальну якість для відвідувачів. Зі зростанням глобального інтернет трафіку зараз така проблема більш ніж актуальна. У цій статті ми розповімо, як сучасний формат зображень WEBP може підвищити стиснення графіки до 50% та забезпечити кращу якість.
Необхідність у нових форматах
Протягом останніх 25 років JPEG був найбільш широко підтримуваним форматом для інтернет графіки. JPEG є форматом стиснення із втратами. Хоча швидкість декодування файлів JPEG є відмінною, їй не вистачає інших функцій, необхідних для зображень на сучасних веб-сайтах. JPEG не підтримує прозорість зображень, анімації, карти глибини кольору або можливість накладання шарів. JPEG найкраще працює із фотографіями. PNG є форматом без втрат і може підтримувати альфа-прозорість, але досягнуте стиснення, особливо для фотографій, значно нижче. JPEG та PNG широко використовуються в залежності від типу потрібного зображення.
Таким чином, метою сучасних форматів зображень є подолання обмежень JPEG та PNG, пропонуючи найкраще стиснення та гнучкість для підтримки інших сучасних функцій. Зважаючи на таку необхідність і виникли формати WEBP та AVIF, які зараз активно впроваджуються на різних сайтах.
Формат зображень WEBP
Формат WEBP був створений Google у 2011 році як формат зображень, який допоможе зробити Інтернет швидше. За минулі роки він набув широкого поширення через його здатність стискати зображення до файлів меншого розміру порівняно з JPEG та PNG. WEBP пропонує стиснення без втрат і з втратами з прийнятною візуальною якістю та підтримує прозорість та анімацію альфа-каналу.
Ступінь стиску WEBP
Зображення WEBP без втрат зазвичай на 30% менше, ніж PNG, а зображення WEBP із втратами на 40% менше, ніж зображення JPEG аналогічної якості. Підтримка анімації також робить їх чудовою заміною зображень у форматі GIF.
Для порівняння нижче представлені два фото у різних форматах: ліворуч стандартний JPG, праворуч новий формат WEBP.
Формат JPG (91 КБ)
Формат WEBP (45 КБ)
Формат JPG (112 КБ)
Формат WEBP (53 КБ)
Крім хорошого стиснення, WEBP має інші незаперечні переваги, такі як:
Прозорість
WEBP має 8-бітний канал прозорості без втрат, у якому лише на 22% більше байтів, ніж у PNG. Він також підтримує прозорість RGB із втратами, що є унікальною функцією WEBP.
Додаткові метадані
Формат файлу WEBP підтримує метадані фотографій EXIF та метадані цифрових документів Extensible Metadata Platform (XMP). Він також може містити колірний профіль ICC.
Анімація
Формат WEBP підтримує повнокольорові анімовані зображення.
Підтримка WEBP браузерами
За останні пару років різні інтернет-браузери та програми стали підтримувати WEBP і розробили безліч інструментів для створення, перегляду та завантаження файлів WEBP. Сьогодні WEBP підтримується в останніх версіях майже всіх основних браузерів.
Якщо розробники захочуть використовувати WEBP на своїх сайтах, вони можуть це зробити за допомогою елемента
<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.WEBP" type="image/WEBP">
<img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>CDN також підтримують адаптивні зображення з автоматичним вибором формату для зображень WEBP або AVIF залежно від підтримки браузера. Плагіни WEBP доступні для інших популярних CMS, таких як WordPress, Joomla, Drupal та ін. Початкова підтримка WEBP також доступна у самому ядрі WordPress, починаючи з версії 5.8.
Як конвертувати WEBP в JPG і назад
Часто виникає потреба конвертувати WEBP формат у JPG або PNG. Покладаючись на наш досвід, можемо рекомендувати вам кілька відмінних сервісів.
- www.squoosh.app — шикарний сервіс від компанії Google, який дозволяє проводити взаємне конвертування найпопулярніших форматів. Ви можете простим переміщенням повзунка порівняти онлайн якість завантажуваного та одержуваного фото.
- www.convertio.co - російськомовний сервіс, що пропонує на вибір відвідувача понад 300 різних графічних форматів. Сервіс знаходиться в топ 1000 найвідвідуваніших сайтів світу. Для конвертації ви можете завантажити файл, вибрати потрібний формат і завантажити вже перетворений.
Недоліки формату WEBP
Спочатку істотним недоліком WEBP була відсутність підтримки браузера і належного інструментарію. При розгляді всіх функцій, які в ідеалі має підтримувати сучасний формат, як і раніше, є кілька суттєвих зауважень.
- WEBP обмежений 8-бітною точністю кольору. В результаті він не може підтримувати зображення HDR/з широкою гамою кольорів.
- WEBP не підтримує зображення із втратами кольору. Це може вплинути на зображення із дрібними деталями, хроматичними текстурами або кольоровим текстом.
- Формат не підтримує прогресивне декодування. В ідеалі ви можете створювати файли WEBP із доступних вихідних файлів найвищої якості. Перетворення неякісних файлів JPEG на файли WEBP не дуже ефективно, оскільки стискається двічі.
Підсумки
Узагальнюючи всю інформацію про три формати JPEG, PNG та WEBP, а також порівнюючи та кількісно оцінюючи сильні та слабкі сторони, як представлено у попередньому розділі, ми склали таку таблицю.
Ступінь стиснення фотографічних та нефотографічних зображень може також відрізнятися залежно від точності (якості) зображень. Тут ми зазначили загальний бал. Загалом формат WEBP краще підтримує та пропонує краще стиснення порівняно з JPEG або PNG. Таким чином, застосовувати новий формат на сайті можна, але з обережністю, тому що він підтримується далеко не всіма браузерами.
