Ви вже чули про формат WEBP? Якщо тема оптимізації сайтів вас хоч трохи цікавить, а вона повинна ? цікавити більшість власників сайтів, то ви бачили під час тестування свого сайту таким інструментом як PageSpeed Insights, що для кращих показників необхідно використовувати сучасні формати зображень, замість звичайних jpg, png та подібних.
В розумінні вказаного тесту, сучасні формати зображень – це зокрема WebP та AVIF. Перший підтримується більшістю сучасних браузерів :
В цій статті ми покажемо швидкий та дієвий метод, як задовольнити вимоги тесту від Google та прискорити завантаження медіа файлів вашого сайту за рахунок їх оптимізації та конвертації у формат WebP силами плагіну WEBP Express:
В першу чергу плагін WebP Express безкоштовний, і тут мова ще й про сам функціонал конвертації. На відміну від багатьох інших плагінів він не використовує сторонні платні сервіси для оптимізації та конвертації ваших зображень у новий формат, йому достатньо “вбудованих” на хостингу модулів для роботи із зображеннями, такими як GD, Imagic, cWebp та подібними. В залежності від того, що є на вашому хостингу – ви обираєте в налаштуваннях плагіну бажаний модуль.
Встановити плагін на свій WordPress сайт можна звичайним способом, як і будь-які інші плагіни, докладніше можна побачити тут.
У плагіна є своя сторінка налаштувань, яку ви можете відкрити в адмінці вордпрес в меню “Налаштування – WebP Express“. Для початку необхідно обрати один з двох основних методів роботи плагіну – Varied image responses або CDN friendly.
На нашу думку, найбільш вдалим рішенням є режим CDN friendly. По перше, даний режим сумісний з плагінами кешування, що дозволяє використовувати інструменти оптимізації на всі 100% . По друге, даний режим не намагається “обдурити” відвідувача чи його браузер, віддаючи webp файл, хоча в коді сайту прописано посилання на jpeg, наприклад.
Будемо вважати, що ми обрали описаний вище метод роботи. Наступні налаштування, які нас цікавлять виглядають так:
Перша опція відповідає за те, які саме зображення будуть оптимізуватись. На нашому скріншоті обрано “завантаження та теми”, тобто будемо працювати з усіма зображеннями, які завантажуються в статті та сторінки сайту, а також із зображеннями, що використовує наш активний шаблон WordPress.
Друга опція вказує на те, які типи медіафайлів необхідно оптимізувати.
Третя опція дає можливість обрати, де будуть зберігатися оптимізовані зображення. Якщо ви вже працюєте з плагіном і зміните цю опцію – ваші webp картинки буде переміщено. Рекомендуємо залишити як на скріншоті, тобто в окремій директорії.
Четверта опція дозволяє обрати, як будуть називатись конвертовані файли. Якщо оригінальна картинка називалась image.png, то за замовчуванням її оптимізована версія буде image.png.webp. Якщо попередня опція обрана Mingled (тобто в тій самій папці, де завантаження), то буде доступний для вибору варіант, щоб файл називався image.webp, тобто розширення не дописувалось, а замінялось. Але це може стати проблемою, якщо у вас в одній директорії є, наприклад, image.jpg та image.png. Тож залиште, як на скріншоті.
П’ята опція так само впливає на фінальне розміщення оптимізованих файлів. Якщо навести мишкою на знак питання біля неї, ви отримаєте більш докладний опис варіантів. Як і в опціях вище – ми рекомендуємо залишити так, як вказано на скріншоті.
Шоста опція дозволяє додавати заголовок Cache-control, що може покращити “результат” тесту від гугл. Дізнайтесь у свого провайдера, чи не додається цей заголовок до зображень “з коробки”, або поексперементуйте з цією опцією самостійно.
Сьома, остання опція, дозволяє заборонити створення зображення webp, якщо воно більше за оригінал, тобто оптимізація не вдалася.
Встановіть пташку, аби під час звернення до “неоптимізованого” зображення в фоні створювалась його оптимізована версія. Зручна та корисна опція, може не працювати на деяких серверах, але не є проблемою – оскільки ви можете іншим способом оптимізувати картинки, що вже є на сайті.
Даний розділ налаштувань дає можливість вказати, як та чим будуть оброблятися зображення. У вас є можливість вказати, на скільки можна зменшувати якість оригіналу, або напишіть 100, аби стискати без втрати якості. В більшості випадків, конвертація у WebP робить зображення меншими за розміром (в сенсі мегабайтів і т.п.), але якість залишається та сама. Але для багатьох сайтів може підійти варіант, коли невеличка втрата якості не помітна відвідувачам, але дає значний виграш в розмірах файлів.
В режимі “Авто” плагін конвертує із втратою якості та без, а залишає той файл, який буде найменшим за розміром. За посиланням ви можете побачити приклади різних “оптимізацій” і зробити власні висновки.
Щодо модуля, яким буде безпосередньо проводитись конвертація, наші спостереження показали, що найкращі результати дає модуль GD, поставте його на першу позицію.
На одному з наших проектів налаштування зроблені таким чином:
Обов’язково встановіть пташку навпроти “Convert on upload“, що дозволить автоматично оптимізувати усі зображення, які в майбутньому будуть завантажуватись до ваших публікацій та сторінок.
В блоці налаштувань Alter HTML ви можете обрати, яким чином будуть “підмінятися” неоптимізовані jpg та png на оптимізовані webp. Як ми написали вище, коли розглядали основні режими роботи плагіна, аби не вводити в оману браузер та відвідувача, оберіть перший варіант (скріншот нижче), що дозволить використати сучасний підхід для того, аби браузер самостійно вирішив, яке зображення він може відобразити. Якщо користувач зайшов на сайт через сучасний браузер, він використає оптимізоване зображення webp, інакше буде показано оригінальне jpg чи png. Встановіть опцію “Reference webps that haven’t been converted yet”, аби автоматично генерувалися webp для тих зображень, для яких їх ще немає.
В розділі налаштувань конвертації є кнопка “Bulk convert”, що дозволяє оптимізувати усі файли на сайті. Зауважте, якщо у вас зображень дуже багато, цей варіант може бути не найкращим.
Якщо у вас залишились питання – ми раді вашим коментарям!
