Привет! В этом материале мы расскажем об одном из самых простых способов начать использовать современный формат изображений WebP для сайтов на CMS WordPress.
Особенно актуально для тех, кто столкнулся с ошибкой “Используйте современные форматы изображений” в Google PageSpeed Insights.
Способ достаточно простой, и поставленную задачу будем решать с помощью плагина WebP Express, который можно скачать совершенно бесплатно из официального репозитория WordPress.
После установки плагина переходим к его настройке. Плагин на английском языке, но пусть это вас не смущает. Ниже мы расскажем, какие настройки нужно применить.
Как конвертировать изображения с помощью WebP Express
Хостинг, который мы использовали в разработке сайта, использует NGINX. Раздел General у нас выглядит следующим образом.
.htaccess rules можно оставить без изменений по умолчанию.
На разделе Conversion можно остановиться более подробно. Здесь вы можете настроить, каким методом конвертировать изображения в webP, выбрать процент сжатия, а также поставить галочку у пункта Convert on upload, что позволит автоматически конвертировать изображения при их загрузке в библиотеку WordPress.
Блок After HTML у нас выглядит так. На самом деле, можете просто скопировать наши настройки.
Теперь можем смело нажать на синюю кнопку Save settings. Затем скроллим до раздела Conversion и нажимаем Bulk Convert, чтобы оптимизировать и перевести в WebP ранее загруженные изображения.
Готово! Теперь остается немного подождать. Скорость преобразования изображений в WebP-формат зависит от их количества на вашем сервере. Иногда процесс занимает и 5 минут, иногда несколько часов.
Переходим на страницы вашего сайта и фиксируем изменения через консоль. Если вы видите, что в пути к вашим изображениям появился webP — вы все сделали правильно!
В PageSpeed Insights проблема также исчезнет. Поздравляю, вы на верном пути в SEO продвижении вашего сайта.
Если у вас остались какие-либо вопросы, вы можете задавать их в комментариях. И не забывайте заглядывать в наш Блог, у нас часто выходит полезный контент по разработке сайтов и их продвижению! 🙂
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.
Привет! Интересно читать нас? Уделите пару минут своего времени, узнайте больше о нашей команде!
У WebP есть такой нюанс — не все браузеры его поддерживают.
К примеру, некоторые версии iOS Safari, обычный Safari, IE — не поддерживают WebP.
https://caniuse.com/#feat=webp
Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти
И отдавать нужную версию в зависимости от браузера.
А исходную картинку надо при этом еще и оптимизировать/сжимать — чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) — это еще третья! версия файла.
У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку.
https://optipic.io/ru/webp/wordpress/
Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp.
Получается совсем все просто и красиво, да и недорого))