Используем формат изображений WebP в WordPress

Здравствуйте, друзья! И снова пост касается оптимизации изображений - как использовать на сайте WordPress картинки/изображения в формате WebP?  Для изображений формата WebP используется более эффективное сжатие. И поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG. Как загрузить webp в wordpress? Ни как. Загружать изображения формата WebP в WordPress  нельзя. Данный формат просто не поддерживается движком.

Хотя WordPress поддерживает самые популярные форматы графических файлов, в том числе JPEG, PNG, GIF и ICO. WebP в этот список ещё не добавлен. А что делать? Выход есть. Вам просто нужно использовать плагин.

С помощью плагина можно автоматически конвертировать все картинки на сайте ВордПресс в современный формат WebP. Таким образом, мы обеспечим автогенерацию изображения формата WebP, вместо PNG / JPEG, для браузеров поддерживающих WebP.  А которые не поддерживают WebP мы отправим изображения в формате jpeg и png. Хотя на сегодняшний день формат WebP поддерживается большинством современных браузеров.

Google активно продвигает WebP и будет продолжать это делать. Хорошим решением будет наличие нескольких форматов изображений и выдача нужного типа изображения по ответу браузера — поддерживает WebP или нет.

Да, это приведёт к увеличению количества файлов и заполнения дискового пространства, но даст определенные преимущества перед теми, кто не пользуется новыми форматами.

Будет лучший рейтинг в поиске Google (эффективность учитывается поисковиком Google). Положительное влияние наличия формата WebP на сайте на поисковую выдачу уже замечено.

Хорошая новость! На сегодняшний день, все самые популярные браузеры поддерживают формат WebP — Opera, Chrome, Edge, Safari и Firefox.

Изображения WebP в WordPress

Конвертировать изображения в формат WebP - лучшая альтернатива JPEG и PNG. Формат WebP предлагает превосходное качество картинки и уменьшает размер файла для ускорения загрузки сайта на WP.  Для сайта Вордпресс есть WebP плагин рекомендуемый Google PageSpeed Insights.

Для начала делаем анализ сайта с помощью инструмента PageSpeed Insights. Смотрим отчёт.  Видим такую рекомендацию в разделе Оптимизация:  Используйте современные форматы изображений. Открываем вкладку и видим решение для сайта WordPress - чтобы загружаемые изображения автоматически конвертировались в формат WebP, надо использовать специальный плагин или сервис.

Google обновил инструмент PageSpeed Insights и стало намного проще узнать с помощью каких модулей можно решить ту или иную проблему. Нажимаем ссылку Плагин:

Откроется страница плагинов с меткой convert webp. Переходим в каталог плагинов поддерживающих русский язык. Видим:

Здесь, нас интересует только плагин WebP Express, он на первом месте. О модуле Opti MozJpeg Guetzli WebP рассказывал сам автор плагина у меня в блоге - тут. Перейдём непосредственно к WebP Express.

WordPress плагин WebP Express

WebP Express обеспечивает авто-генерацию изображения формата WebP вместо jpeg/png для браузеров поддерживающих WebP. Работает со всеми картинками (изображения медиабиблиотеки, гарелереи, изображения темы и так далее):

С помощью бесплатного плагина WebP Express вы можете автоматически создавать сгенерированные изображения WebP в браузерах, которые поддерживают WebP и в то же время предоставлять файлы JPEG / PNG пользователям Safari.

Почти 4 из 5 мобильных пользователей используют браузер, который способен отображать изображения webp. Тем не менее, на большинстве веб-сайтов, они обслуживаются jpeg изображений, которые, как правило, вдвое больше размера изображений webp для данного качества. Какая трата пропускной способности! Этот плагин был создан, чтобы помочь исправить эту ситуацию.

Очень легко, администраторы WordPress могут размещать на своих сайтах автоматически генерируемые изображения WebP в браузерах, которые поддерживают его. И в то же время, обслуживая файлы jpeg и png в браузерах, которые не поддерживают формат WebP. Plugin использует библиотеку WebP Convert для преобразования изображений в WebP на сайте ВордПресс.

WebP Express настройка

Как использовать WebP Express? Да очень просто. Первым делом нужно установить и активировать plagin стандартным способом, из админки. Главное в WebP Express - это правильно настроить его. После активации плагина в админ панели Настройки - пункт WebP Express. Очень странно, указано что, переведён на русский, но родного ни строчки, сплошной английский. Не беда, браузер переведёт. Большинству сайтов подойдут рекомендуемые настройки, как на скриншотах:

Далее, настройки в разделе Conversion:

И последнее по настройкам. Отметьте галочками, как показано на снимке. Первый вариант:  галочки в Replace <img> tags with <picture> tags, adding the webp to srcset и Dynamically load picturefill.js on older browsers работает с кэшированием WordPress. Отлично работает с кэшированием страниц, потому что все браузеры обслуживают один и тот же HTML:

Второй вариант: не работает с кэшированием страниц если вы не используете плагин Cache Enabler , который может поддерживать две кэшированные версии каждой страницы:

Правила перезаписи будут активированы при первом нажатии волшебной кнопки "Сохранить настройки" (Save settings). Все правила перенаправления будут сохранены в вашем файле .htaccess.

Как проверить поддержку WebP в браузере?

Следующий шаг после настроек данного плагина - это проверка его работы в различных браузерах. Открываете сайт в браузере, по картинке кликаете правой кнопкой мыши и выбираете "Просмотреть код":

В Microsoft Edge пока не поддерживается формат WebP и поэтом картинку выдаёт в обычном расширение  jpeg или png. Скоро и Edge будет поддерживать современный формат. Уже поддерживает.

Так друзья, проверьте снова сайт инструментом PageSpeed Insights. И вы увидите что, рекомендация - Используйте современные форматы изображений - исчезла:

Вот, как то, так.

В заключение

На данный момент не существует другого формата изображения или инструмента оптимизации изображений для Интернета, который мог бы достичь меньшего размера файла без заметной потери качества, как это может сделать WebP.

Преимущество от внедрения WebP в WordPress заключается в уменьшении размера файлов изображений на 30%.

Будем надеяться, что в будущем WordPress представит поддержку WebP. Пока это не произойдет, я рекомендую использовать специальные плагины WebP, которые могут помочь вам размещать изображения WebP на вашем веб-сайте ВордПресс. Тем самым, вы значительно ускорите загрузку страниц своего сайта на ВП. А это важно для продвижения.

Вот пожалуй и всё, друзья. До новых встреч. Удачи всем без исключения. Пока, пока!