+7 (911) 704-69-81

Россия, Санкт-Петербург

+7 (911) 704-69-81
Вверх

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

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

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

  1. Создаем подкаталог /connectors/converter/ в корневом каталоге сайта;
  2. Скачаем туда содержимое каталога из https://github.com/commeta/modxWebpConverter
  3. Заходим в панель управления MODX Revo:
    • Создаем плагин, modx_plugin_webp_converter;
    • Указываем статичный путь: /connectors/converter/modx_plugin_webp_converter.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 режима работы:

  1. Создание списка JPEG и PNG файлов для конвертирования, если файл уже был конвертирован, то повторной конвертации не будет до тех пор, пока JPEG или PNG файл не обновится на сервере.WEBP Конвертер - Поиск изображений
  2. Конвертация файлов по списку, в этот момент в MODX USER MENU будет показано количество файлов в очереди для обработки.WEBP Конвертер - обработка очереди
  3. Очистка подкаталога /webp/ - при многократном использовании, в каталоге /webp/ могут остаться файлы удаленных копий JPEG или PNG файлов, в этом режиме будет произведена очистка каталога /webp/, и сброс кэша плагина.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 можно сменить ограничения на количество потоков, в зависимости от мощности сервера:

  • 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;