ImageOptimizer - WebP/AVIF и responsive <picture> для MODX 3

ImageOptimizer — бесплатное дополнение для MODX 3, которое убирает рутину вокруг современных форматов изображений. Загружаете JPEG или PNG в File Manager — компонент ставит задачи в очередь, конвертирует в WebP (и при необходимости AVIF), создаёт варианты под разные ширины экрана и на выходе страницы сам оборачивает в . Чанки, шаблоны и галереи MiniShop3 переписывать не нужно.



Проблема, которую решает
Тяжёлые JPEG и PNG тянут LCP и PageSpeed. Ручная подготовка WebP, srcset и picture для сотен файлов в каталоге — отдельный проект. On-the-fly ресайзеры вроде Thumb3x удобны для динамики, но каждый размер — запрос к PHP. ImageOptimizer идёт другим путём: заранее пишет статические файлы рядом с оригиналом и один раз подставляет готовую разметку при отдаче HTML.

Что меняется на практике

• Редактор загружает картинку — она попадает в очередь (convert_on_upload).
• Менеджер жмёт Обработать очередь в админке или настраивает cron — на диске появляются *.webp по breakpoints.
• Посетитель открывает страницу — браузер видит picture и забирает WebP там, где умеет. Старые браузеры остаются на исходнике.

Для уже существующего архива — Пересобрать очередь по папке: каталог товаров, images/resources MS3 или один файл. Path указывается относительно media source, не URL сайта.

Админка на Vue

Компонент ImageOptimizer в менеджере: обзор очереди и сервера, таблица задач с фильтрами, все настройки imageoptimizer_*, проверка энкодеров (GD, Imagick, cwebp, avifenc), блок совместимости с Thumb3x, pThumb, MiniShop3 и VueTools. Live-обновление сводки — удобно следить за bulk-конвертацией.







Не ломает то, что уже настроено
URL с thumb3x пропускаются — не конфликтует с on-the-fly thumbs. Уважаются существующие srcset, picture, атрибуты loading и decoding. SVG и внешние ссылки не трогаются. Нужно исключить одну картинку — класс из skip_classes или data-imageoptimizer-skip.

MiniShop3 — опционально
Инъекция работает на любом HTML. На витрине MS3 проверены типичные кейсы: товарные JPEG, загрузки в images/resources. Отдельных сниппетов для магазина не требуется.

Для администратора сервера

• Worker из админки, php core/components/imageoptimizer/cli/convert.php или cron cron/convert.php
• Lock-файл и сброс зависших processing
• Опциональный HTML-кэш после инъекции (html_cache)
• Права: imageoptimizer_view, imageoptimizer_settings, imageoptimizer_run

Установка

• MODX Revolution 3.0+, PHP 8.2+
• pdoTools, VueTools ≥ 1.1.2-pl
• GD или Imagick с поддержкой WebP

Быстрый старт

1. Установите transport через Управление пакетами.
2. ImageOptimizer → Сервер — WebP «Доступен».
3. Загрузите изображение или rebuild по каталогу → Обработать очередь.
4. View Source страницы — есть picture и WebP source.

Скриншоты













Ссылки

• Документация на MODX.pro

Дополнение на модерации в modstore.