Webp express как настроить

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

Просмотров: 10 911

Здравствуйте, друзья! И снова пост касается оптимизации изображений — как использовать на сайте 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 tags with

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. И вы увидите что, рекомендация — Используйте современные форматы изображений — исчезла:

P.S. В WordPress версии 5.8 появится поддержка формата WebP

В WordPress 5.8 появится поддержка WebP

Команда разработчиков WordPress объявила, что новая версия 8.0 будет поддерживать формат изображений WebP. Публичный релиз этой версии запланирован на 20 июля.

Формат WebP разработан компанией Google. Конвертация картинок в этот формат уменьшает их размер на 25-35% без ухудшения качества. Использование WebP позволяет ускорить загрузку страниц.

Разработчики также добавили, что формат WebP будет поддерживаться, только если хостинг-сервер использует Imagick, пока LibGD не добавит его поддержку. Кроме того, для изображений с измененным размером пока не поддерживаются анимированные и альфа-форматы (вместо них создаются изображения с потерями при загрузке в этих форматах)».

В WordPress 8.0 разработчики также добавят новые поля в раздел «Здоровье сайта», чтобы показать, может ли веб-хостинг поддерживать формат WebP. В результате владельцы сайтов будут сразу видеть, смогут ли они воспользоваться преимуществами этого формата, а если нет – запросить его поддержку у хостинг-провайдера.

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

В заключение

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

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

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

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

Источник

Как настроить WebP Express в WordPress на Nginx

Сегодня поговорим о том Как настроить WebP Express в WordPress на Nginx и PHP-FPM.

Сам плагин легко устанавливается из консоли WordPress, а вот его настройка в связки с Nginx вызывает затруднение. Ну да ладно. Давайте пройдем все этапы по настройке WebP Express вместе с вами. И разберемся как можно настроить WebP Express в CMS WordPress на WEB-сервере Nginx.

Сам процесс установки в данной статье я описывать не буду. Думаю и сами разберетесь. Приступим сразу к его настройке.

Настройка WebP Express в WordPress на Nginx

• Operation mode — устанавливаем в положение Varied image responses.
• Scope — устанавливаем в Uploads and themes, данный параметр отвечает за преобразование файлов в данных папках.
• Images types to work on — устанавливаем в Both jpeg and pngs, данный параметр отвечает за то, какие расширения файлов преобразовывать в WebP.
• Destination folder — тут выбираем в какой папке хранить уже преобразованные файлы. Есть два варианта: оставить в той же или помещать в другую.
• Destination structure — если вы выбрали перемещать преобразованные файлы в другую папку, то в данном пунке уже выбираем название папки: image-roots или document-root.
• Cache control header — можно установить кэш для изображений.

Переходим к следующей категории:

Данная категория помещает необходимые правила в файл .htaccess . Данные правила необходимы только если у Вас установлен Apache. Но на всякий случай я их оставил.

Здесь настраиваются правила для конвертации изображений в формат WebP. Оставляем без изменений. И так все норм.

Здесь указываются методы конвертирования для вашей системы.

Если у вас отключен метод cwebp, а при прохождении теста выдает: No cwebp binaries could be executed (permission denied for user: «www-data») . Значит у вас нехватает утилиты cwebp. Для установки в Ubuntu/Debian в терминале набираем следующее:

Тут плагин предлагает с конвертировать все имеющиеся изображения в формат *.webp . А также конвертировать изображения при их загрузке на сайт.

Категория AlterHTML отвечает за автоматическую вставку кода в ваши изображения. Без данного параметра отображение формата *.webp на сайте с WordPress и Nginx так и не заработала.

Также отказывалось работать, если установить в параметре What to replase переключатель в положение Replase image URLs

Если есть вопросы, то пишем в комментариях.

Источник

Как настроить плагин Webp Express для WordPress на NGINX?

Нужно улучшить показатели сайта на wordpress в Google Page Speed. Хочу сделать подмену всех jpeg, jpg, png картинок на .webp. Установил плагин Webp Express. Он перевел все картинки моего сайта в .webp формат. Картинки в должных папках есть в нужном формате.

Но проблема. Мой сайт находится на VPS (Ubuntu 18/04). Веб-сервер не Apache2, а NGINX.

В FAQ к плагину я нашел настройки для NGINX. Вот что пишет создатель:

It is possible to make WebP Express work on NGINX, but it requires manually inserting redirection rules in the NGINX configuration file (nginx.conf or the configuration file for the site, found in /etc/nginx/sites-available).

There are two different approaches to achieve the redirections. One based on rewrite and one based on try_files. As try_files performs best, I shall recommend that.

For multisite on NGINX, read here

method 1 (try_files)

Lets take this step by step.
First step is to redirect images to the script. Second step is redirecting directly to existing webp images. Finally, as an optional third step, you can add extra rules for enabling the Convert non-existing webp-files upon request functionality

Step 1: Redirecting images to the script

The following will redirect all images under wp-content to the script, but only for webp-enabled browsers.

Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). «The server context» refers to the part of the configuration that starts with «server <» and ends with the matching «>».

Beware when copy/pasting: You might get html-encoded characters. Verify that the ampersand before «wp-content» isn’t encoded

If you have moved wp-content to a non-standard place, you must change accordingly. Especially note that you must also change the wp-content parameter to the script. It expects a relative path to wp-content (from document root) and is needed so the script can find the configuration file.

The xsource parameter helps the script finding the source file. It is only needed on some setups. You can try deleting it and see if it still works.

Beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g», so the first line becomes:
location

* ^/?wp-content/.*\.jpe?g$ <
If you cannot get this to work then perhaps you need to add the following to your mime.types configuration file:
image/webp webp;
If you still cannot get it to work, you can instead try method 2

Step 2: Redirecting directly to existing webp images.

Once you got this working, lets improve performance by redirecting directly to existing webp images. This step isn’t necessary, as the script also does that — but invoking the php script takes more resources that the direct redirect. Also, a direct redirect will produce ETag response header, which is increases caching performance.

The rules looks for existing webp files by appending «.webp» to the URL. So for this to work, you must configure WebP Express to store the converted files like that:
1. Set Destination folder to mingled
2. Set File extension to Append «.webp»

Now, place the following in the server context (replacing what you inserted in step 1):

Beware when copy/pasting: You might get html-encoded characters. Verify that the ampersand before «wp-content» isn’t encoded

Again, beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g».

Credits: This second step builds on Eugene Lazutkins solution.

Step 3:: Caching
In most cases you can and should allow images to be cached for a long period. If you do not want to do that, simply remove the «expires 365d;» line.

Step 4:: Routing requests for non-existing webps to the converter

Simply add the following rules below the ones you added in step 2:

Again, beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g».

Я вообще не силен в настройках NGINX и плохо понимаю пока регулярные выражения. Мой NGINX конфиг теперь выглядит вот так (добавил последние два location):

NGINX перезагружал. Но на сайте и после обновления кэша не происходит подмены адреса картинки. Может быть я что-то забыл? Или какой то параметр конфига NGINX мешает? Подскажите пожалуйста.

Источник