Конвертер webp: как использовать этот формат на своём сайте?

Использование прогрессивных форматов изображений продиктовано рекомендациями Google по улучшению скорости загрузки сайтов (речь о сервисе Page Speed). Одним из таких является формат WEBP. Он занимает значительно меньше места на жестком диске, грузится быстрее. К тому же, если браузер пользователя не поддерживает формат webp (таких всего 20%, но они есть), то ему будут показаны стандартные jpeg/png-изображения. А мы, знаете, решили последовать гугловским советам, еще и вам насоветуем сейчас.

Как заменить изображения на webp

Если у вас сайт, созданный на движке WordPress, то мы рекомендуем использовать плагин WebP Converter for Media

После установки пользователям автоматически будут «подсунуты» новые изображения, которые сохраняются в отдельном каталоге. Изображения конвертируются с использованием PHP GD или расширения Imagick. URL-адреса изображений модифицируются с помощью модуля mod_rewrite на сервере, при этом путь к файлу сохраняется, только источник загруженного файла изменяется на файл WebP, что дает возможность загружать изображения, если браузер пользователя не поддерживает webp

Настройки здесь незамысловатые. Необходимо поставить галочки на поддерживаемых форматах

И установить в чекбоксы галочки на пунктах Автоматическое удаление файлов WebP больше оригинала (смысл от webp, если он весит больше оригинального изображения?) и Кэширование браузера для файлов WebP (сохранение изображений в кеш-памяти браузера)

Если у вас уже есть база изображений на сайте, их можно (и нужно) сконвертить в формат webp. Но тут может быть проблема, а именно ошибка an error occurred creating destination directory:

Это значит, что плагин не может создать нужную директорию (wp-content/uploads-webpc) под наши файлы. Мы можем это сделать самостоятельно через любой FTP-менеджер, установив директории соответствующие права:

Теперь после нажатия Regenerate All процесс пойдет:

Как проверить работу плагина? У меня поменялись изображения?

После завершения регенерации файлов webp необходимо проверить подгружаются ли у вас изображения в этом формате. Для этого нужно открыть хром и открыть инструменты разработчика (нажмите F12) и введите адрес вашего сайта. В окне devtools необходимо перейти на вкладку img (Категория Network)

Дальше смотрим столбец Type — в нём должно быть. Важно: расширение файла в поле имя останется прежним — так и должно быть, смотрим только на тип.

Не работает. Что делать?

Если у вас до сих пор отображаются jpeg/png изображения, то нужно внимательно прочитать FAQ к плагину, в особенности, если у вас сервер ngnix. Для данного типа сервера необходимо ввести команды (нужен доступ к хостингу). Откройте FAQ плагина, найдите пункт Configuration for Nginx и выполните все рекомендации автора, иначе работать ничего не будет:

Ваш хостинг (сервер) должен использовать PHP не ниже 7.0 и иметь установленное расширение GD или Imagick. Так же стоит проверить, создали ли вообще версии webp в необходимой директории — www/имя_сайта/wp-content/uploads-webpc. После чего, снова проверяем загрузку компонентов через devtools в браузере. Не забудьте обновить страницу с очисткой кэша (CTRL+F5)

UPD 18.09.2020 Плагин с версии 1.4.2 не работает с CDN

Небольшое уточнение. Если вы используете платформу Content Delivery Network , то плагин работать не будет (здесь мы описывали, как подключить Cloudflare на WordPress). Это, кстати, указано в официальном FAQ плагина (https://wordpress.org/plugins/webp-converter-for-media/#faq).

Проблема связана с логикой работы самой CDN, которая изменяет URL для файлов мультимедиа, а плагин не может работать с измененными адресами. Единственный выход из этой ситуации (на данный момент, по крайней мере) использовать конвертацию в самой платформе CloudFlare.

Это платная функция, доступная в тарифном плане бизнес, который стоит 200$ в месяц (~ 15 000 рублей)

Как вам статья?