Image Optimizer [NAT]
🖥️ Офіційний демо-стенд модуля
Системні вимоги
Модуль розроблено з урахуванням високих вимог безпеки і сумісний з наступним стеком:
Сумісність із CMS
• OpenCart 3.0.x / ocStore 3.0.x
• OpenCart 3.0 Cloud
Окруження сервера
• Бібліотека GD або розширення php-imagick (рекомендовано)
• Відкритий вихідний код (без IonCube)
Конвертація та Колір
• Автоматична XSS-санітизація завантажуваних SVG-файлів
Модуль разработан с учетом высоких требований безопасности и совместим со следующим стеком:
Совместимость с CMS
• OpenCart 3.0.x / ocStore 3.0.x
• OpenCart 3.0 Cloud
Окружение сервера
• Библиотека GD или расширение php-imagick (рекомендовано)
• Открытый исходный код (без IonCube)
Конвертация и Цвет
• Автоматическая XSS-санитаризация загружаемых SVG-файлов
The module is built with high security standards and is fully compatible with the following stack:
CMS Compatibility
• OpenCart 3.0.x / ocStore 3.0.x
• OpenCart 3.0 Cloud
Server Stack
• PHP-GD or php-imagick extension (recommended)
• Open source code (No IonCube encoder required)
Security & Profiles
• Built-in security sanitizer against SVG XSS vector attacks
Інструкція з встановлення
-
1
Завантаження файлів по FTP
Розпакуйте завантажений архів модуля. Скопіюйте вміст теки
upload/у кореневу директорію вашого сайту по FTP або SFTP (системні файли OpenCart при цьому не перезаписуються). -
2
Надання прав доступу
Перейдіть у меню
Система -> Користувачі -> Групи користувачів, відкрийте групу адміністратора (Administrator) і встановіть позначки прав на Перегляд та Зміну для контролера:extension/module/img_opti. -
3
Активація модуля
В меню
Модулі / Розширення -> Модулізнайдіть модуль Image Optimizer [NAT], натисніть зелену кнопку Встановити, після чого перейдіть у редагування модуля. -
4
Встановлення OCMOD модифікатора (якщо є)
Якщо до складу вашої збірки входить модифікатор
install.xml, встановіть його через менюВстановлення розширеньта не забудьте оновити кеш модифікаторів.
-
1
Загрузка файлов по FTP
Распакуйте загруженный архив модуля. Скопируйте содержимое папки
upload/в корневую директорию вашего сайта по FTP или SFTP (системные файлы OpenCart при этом не перезаписываются). -
2
Назначение прав доступа
Перейдите в меню
Система -> Пользователи -> Группы пользователей, выберите группу администраторов (Administrator) и установите права на Просмотр и Изменение для контроллера:extension/module/img_opti. -
3
Активация модуля
В меню
Модули / Расширения -> Модулинайдите модуль Image Optimizer [NAT], нажмите зеленую кнопку Установить, после чего перейдите в режим редактирования модуля. -
4
Установка OCMOD модификатора
Загрузите модификатор
install.xmlчерез установщик расширений OpenCart и обязательно обновите кэш модификаторов в менеджере расширений.
-
1
Upload assets via FTP
Extract the module ZIP archive. Transfer the files inside the
upload/folder to your OpenCart root directory using an FTP client (no core system files are overwritten). -
2
Grant Admin Permissions
Go to
System -> Users -> User Groups, open the Administrator group and select both Access and Modify permissions for:extension/module/img_opti. -
3
Activate Extension
Navigate to
Extensions -> Extensions -> Modules, find Image Optimizer [NAT], click the green Install button, and then click Edit to open the configuration dashboard. -
4
Upload OCMOD modification
Upload the
install.xmlmodification file using OpenCart Extension Installer, then clear and rebuild modifications cache.
Оновлення модуля
Щоб оновити модуль до останньої версії, завантажте файли нової версії з папки upload/ поверх уже існуючих файлів на сервері по FTP, після чого перейдіть в адмін-панель модуля і натисніть кнопку "Зберегти" для оновлення структури налаштувань.
Чтобы обновить модуль до последней версии, загрузите файлы новой версии из папки upload/ поверх уже существующих файлов на сервере по FTP, затем перейдите в настройки модуля и нажмите кнопку "Сохранить" для обновления структуры данных.
To update the extension to the latest version, copy the files inside the upload/ directory over the existing server files using FTP. After files are uploaded, open the module setting dashboard and click "Save" to apply new schema changes.
Налаштування по вкладках
📁 Tab 1: Налаштування (Settings)
Ця вкладка відповідає за загальні параметри роботи та ліцензування:
- Статус модуля: Глобальний перемикач роботи оптимізації.
- Токен активації: Введіть ключ ліцензії, отриманий на пошту або придбаний на платформі. Він прив'язаний до основного домену сайту.
- Рушій обробки: Виберіть GD або Imagick. Imagick працює значно якісніше, зберігає колірні профілі та коректно обробляє стиснення.
- Позиція меню: Налаштування виведення посилання на модулі [NAT] в адмінці (Шапка, Сайдбар, або обидва).
Эта вкладка отвечает за общие параметры работы и лицензирование:
- Статус модуля: Глобальный переключатель работы оптимизации.
- Токен активации: Введите лицензионный ключ, полученный при покупке. Ключ привязан к корню домена.
- Движок обработки: Выберите GD или Imagick. Imagick работает значительно чище, быстрее и не искажает цвета на iOS.
- Позиция меню: Настройка вывода ссылок на модули [NAT] в админке.
This tab configures general global settings and license parameters:
- Status: Global module state (Enabled/Disabled).
- Activation Token: Enter your license key linked to your domain host.
- Processing Engine: Toggle between GD (Standard) and Imagick (Recommended: higher quality, supports advanced color spaces).
- Menu Position: Choose where the NAT Modules navigation dropdown displays (Sidebar, Header, or Both).
📉 Tab 2: Оптимізація та Ресайз
Основний інструмент стиснення оригінальних картинок у папці image/catalog/:
- Режим роботи:
- Створити копію (безпечно): Модуль збереже оптимізовані файли в окрему папку, дозволяючи порівняти результат.
- Замінювати оригінали: Файли стискаються на місці. Потрібен бекап перед запуском!
- Папки обробки: Ви можете вказати окремі підпапки або вибрати весь каталог.
- Якість і Стиснення: Налаштування стиснення для JPG (0-100), PNG (0-9) та якості конвертованих WebP.
- Обмеження ширини/висоти: Автоматичний ресайз занадто великих фото до заданих меж (наприклад, 1920px), щоб не перевантажувати дисковий простір.
- Поріг заміни (%): Запобігає оновленню, якщо вага стиснутого файлу стала більшою за оригінал.
- Індивідуальні правила: Можливість перевизначити параметри якості для конкретних підпапок (наприклад, для папки банерів потрібна менша компресія).
Основной инструмент сжатия оригинальных картинок в папке image/catalog/:
- Режим работы:
- Создать копию (безопасно): Модуль сохранит сжатые фото в отдельную папку для тестирования.
- Заменять оригиналы: Изображения сжимаются на месте. Сделайте бэкап перед началом!
- Качество сжатия: Укажите качество для JPG (0-100), PNG (0-9) и WebP.
- Лимиты по габаритам: Автоматическое уменьшение разрешения фото, превышающих лимиты (например, 2000px).
- Индивидуальные правила: Вы можете настроить отдельный уровень сжатия для конкретных папок (например, catalog/banners/).
The primary panel for compressing original images inside the image/catalog/ directory:
- Operation Mode:
- Create copy (Safe): Retains original files and outputs compressed assets into a custom testing folder.
- Replace originals: Compresses and overrides files on-the-fly. Always backup first!
- Compression Quality: Adjust quality targets for JPG (0-100), PNG (0-9), and WebP formats.
- Max Dimensions: Automates downscaling of oversized images (e.g., resizing 6000px raw uploads down to 1920px).
- Folder-specific rules: Set custom quality limits for selected folders (like slider banners or brands).
🧹 Tab 3: Очищення невикористовуваних зображень
Цей сканер порівнює фізичні файли на вашому сервері з базою даних сайту (товари, категорії, бренди, банери) та шаблонами тем, знаходячи залишкові файли від видалених товарів чи парсингу:
- Звірка з БД: Скануються таблиці продуктів, опцій, категорій, виробників, банерів, а також текстові HTML-описи на наявність тегів
<img>. - Карантин: Замість видалення файли переносяться у приховану теку. Якщо якийсь файл знадобиться — його можна відновити однією кнопкою.
- Видалення назавжди: Повне очищення сміття для вивільнення максимального дискового простору.
Этот сканер сопоставляет физические файлы на хостинге с записями в БД (товары, категории, бренды, баннеры) и шаблонами, находя остаточный мусор от удаленных товаров или некорректного импорта:
- Карантин: Безопасное перемещение найденного мусора во временную папку. При необходимости все файлы возвращаются обратно в 1 клик.
- Удаление навсегда: Окончательная очистка диска от мусора.
An intelligent media scanner that indexes physical files on disk and matches them against database tables and theme code, finding files left behind by deleted products, category edits, or parsing imports:
- Database Matching: Cross-checks product images, description html blocks, category assets, and banner layouts.
- Quarantine: Safely moves files to an isolated directory. If a file was flagged by mistake, restore it instantly with one click.
- Permanent Delete: Purges flagged assets, freeing server storage space.
⚡ Tab 4: Формати зображень & Захист
Налаштування інтеграції медіаформатів нового покоління та захисту вітрини:
- Захист від фейкових JPG (On-the-Fly Fake JPG Guard): Автоматичний динамічний перехоплювач. Виявляє приховані бінарні PNG-заголовки всередині файлів з розширенням
.jpgта виправляє їх на льоту при завантаженні на витрині. Усуває чорний фон у старих версіях систем. Можливість вибору режиму виправлення: конвертувати у JPG з білим фоном або зберегти як прозорий PNG. - Завантаження SVG/WebP: Дозволяє додавати ці файли через стандартний диспетчер файлів (Filemanager) у адмінці OpenCart (включаючи TrueFileManager).
- On-The-Fly WebP + Lazy Load: Динамічний перехоплювач. Замінює посилання на зображення
.jpg/.pngна.webpверсії безпосередньо при виведенні HTML покупцеві (якщо браузер підтримує WebP). Також автоматично підставляє атрибут відкладеного завантаженняloading="lazy". - Прогресивний Lazy Load: Додає красивий ефект "розмиття" (blur-up) при завантаженні товарів під час скролу сторінки.
- Заглушка битих картинок: Автоматично замінює неіснуючі файли на вибране зображення-заглушку, рятуючи сітку дизайну сайту.
Настройки интеграции медиаформатов нового поколения и защиты витрины:
- Защита от фейковых JPG (On-the-Fly Fake JPG Guard): Автоматический динамический перехватчик. Однозначно определяет скрытые бинарные PNG-заголовки внутри файлов с расширением
.jpgи исправляет их на лету при обращении на витрине, полностью убирая артефакты черных фонов. Переключатель режима: конвертировать в JPG с белым фоном или сохранить прозрачный PNG. - On-The-Fly WebP + Lazy Load: На лету меняет расширения изображений на
.webpв коде страницы и добавляет отложенную загрузку. Не затрагивает базу данных! - Прогрессивный Lazy Load: Эффект красивого размытия (blur-up) картинок при прокрутке.
- Заглушка битых ссылок: Подставляет красивое изображение вместо отсутствующих на сервере файлов.
Configs next-gen format delivery and storefront protection features:
- On-the-Fly Fake JPG Guard: Dynamically detects PNG binary headers hidden inside
.jpgfile extensions and fixes them on-the-fly when requested by the storefront browser, eliminating black background artifacts. Includes mode selector: convert to white JPG or save as transparent PNG. - SVG/WebP Upload Support: Unlocks filemanager capabilities (including TrueFileManager) to link vector SVG and WebP assets manually.
- On-The-Fly WebP & Lazy Load: Automatically rewrites storefront HTML response to replace standard
.jpg/.pngpaths with their.webpequivalents on-the-fly, while appending native browserloading="lazy"tags. - Progressive Lazy Loading: Introduces a beautiful blur-up placeholder effect that fades out smoothly as high-res images load.
- Broken Image Redirects: Redirects failed image file references to a fallback image to prevent design broken cards.
Інструменти розробника та оптимізатора (Pro)
У вкладці "Інструменти (pro)" ви можете вибрати спеціальні утиліти з випадного меню для точкового вирішення проблем з дисковим простором чи базою даних:
Во вкладке "Инструменты (pro)" вы можете выбрать специализированные утилиты из выпадающего списка для точечного решения проблем с сайтом:
Under the "Tools (pro)" tab, select specific backend tools from the dropdown selector to run diagnostic and correction procedures:
| Назва інструменту | Категорія | Опис та функціонал |
|---|---|---|
| broken_db | Сканер | Пошук записів у БД (товари, доп. фото, категорії, бренди), для яких відсутній фізичний файл на диску. Дозволяє очистити биті записи або встановити заглушку. Поиск записей в БД (товары, доп. фото, категории, бренды), для которых отсутствует физический файл на диске. Позволяет очистить битые записи или поставить заглушку. Finds database records referencing missing image files on disk. Allows clearing broken DB records or assigning fallback placeholders. |
| broken_files | Сканер | Сканування диску на наявність бінарно пошкоджених чи неповних файлів зображень (0 байт, корумповані заголовочні блоки). Сканирование диска на наличие бинарно поврежденных или неполных файлов изображений (0 байт, битые заголовки). Scans disk for binary-corrupted or zero-byte truncated image files that fail GD/Imagick headers. |
| empty_folders | Сканер |
Пошук та автоматичне видалення порожніх директорій всередині image/catalog/ для підтримки чистоти файлового дерева.
Поиск и автоматическое удаление пустых директорий внутри image/catalog/ для поддержания чистоты файлового дерева.
Finds and safely deletes empty nested folders inside image/catalog/ to maintain a clean directory structure.
|
| folder_tree | Сканер | Повний аналіз об'єму та кількості файлів у кожній окремій підпапці каталогу. Допомагає знайти найважчі папки сайту. Полный анализ объема и количества файлов в каждой отдельной подпапке каталога. Помогает найти самые тяжелые папки сайта. Deep directory tree breakdown showing total filesize and file counts for every nested catalog folder. |
| html_broken | Сканер |
Пошук битих посилань на зображення в HTML-описах товарів, категорій та статей блогу, які віддають помилку 404.
Поиск битых ссылок на изображения в HTML-описаниях товаров, категорий и статей блога, отдающих 404.
Parses product and category HTML descriptions to locate broken <img> src paths returning 404.
|
| small_photos | Сканер | Пошук занадто малих/неякісних фотографій товарів (менше заданої ширини/висоти у пікселях, наприклад < 300px). Поиск слишком маленьких/некачественных фотографий товаров (меньше заданной ширины/высоты в пикселях, например < 300px). Filters catalog images below configurable pixel dimension thresholds (e.g. height/width under 300px). |
| duplicates | Сканер | Пошук дублікатів фотографій на сервері за хеш-сумами вмісту (MD5), незалежно від імені файлу. Дозволяє вивільнити гігабайти дубльованих фото. Поиск дубликатов фотографий на сервере по хэш-суммам содержимого (MD5), независимо от имени файла. Позволяет освободить гигабайты дубликатов. Identifies exact duplicate images across catalog directories via content MD5 hashing, regardless of filename. |
| heavy_files | Сканер | Пошук надзвичайно "важких" оригінальних фотографій (понад вказаний ліміт у КБ, наприклад > 500 КБ або > 2 МБ). Поиск чрезвычайно "тяжелых" оригинальных фотографий (свыше указанного лимита в КБ, например > 500 КБ или > 2 МБ). Highlights oversized original images exceeding KB file size thresholds (e.g. raw 5MB+ photo uploads). |
| cmyk | Сканер | Виявлення фотографій у друкарському колірному просторі CMYK (які виглядають инвертованими або не відображаються у Safari/iOS) з автоматичним переведенням у sRGB. Обнаружение фотографий в типографском цветовом пространстве CMYK (выглядящих инвертированными или не открывающихся в Safari/iOS) с автоматическим переводом в sRGB. Scans for CMYK printing color space images causing discolored/inverted rendering on iOS/Safari, with automated sRGB conversion. |
| svg_security | Сканер | Сканування та очищення SVG-файлів від потенційно шкідливих JavaScript-скриптів та XSS-ін'єкцій. Сканирование и очистка SVG-файлов от потенциально вредоносных JavaScript-скриптов и XSS-инъекций. Audit and sanitization of uploaded SVG files to strip malicious embedded JavaScript and XSS payload tags. |
| black_bg | Сканер | Сканування фотографій з чорними фоновими рамками після некоректної конвертації PNG у JPG. Включає утиліту Edge-Only Floodfill для відновлення білого фону або збереження прозорого PNG. Сканирование фотографий с черными фоновыми рамками после некорректной конвертации PNG в JPG. Включает утилиту Edge-Only Floodfill для восстановления белого фона или сохранения прозрачного PNG. Scans for black background border artifacts from improper PNG-to-JPG conversions. Includes Edge-Only Floodfill to replace borders with white or restore transparent PNG. |
| watermark | Генератор | Пакетне накладення водяних знаків (текст або зображення) на вибіркову групу фотографій товарів або категорій. Пакетное наложение водяных знаков (текст или изображение) на выборочную группу фотографий товаров или категорий. Batch watermarking utility for selected catalog image paths using text or graphics overlays. |
| placeholders | Генератор | Пакетне встановлення зображень-заглушок для відсутніх або битих фото товарів у БД. Пакетная установка изображений-заглушек для отсутствующих или битых фото товаров в БД. Batch assignment of fallback placeholder images for catalog items missing a physical asset. |
| png_jpg | Генератор | Масове конвертування важких непрозорих PNG-зображень у компактні JPG або WebP файли із заміною посилань в БД. Массовое конвертирование тяжелых непрозрачных PNG-изображений в компактные JPG или WebP файлы с заменой ссылок в БД. Converts heavy non-transparent PNG files into lightweight JPG/WebP assets and updates DB table references. |
| exif | Генератор | Очищення службових EXIF-метаданих (геолокація GPS, модель камери, авторство) для додаткового зменшення ваги файлів на 10-15%. Очистка служебных EXIF-метаданных (геолокация GPS, модель камеры, авторство) для дополнительного уменьшения веса файлов на 10-15%. Strips technical EXIF metadata (GPS location, camera parameters) to shave an extra 10-15% off file weights. |
| smart_cache | Генератор |
Розумне очищення кешу OpenCart image/cache/ з можливістю вибіркового вилучення застарілих мініатюр.
Умная очистка кэша OpenCart image/cache/ с возможностью выборочного удаления устаревших миниатюр.
Selective purger for expired OpenCart thumbnail cache inside image/cache/ without affecting active assets.
|
| sanitizer | Експериментальний | Санітайзер імен файлів: автоматичне очищення шляхів від кирилиці, спецсимволів, пропусків та дублюючих підкреслень з синхронізацією в БД. Санитайзер имен файлов: автоматическая очистка путей от кириллицы, спецсимволов, пробелов и дублирующих подчеркиваний с синхронизацией в БД. Filename sanitizer: strips spaces, Cyrillic, and illegal special characters from file paths while auto-updating DB tables. |
| translit | Експериментальний | Автоматична транслітерація кириличних назв фото у латиницю за стандартом SEO URL. Автоматическая транслитерация кириллических названий фото в латиницу по стандарту SEO URL. Automated transliteration of Cyrillic filename strings into clean SEO-friendly Latin characters. |
| cache_restore | Експериментальний | Відновлення втрачених оригіналів з вищих за роздільною здатністю знімків кешу при випадковому видаленні. Восстановление утерянных оригиналов из снимков кэша с высоким разрешением при случайном удалении. Recovery tool for accidentally deleted original files by analyzing and extracting high-resolution cached thumbnails. |
Автоматизація по Cron
Для автоматичного регулярного фонового стиснення нових завантажених зображень ви можете налаштувати завдання у планувальнику вашого хостингу (Cron), використовуючи надане посилання:
Для автоматического регулярного сжатия новых загружаемых фото в фоновом режиме настройте планировщик задач на вашем хостинге (Cron) с помощью следующей ссылки:
To automate background scans and optimize new image uploads, configure a cron job on your hosting cPanel using the following command template:
wget -q -O - "https://oc3-demo.nat.od.ua/index.php?route=extension/module/img_opti/cron&key=YOUR_CRON_TOKEN"
Замініть YOUR_CRON_TOKEN на секретний токен із вкладки "Крон-завдання". Рекомендований інтервал запуску — раз на добу.
Замените YOUR_CRON_TOKEN на секретный токен из вкладки "Крон-задания". Рекомендуемый интервал запуска — раз в сутки.
Replace YOUR_CRON_TOKEN with the secret token located under your Cron tab. The recommended trigger rate is once per 24 hours.
Часті питання (FAQ)
loading="lazy" для відкладеного завантаження, що підвищує оцінку Google PageSpeed. База даних не змінюється!
Этот механизм перехватывает выходной HTML-код сайта, ищет теги изображений и подменяет расширения на WebP (если файлы созданы). Дополнительно добавляет атрибут loading="lazy" для отложенной загрузки, повышая балл в Google PageSpeed. БД сайта не меняется!
It intercepts storefront HTML rendering output, searches for image tags, and replaces extension references with WebP copies (generating them if they don't exist yet). It also appends browser-native loading="lazy" parameters, boosting Google PageSpeed index. DB rows remain unmodified.
Інші модулі серії [NAT]
Розробки студії [NAT] створені для оптимізації, автоматизації та прискорення інтернет-магазинів на OpenCart. Всі модулі серії [NAT] розроблені за стандартами безпечного коду та мають бездоганну сумісність. Разработки студии [NAT] созданы для оптимизации, автоматизации и ускорения интернет-магазинов на OpenCart. Все модули серии [NAT] разработаны по стандартам безопасного кода и имеют безупречную совместимость. Extensions by [NAT] studio are designed to optimize, automate, and accelerate OpenCart web stores. All [NAT] series modules are built according to secure coding standards and offer seamless compatibility.
Database Optimizer [NAT]
Image Optimizer [NAT]
Catalog Optimizer [NAT]
Domain Scanner [NAT]
Easy Import/Export [NAT]
Admin Tools [NAT]
Poll Widget [NAT]
New Arrivals [NAT]
Order UTM-Tracker [NAT]
Всі наші модулі на торгових майданчиках
Перегляньте повний список наших рішень для OpenCart на офіційних майданчиках. Регулярні оновлення та професійна технічна підтримка студії [NAT]. Посмотрите полный список наших решений для OpenCart на официальных площадках. Регулярные обновления и профессиональная техническая поддержка студии [NAT]. Check the full catalog of our OpenCart extensions on the official marketplaces. Regular updates and professional tech support from [NAT] studio.
Підтримка та зворотній зв'язок
Якщо у вас виникли запитання, потрібна допомога в установці чи додаткові функції, будь ласка, звертайтесь на нашу електронну пошту:
Если у вас возникли вопросы, нужна помощь в установке или доработке модуля, пожалуйста, обращайтесь на нашу электронную почту:
If you have any questions, need installation assistance or custom modifications, please contact us via email:
info@nat.od.ua