WebP формат: як почати користуватися

WebP SEO

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

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

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

Експерименти з використанням формату WebP веду вже кілька місяців. У минулій статті навела результати своїх досліджень, конкретними прикладами довела доцільність перейти на сучасний формат стиснення.

Йдеться передусім про web простір, де розмір файлу і швидкість передачі стоять першому місці. А формат, спеціально розроблений Google в 2010 році, дозволяє зберегти при цьому якість без видимих змін.

Якщо стиск JPEG добре справляється з плавними переходами кольорів, то з точними межами (кресленнями, тексти) краще підходить алгоритм PNG. Для анімацій (послідовне відображення кадрів) частіше використовується GIF, але глибина кольору обмежена лише 8 бітами, що призвело до необхідності введення Animated PNG з підтримкою 24-бітніх зображень.

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

Треба сказати, що компанії Google це вдалося. Тепер ви можете полегшити свій інтернет-проект до 50%. А це має перевагу як для вас, так і для користувачів:

  • зменшення навантаження на сервер;
  • збільшення швидкості завантаження сторінки;
  • економія місця на орендуємому сервері;
  • зменшення мобільного трафіку для користувачів смартфонів.

Багато великих компаній, таких як Google, eBay, Facebook, Amazon активно використовують його для економії трафіку.

Під час перевірки швидкості завантаження сайту PageSpeed Insights також пропонує перейти до сучасних форматів.

Зауваження від PageSpeed

Що таке WebP

WebP (Web Picture) – формат стиснення зображень, створений на основі відеокодека VP8, підтримує стиск із втратами та без, повнокольорову анімацію та прозорість (8-бітний альфа-канал). Підходить як для фотографій, так і графічних картинок.

Сжатие графического изображение - JPEGСжатие грфики с помощью WebP

Відмінний результат при передачі кольору та чітких ліній, градієнтів, тіней.

Тепер давайте подивимося на фото: досить добре збережена текстура при заощадженні 34% ваги картинки.

ПегасПегас Коринф

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

За ступенем стиску в більшості випадків перевершує попередників JPEG, PNG, GIF і розроблений для їх заміни. AVIF та JPEG XL розроблені на основі відеоформату AV1 для заміни WebP. AVIF вже підтримує 69% браузерів, а функціональніший JPEG XL знаходиться в стадії тестування.

WebP підтримка браузерами

10 років знадобилося WebP доводити свою перевагу і зараз майже всі сучасні браузери впровадили новий формат, а це за даними caniuse більше 95%.

WebP підтримка браузерами
Грудень 2021 року

Microsoft Internet Explorer не має підтримки WebP і ніколи не матиме її, оскільки більше не оновлюється і немає сенсу на нього орієнтуватися.

WebP підтримка CMS та конструкторами сайтів

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

Tilda

Микита Обухів, автор популярного конструктора, 2 вересня 2020 року оголосив про впровадження в Тільду підтримки формату WebP. Причому скрипт сам визначає ширину контейнера для сайту, розміри для популярних пристроїв і браузерів і попередньо готує потрібні картинки в новому форматі.

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

WordPress

WordPress додав підтримку WebP 20 липня 2021, запустивши версію 5.8. Тепер ви можете завантажувати та користуватися новим форматом так само як JPEG та PNG.

Однак не всі плагіни ще підключилися. Наприклад, я використовую лише WebP формат на своєму сайті, але Rank Math, який визначає мініатюри для соцмереж його не розуміє. Доводиться додатково створювати JPEG копію для Facebook та Twitter. Це не проблема, оскільки пропорції цього зображення відрізняються від мініатюри статті та краще завантажувати дві картинки.

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

Я не рекомендуватиму конкретні плагіни, оскільки ще не тестувала їх. Роблю все самостійно у Photoshop і практично не використовую старі формати. Мене більше цікавить впровадження нових технологій.

Так, WordPress стежить за розвитком більш прогресивних форматів AVIF, JPEG XL. Сподіваюся, що незабаром ми зможемо оптимізувати наші проекти ще більш ефективно.

Joomla

17 серпня 2021 вийшла нова версія Joomla 4 з вбудованою підтримкою WebP. Цілих 9 років компанія працювала над удосконаленням CMS, зробивши її зручнішою, функціональнішою та безпечнішою.

Wix

Wix також дозволяє завантажувати фото та фонові малюнки в WebP, правда ще не підтримує анімації та перетворює їх на статичні зображення. Зображення, завантажені в інших форматах, автоматично конвертуються у WebP. Причому Wix зробив це раніше за WordPress, Joomla, Drupal.

Drupal

Drupal 16 червня 2021 також додав підтримку WebP з коробки у версії 9.2.0. Процес конвертації в рамках цієї CMS дивіться на відео.

