Webp конвертер, плагин для MODX Revolution

24 Август 2020

Webp конвертер для MODX Revo

WebP — современный графический формат для веб сайтов, разработанный компанией Google в 2010 году. На данный момент этот формат поддерживают все современные браузеры, кроме устаревшего IE, https://caniuse.com/#feat=webp

Основных причин использования формата WebP несколько:

размеры файлов WebP более чем в два раза меньше чем их копии в форматах JPEG или PNG;
GOOGLE PAGE SPEED повышает баллы при использовании этого формата.

Проблема в том что в популярной CMS MODX Revolution, отсутствует поддержка WebP на должном уровне. Есть плагины такие как thumbOf которые умеют создавать в кэше WebP копии, но у них нет определения поддержки браузером этого формата. Еще одна трудность в том что не все графические редакторы работают с WebP. Попробуем исправить это досадное недоразумение.

Чтобы не утруждать себя лишней работой, сделаем поддержку этого формата прозрачно, т. е. Вам не придется задумываться о дополнительных копиях графических файлов на сервере. Вы как и прежде будете размещать на сайте изображения в форматах JPEG или PNG, а плагин будет создавать и обслуживать актуальные копии этих файлов в отдельном подкаталоге.

Установка плагина WebP converter в MODX Revo

Создаем подкаталог /connectors/converter/ в корневом каталоге сайта;
Скачаем туда содержимое каталога из https://github.com/commeta/modxWebpConverter
Заходим в панель управления MODX Revo:
- Создаем плагин, modx_plugin_webp_converter;
- Вставляем содержимое файла /connectors/converter/modx_plugin_webp_converter.php в поле Код плагина (PHP)

Далее необходимо на вкладке Системные события, отметить пункты:

OnManagerPageBeforeRender - Запускается в контроллере менеджера, перед оформлением контента.
OnWebPagePrerender - Запускается после того, как все теги на странице обработаны, но еще не переданы в браузер.
OnSiteRefresh - Запускается каждый раз, когда кэш для всего сайта очищен.
OnTemplateSave - Запускается после того, как шаблон будет сохранен.
OnChunkSave - Запускается после того как чанк сохранен.
OnPluginSave - Запускается после того, как плагин будет сохранен.
OnSnippetSave - Запускается после того, как сниппет будет сохранен.
OnTemplateVarSave - Запускается после успешного сохранения переменной шаблона в базе данных.
OnDocFormSave - Запускается после сохранения ресурса в менеджере через форму редактирования.

После сохранения плагина, в правом верхнем меню (MODX USER MENU) появится ссылка: WEBP Конвертер

WEBP Конвертер - в правом верхнем меню MODX USER MENU

Принцип работы WebP конвертера

В работе конвертера участвует утилита cwebp разработанная компанией Google как раз для таких случаев
Precompiled Utilities, downloads repository.

Для сжатия JPEG файлов используем параметры:

-metadata none: Не копировать метаданные из исходного файла;
-m 6: Метод сжатия от 0 до 6, медленное кодирование - высокое качество;
-q 70: Коэффициент сжатия, сжатие с потерями - высокое качество.

Для сжатия PNG файлов используем параметры:

-metadata none: Не копировать метаданные из исходного файла;
-m 6: Метод сжатия от 0 до 6, медленное кодирование - высокое качество;
-q 70: Коэффициент сжатия, сжатие с потерями - высокое качество;
-alpha_q 85: Коэффициент сжатия для альфа-канала, сжатие с потерями - высокое качество;
-alpha_filter best: Метод прогнозирующей фильтрации для альфа-плоскости, best - лучший;
-alpha_method 1: Алгоритм, используемый для альфа-канала, 0 - без сжатия, 1 - сжатие без потерь.

При клике по ссылке WEBP Конвертер, в верхнем меню (MODX USER MENU) панели MODX Revo, программный код плагина осуществит поиск всех JPEG и PNG файлов в корневом каталоге сайта. Кроме подкаталога /manager/

После чего в корне сайта будет создан отдельный подкаталог /webp/ - для хранения копий всех графических файлов найденных на сайте.
Например: копия файла /assets/template/image.png будет создана в /webp/assets/template/image.png.webp

Режимы работы конвертера

У конвертера есть 3 режима работы:

