Краткая инструкция к Opti MozJpeg Guetzli WebP
В этой краткой инструкции я опишу наиболее простой способ установки и применения плагина Opti MozJpeg Guetzli WebP для успешной оптимизации изображений WordPress сайта.
Итак, прежде всего нужно установить сам плагин. Стабильная версия находится в каталоге плагинов WordPress. Самую новую бета версию можно скачать здесь.
Далее нужно установить Oracle VirtualBox. Это бесплатный эмулятор виртуального компьютера. (www.virtualbox.org)
Потом загрузите мою виртуальную машину для VirtualBox. В ней содержится Linux, ssh сервер и энкодеры.
Откройте эту виртуальную машину в VirtualBox. Перейдите в Машина → Настроить → Сеть → Дополнительно → Проброс портов. Укажите ip адрес Вашего компьютера в окне "Правила проброса портов".
Если Вы планируете использовать энкодер Google Guetzli, то увеличьте размер оперативной памяти виртуальной машины до 2 гигабайт. (Машина → Настроить → Система → Основная память)
Запустите виртуальную машину.
Теперь перейдите в панель администрирования Вашего WordPress сайта. Откройте Media → Opti MozJpeg Guetzli WebP → Settings
Для первого этапа оптимизации укажите следующие настройки :
Mode = Mozilla MozJpeg
Default quality = 80
Minimal benefit from jpeg compression = 10
Jpeg encoder location = remote
Сохраните настройки и перейдите во вкладку “Batch optimization”. Нажмите “Run batch optimization”.
Следите за консолью. Процесс оптимизации должен пройти без ошибок.
После первого этапа все изображения на сайте будут оптимизированы. Вторым этапом будет “Webp duplicates generation”. В интернете много информации о графическом формате WebP. Единственное, что я хочу добавить от себя, это: на данный момент для получения высокого балла в Google Pagespeed Insights нужно обязательно использовать WebP изображения. Поскольку формат WebP поддерживается не всеми браузерами, нет смысла конвертировать все изображения сайта в WebP. Выход из ситуации - иметь два файла для каждого изображения. Один в формате WebP для браузеров с поддержкой WebP, другой - в классическом формате для браузеров без WebP.
Давайте создадим WebP дубликаты для изображений сайта. Опять переходим в вкладку “Settings”. И настраиваем:
Mode = Google WebP (duplicates generation)
Default quality = 75
Minimal benefit from lossy compression = 5
Нажимаем “Save Changes”. Возвращаемся во вкладку “Batch optimization” и запускаем оптимизацию второй раз.
Если Вы откроете папку uploads после завершения второго этапа оптимизации, то увидите пары файлов для каждого изображения.
Последние, что нужно сделать - настроить Apache так, чтобы он выдавал webp файлы браузерам с поддержкой WebP. Добавьте следующее в файл .htaccess :
###
# BEGIN Opti MozJpeg Guetzli WebP
###
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteRule (.*) %{REQUEST_FILENAME}\.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
###
# END Opti MozJpeg Guetzli WebP
###
Если Вы откроете Ваш сайт в браузере Google Chrome, то увидите, что адреса изображений не изменились. Но на самом деле они содержат данные в формате WebP.
Теперь все готово. Тестируйте сайт в Google Pagespeed Insights!
P.S.
Здесь можно просмотреть видео инструкцию, как настроить виртуальную машину плагина в Microsoft Windows desktop.
Если у Вас возникают трудности с использованием виртуальной машины на Вашем компьютере, тогда попробуйте воспользоваться бесплатным онлайн сервером от автора плагина. Нажмите здесь, чтобы прочитать больше о бесплатном сервере.
Просмотрите также страницу Часто Задаваемых Вопросов по плагину. Она находится здесь.
