ЩО ТАКЕ ФОРМАТ ЗОБРАЖЕННЯ WEBP

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

Про що йде мова?

• Що таке WebP?
• Переваги і недоліки формату зображення WebP
• Як перетворити файл WebP у JPEG або PNG?
• Висновки

Що таке WebP?

Формат зображень WebP розроблений Google у 2010 році. Концепцію придумала придбана корпорацією компанія On2 Technologies. Новий тип файлів став альтернативою PNG і JPG, оскільки підтримує прозорість і анімацію та робить можливим зменшення розміру стиснених зображень без втрати їх якості. Зображення WebP із втратами в середньому на 30% менші за JPG, а зображення WebP без втрат в середньому на 25% менші за PNG. Методи стиснення WebP із втратами добре підходять для популярних анімованих зображень, створених із відеофайлів.

Суть технології WebP полягає у тому, що зображення зберігаються у форматі контейнера, заснованому на форматі файлу обміну ресурсами (RIFF). Контейнери RIFF дуже легкі, їхній розмір становить лише 20 байт, при цьому зберігається можливість додавати більше метаданих. Контейнер RIFF може підтримувати зображення з довжиною сторони до 16 383 пікселів.

Файли WebP можна розпізнати за розширенням .webp. Це технологія з відкритим вихідним кодом, а отже, будь-хто може внести зміни у нього. Зменшення розміру зображень без втрати якості здійснюється шляхом предиктивного кодування. Максимальний розмір зображення у форматі WebP сягає 16 383 × 16 383 пікселів.

У 2022 році WebP займав 97% ринку серед веб-браузерів, таких як Google Chrome, Safari, Firefox, Edge та Opera. Зображення WebP підтримують різноманітні CMS та значна частина графічних редакторів.

Переваги і недоліки формату зображення WebP

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

• Прозорість

На відміну від JPG, WebP-зображення підтримують альфа-прозорість. Для PNG ця можливість також доступна. Прозорість є важливою перевагою при розробці веб-сайтів. Вона дозволяє створювати нерівні межі фігури і видимий фон поза нею, глибину і контраст за допомогою різних елементів сторінки та інші візуальні ефекти, необхідні для сучасного веб-дизайну.

• Анімація

Анімовані файли WebP мають менший розмір, ніж GIF або APNG, а формат JPG взагалі не підтримує анімацію.

• Метадані

За допомогою них зображенням можна надати цифрового контексту, зокрема, вказати дані про час і місцезнаходження для фото з цифрової камери. В цілях оптимізації сторінки і нарощування органічного трафіку важливо присвоювати зображенням метатеги title і description. WebP підтримує додавання метаданих до зображень за допомогою XMP і EXIF.

• Профіль кольору

За допомогою Adobe Photoshop чи іншої програми для редагування зображень у WebP-файл можна вбудувати профіль ICC для керування кольором.

• Стиснення з втратами та без втрат