Создание списка JPEG и PNG файлов для конвертирования, если файл уже был конвертирован, то повторной конвертации не будет до тех пор, пока JPEG или PNG файл не обновится на сервере.
Конвертация файлов по списку, в этот момент в MODX USER MENU будет показано количество файлов в очереди для обработки.
Очистка подкаталога /webp/ - при многократном использовании, в каталоге /webp/ могут остаться файлы удаленных копий JPEG или PNG файлов, в этом режиме будет произведена очистка каталога /webp/, и сброс кэша плагина.

Режимы запускаются один за другим при клике на ссылку WEBP Конвертер в MODX USER MENU. Конвертер работает параллельно, вы можете продолжать заниматься администрированием сайта в момент конвертирования.

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

По умолчанию, в режиме конвертации, после обновления страницы MODX manager, конвертация продолжиться с того места на котором была остановлена. Если в этот момент будут открыты дополнительные вкладки MODX manager, то конвертация продолжиться в несколько потоков, но не более трех.

WEBP Конвертер - обработка очереди в нескольких вкладках

Количество потоков можно увеличить и без открытия нескольких вкладок.

По умолчанию, в режиме конвертирования, программный код (обработчик очереди) берет очередной графический файл, и отправляет запрос на сервер с командой конвертирования файла, дождавшись ответа что файл обработан, обработчик очереди отправляет на сервер следующее задание. Если кликнуть на ссылку (обратный отсчет очереди) в MODX USER MENU, то с каждым кликом будет запускаться второй, третий, четвертый (но не более) обработчик очереди. Это позволит выполнять конвертацию параллельно, в несколько потоков.

WEBP Конвертер - несколько обработчиков очереди

Подмена изображений JPEG и PNG на WEBP в HTML коде сайта

После установки плагина, в момент подготовки HTML кода для передачи в браузер, программный код плагина (анализатор) осуществит поиск JPEG и PNG файлов в HTML коде внешней страницы сайта.

Поиск ведется:

В теге IMG атрибут SRC="/path/to/img.jpg";
В теге IMG атрибут SRCSET="/path/to/img.jpg 100w, /path/to/img2.jpg 200w, ...";
В инлайн CSS STYLE указателях на ресурсы URL("/path/to/img.jpg").

В случае, если у найденного в HTML коде файла есть копия в подкаталоге /webp/path/to/img.jpg.webp то плагин осуществит подмену, но только в том случае если браузер поддерживает формат WebP.

Результаты работы анализатора будут сохранены в кэше, пока системный кэш MODX не будет очищен, или не будет сохранен ресурс, чанк, плагин, сниппет, или TV поле в MODX manager.

Сообщения об ошибках

Все ошибки возникающие по ходу работы плагина, будут отображаться в MODX USER MENU.

Список ошибок:

Could not create MODX class - Не удалось инициализировать API MODX;
Unauthorized - Ошибка авторизации MODX Manager;
Wrong Bin file! - Не найден бинарный файл утилиты CWEBP;
Exec function disabled! - PHP функция EXEC отключена в PHP.INI;
Bin file for: %PHP_OS% not found in ~Binaries/ - Не найден файл утилиты CWEBP для %операционной системы% сервера;
Bin file not work! return code: %127% - Бинарный файл утилиты CWEBP вернул ошибку: %код ошибки%.

Параметры режимов работы

В файле /connectors/converter/converter.js можно сменить ограничения на количество потоков, в зависимости от мощности сервера:

converter_count === 0 Авто-запуск, === -1 Без авто-запуска;
let concurent_tasks= Автозапуск конвертера, продолжение конвертирования в новых вкладках, по умолчанию 3;
let max_count_threads= Максимальное количество потоков в одной вкладке, по умолчанию 4.

В файле /connectors/converter/converter.php содержаться следующие параметры:

$param_jpeg= Параметры для сжатия файлов JPEG, утилиты CWEBP;
$param_png= Параметры для сжатия файлов PNG, утилиты CWEBP;
$suppliedBinaries= Массив с названием операционной системы сервера в качестве ключа, и именем бинарного файла утилиты CWEBP в качестве значения.

Чтобы сменить бинарный файл утилиты CWEBP, скачайте рабочую версию утилиты для вашей системы: downloads repository в подкаталог /connectors/converter/Binaries/. Затем укажите имя бинарного файла в массиве $suppliedBinaries.

В файле /connectors/converter/modx_plugin_webp_converter.php параметры плагина:

$disable_replacing_for_logged_user= TRUE - отключить подмену для залогиненных пользователей MODX Manager, по умолчанию FALSE;