Чим відкрити файл WebP

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

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

За допомогою браузера

Користувачам Microsoft Windows допоможуть підтримувані браузери – достатньо змінити налаштування файлу. Натисніть праву кнопку мишки та виберіть опцію Відкрити за допомогою / Google Chrome (або Firefox).

Відкрити файл WebP за допомогою Google Chrome

Наступного разу WebP зображення будуть відкриватися автоматично.

GIMP

Безкоштовний графічний редактор, що вільно розповсюджується. Підходить для ретушування, редагування, створення логотипів. Доступний для Windows, Linux, MacOS. Звичайно, він поступається професійній програмі Photoshop, але його функцій буде достатньо для більшості звичайних користувачів.

Збереження файлу в WebP відбувається через команду Експортувати.

Додаток Перегляд

Більше 10 років компанії Apple знадобилося для підтримки WebP. Користувачі macOS можуть відкрити та редагувати зображення за допомогою програми «Перегляд». Раніше була потрібна установка додаткової утиліти WebpQuickLook.

Як додати до Photoshop

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

Плагін WebP Format

Процес простий. Завантажте плагін та скопіюйте файл WebPFormat.8bi у папку Plug-Ins:

c:/Program Files/Adobe/Adobe Photoshop(ваша версия)/Plug-Ins/

Для Photoshop CC 2017 копіювати потрібно до папки File Formats:

c:/Program Files/Adobe/Adobe Photoshop CC 2017/Required/Plug-Ins/File Formats/

Якщо встановлені обидві версії Photoshop (32 і 64 bit), потрібно в кожну скопіювати відповідний файл.

Завантажте Photoshop та користуйтеся. Тепер ви можете відкрити WebP файл, так і конвертувати з іншого формату, використовуючи функцію Зберегти як / WebP.

WebP формат у Photoshop

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

Плагін WebPShop від Google

На сайті підтримки від Adobe розміщено зовнішній модуль WebPShop, який також дозволяє працювати з WebP.

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

Цей модуль встановлюється у спільну папку та працює для всіх встановлених версій Photoshop. Отже, файл WebPShop_0_3_3_Win_x64.8bi потрібно розмістити у папку:

c:/Program Files/Common Files/Adobe/Plug-Ins/CC/File Formats/

Відкрийте Photoshop, тепер можна як відкривати файли WebP, так і конвертувати картинки з допомогою функції Зберегти як / WebPShop.

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

WebPShop Модуль

Конвертер Ezgif

Для тих, хто воліє повернутися у звичні формати, можу порекомендувати відмінний конвертер Ezgif. Він перетворює WebP файл на JPEG, PNG, GIF і навпаки. Сервіс має багато додаткових функцій:

  • зміна розміру;
  • кадрування;
  • корекція кольору;
  • додавання тексту;
  • регулювання ступеня стиснення;
  • попередній перегляд;
  • робота з анімацією.

Мінуси

Явні переваги формату призвели до його широкого впровадження. Все-таки це велике досягнення переконати весь світ перейти зі звичних JPEG та PNG на новий рівень стиснення.

Тепер поговоримо про недоліки.

  1. Не всі програми та програми підтримують WebP.
  2. Не підходить для піксельної графіки, оскільки стиснення призведе до втрати кольору.
  3. Стиснення з втратами не підтримує модель RGB (3 кольори), а кодує зображення YUV (яскравість + 2 кольори).
  4. При сильному стисненні краї зберігаються чіткими, тоді як текстура втрачається: обличчя стають пластиліновими на відміну клітинного ефекту JPEG. Обидва варіанти не ідеальні та який краще важко сказати. До пікселів ми вже звикли і сприймаємо їх природніше.
Портрет в сильном сжатии JPEGПортрет в сильном сжатии WebP
Сильне стиснення фото в JPEG та WebP

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

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

НЕ УПУСТИ

Иконка ТОП

Будь первым, кто узнает о новых обзорах и акциях на SiteFromZero

Мы не спамим! Прочтите нашу политику конфиденциальности, чтобы узнать больше.

Светлана Стецко Рекомендую подписаться
close
Новостная рассылка

ПОДПИСКА НА БЛОГ

Получайте уведомления о новых публикациях SiteFromZero.info на свою почту

Никакого спама! Прочтите нашу политику конфиденциальности, чтобы узнать больше.

Поділитися з друзями
Svitlana Stetsko

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

Оцініть автора
( 2 оцінки, середнє 5 з 5 )
SiteFromZero
А вы пользуетесь WebP форматом, какие впечатления

Натискаючи на кнопку "Надіслати коментар", я даю згоду на обробку персональних даних і приймаю політику конфіденційності.