У першому випадку дані втрачаються при розпакуванні файлу, у другому — втрати мінімальні або відсутні. Перевага стиснення з втратами полягає у значно меншому розмірі файлу. Це ключова перевага формату WebP, оскільки використання таких зображень може суттєво пришвидшити роботу сайту.
Стиснення без втрат — це новіший алгоритм, який розробив Юркі Алакуйяла, інженер Google. Він включає традиційні методи (індексовані кольори, кодування Хаффмана та кодування за словником і просунуті методи (спеціальні ентропійні коди для кожного колірного каналу та кеш останніх кольорів).

• Економія пропускної здатності

Цей формат дозволяє веб-ресурсам пропонувати більш багатий мультимедійний досвід. З WebP немає необхідності жертвувати якістю зображення заради швидшого завантаження.

• Покращена пошукова оптимізація (SEO)

В рамках рекомендацій Core Web Vitals від Google рекомендується використовувати сучасні формати зображень, такі як WebP.

• Покращення продуктивності веб-сайту

Формат WebP легший за JPEG і PNG, тому сторінка із зображеннями WebP завантажується швидше, що вкрай важливо для користувачів.

Таким чином, використання на сайті WebP-зображень покращує клієнтський досвід, зменшує показник відмов і збільшує конверсію. Згідно з дослідженнями, при збільшенні часу завантаження на 10 секунд збільшення показника відмов сягає 123%. Конверсія падає на 0,3% на кожну секунду додаткового часу завантаження, що дуже важливо для e-comerce.

Швидке завантаження сайту також сприяє ефективній пошуковій оптимізації (SEO). З 2021 року швидкість сайту є одним із факторів, котрі враховуються пошуковою системою Google і впливає на рейтинг веб-ресурсу.

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

Для аналізу факторів, що впливають на швидкість сайту, можна використовувати онлайн-інструмент PageSpeed Insights. Сервіс визначає правильний розмір зображень, їх ефективне кодування та використання оптимальних форматів.

Недоліки WebP

• У деяких випадках стиснення за допомогою WebP може дещо погіршити якість зображення. Це важливо при роботі з зображеннями високої роздільної здатності, які повинні відображатися з високою точністю.
• Формат WebP був створений передусім для перегляду файлів в інтернеті, багато графічних редакторів не підтримують WebP, тому можуть виникати певні труднощі в роботі з зображеннями у автономному режимі.
• Також формат підтримують не всі конструктори сайтів. Однак найпопулярніші платформи, наприклад, WordPress Joomla, Drupal дозволяють використовувати WebP.
• Не підходить для піксельної графіки, тому що стиснення призводить до втрати кольору. Окрім цього, стиснення з втратами не підтримує модель RGB і кодує зображення YUV.
• При сильному стисненні краї об’єктів на зображенні зберігаються чіткими, але втрачається текстура.

Згідно з даними Сaniuse, 96,3% браузерів наразі підтримують WebP. Виняток — деякі старіші браузери, Internet Explorer 11 та KaiOS, які потребують спеціальних розширень для роботи з новим форматом.

За умови правильного налаштування зображень на сайті вони будуть відкриватися коректно у будь-якому браузері — або в оригіналі, або ж у форматі за замовчуванням, наприклад, PNG або JPEG. Для цього існують відповідні рішення для інтеграції з WebP.

Як перетворити файл WebP у JPEG або PNG?

Щоб використовувати зображення WebP на своєму веб-сайті, вам потрібна CMS, яка підтримує WebP. Конвертувати зображення можна як безпосередньо у CMS, так і на комп’ютері.

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

Вбудований в Windows редактор може відкривати зображення WEBp і перетворювати їх у формат JPEG або PNG.

1. Запустіть MS Paint, виберіть в меню «Файл» і «Відкрити».
2. Знайдіть на ПК файл потрібний файл WEBp і натисніть кнопку «Відкрити».
3. Після завантаження оберіть вкладку «Файл» і наведіть курсор миші на пункт «Зберегти як».
4. У бічному меню виберіть «Зображення JPEG» або «Зображення PNG», назвіть і збережіть файл.

Якщо ви користуєтеся ПК Mac чи макбуком і хочете обробити файл WEBp, достатньо завантажити картинку і відкрити її у стандартному переглядачі macOS (Preview). У верхньому меню оберіть «Файл» і «Експортувати», далі у вікні експорту зазначте формат JPEG чи PNG, якість, місце збереження та назву файлу. Після цього можна працювати з даним зображенням.

Відкрити, створити новий чи редагувати наявний файл дозволяють різні графічні програми, зокрема Adobe Photoshop, Google Photos, Blender і ін. На сайті підтримки від Adobe розміщено зовнішній модуль для Photoshop під назвою WebPShop, який дозволяє працювати з WebP та використовувати функцію попереднього перегляду.

Змінити формат зображення можна за допомогою онлайн-конвертера, наприклад, Squoosh, Online-Convert.com або TinyIMG.

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

Конвертацію зображень у WebP можна виконати через інструменти командного рядка. Формати JPEG, PNG і TIFF перетворюють у WebP за допомогою утиліти cwebp і декодують за допомогою dwebp.

Також ви можете додати розширення для оновленої версії браузера Chrome, яке конвертує зображення у формат JPG або PNG під назвою «Save image as Type».

Завершивши встановлення розширення, потрібно закрити і знову відкрити Chrome. Після цього відкрийте веб-сторінку, яка містить потрібне зображення, натисніть на зображення правою кнопкою миші та виберіть «Зберегти зображення як тип» > «Зберегти як X» (де X — це JPG, PNG або WebP).

Відкрити файл WebP можна у менш функціональному за Photoshop, але безкоштовному графічному редакторі GIMP. Він доступний для Windows, Linux, MacOS.

Висновки

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

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

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

Використовуючи графічні редактори, онлайн-сервіси чи CMS, що підтримує цей сучасний формат, ви можете перетворювати файли JPEG чи PNG на WebP і навпаки. Також конвертацію в WebP можна виконувати через модулі в CMS, що зручно робити в процесі наповнення сайту контентом.

Стиснення з втратами та без них, прозорість, анімація невеликого розміру, підтримка метаданих і можливість інтегрувати профіль ICC для керування кольором — основні переваги формату, якому все частіше надають перевагу маркетологи, веб-дизайнери та контент-менеджери. Адже завдяки особливостям WebP не потрібно економити на кількості та якості зображень, що дає змогу наповнювати сайт привабливим для користувачів контентом.