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

Инструкция для Wordpress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ваш хостинг (сервер) должен использовать 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).

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

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

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

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

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

Рейтинг
( Пока оценок нет )
Диджитал на минималках
Комментарии: 4
  1. Артур

    Как он сжимает изображения? WebP Express у меня страшно мылит jpeg. Imagick не может хостер заставить работать с webp, подозреваю, что дело именно в этом.

    1. Админ (автор)

      Артур, привет! Вас интересует результат или технологический процесс?)

  2. Ods

    А я пока не использую на сайте webp. Преимущества мизерны.

  3. Read Full Article

    296794 601293Extremely nice post. I just stumbled upon your blog and wanted to say that Ive truly enjoyed surfing about your weblog posts. Right after all I will be subscribing to your feed and I hope you write once more really soon! 347640

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: