ImageOptimizer
Конвертация изображений в WebP/AVIF, responsive srcset, очередь и авто-inject picture на витрине MODX 3
ImageOptimizer
ImageOptimizer конвертирует растровые изображения в WebP и AVIF, генерирует responsive-варианты по breakpoints и на OnWebPagePrerender оборачивает локальные <img> в <picture> с srcset. Чанки менять не нужно.
С чего начать: Быстрый старт.
Возможности
- Статические варианты: файлы
{basename}.{width}.webpрядом с оригиналом в media source - Очередь: таблица
imageoptimizer_queue, обработка из админки, CLI или cron - Авто-inject:
<picture>+ WebP/AVIFsrcsetна выходе HTML-страницы - Upload hook: постановка в очередь при загрузке в File Manager
- Vue-админка: очередь, настройки, проверка энкодеров на сервере
Системные требования
| Требование | Версия |
|---|---|
| MODX Revolution | 3.0+ |
| PHP | 8.2+ |
| GD или Imagick | с поддержкой WebP |
| pdoTools | актуальная (зависимость transport) |
| VueTools | ≥ 1.1.2-pl (админка) |
Расширения PHP: fileinfo, gd или imagick. AVIF опционально: avifenc или Imagick с AVIF.
Зависимости
- pdoTools: обязательна при установке transport
- VueTools: Vue 3 + PrimeVue для менеджерского интерфейса
Опционально
- MiniShop3: типичная витрина; отдельного кода MS3 в пакете нет, inject работает на любом HTML
Установка
- Подключите репозиторий ModStore.
- Установите pdoTools и VueTools, если их ещё нет на сайте.
- Extras → Installer → найдите ImageOptimizer → Download → Install.
- Убедитесь, что плагин ImageOptimizer включён.
- Настройки → Очистить кэш.
После install resolver создаёт namespace imageoptimizer, таблицу очереди, права доступа, пункт меню Компоненты → ImageOptimizer и системные настройки imageoptimizer_*.
Сборка transport из исходников
Для разработчиков пакета: README на GitHub (npm run build:mgr, php _build/build.php).
Минимальный путь после установки
- Откройте Компоненты → ImageOptimizer → вкладка Server: хотя бы один WebP-энкодер «Доступен».
- Добавьте cron или обрабатывайте очередь вручную — Быстрый старт.
- Загрузите JPEG в File Manager или сделайте rebuild каталога.
- Нажмите Обработать очередь, дождитесь статуса
done. - Откройте страницу с
<img src="assets/...">и проверьте<picture>в исходном коде.
Быстрые ссылки
| Нужно | Документ |
|---|---|
| Первый запуск и cron | Быстрый старт |
Все ключи imageoptimizer_* | Системные настройки |
| Авто-inject, skip, data-атрибуты | Авто-inject и picture |
| Thumb3x, MS3, VueTools | Совместимость |
| Очередь и кнопки в менеджере | Админка |
| Bulk и crontab | CLI и cron |
| Типовые вопросы | FAQ |
| Диагностика | Решение проблем |
Архитектура
Плагин ImageOptimizer слушает события File Manager (OnFileManagerUpload, OnFileManagerFileCreate, OnFileManagerFileUpdate, OnFileManagerFileRemove), OnWebPagePrerender, OnSiteRefresh, OnCacheUpdate.
Сниппетов в пакете нет. Вся интеграция на витрине: авто-inject или ручные пути к вариантам на диске.
Термины
| Термин | Описание |
|---|---|
| Вариант | Файл WebP/AVIF с заданной шириной; width=0 = full-size, например hero.jpg.webp |
| Breakpoint | Целевая ширина из imageoptimizer_breakpoints, например 768 → photo.768.webp |
| Очередь | Строки в imageoptimizer_queue: path, format, width, status |
| Inject | Подмена <img> на <picture> в HTML перед отдачей страницы |
| Worker | imageoptimizer_process_queue: конвертация pending-задач (cron, CLI, кнопка в админке) |
Репозиторий
Исходники и dev-документация: github.com/Ibochkarev/ImageOptimizer. Баги и предложения: Issues.