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: Сучасні формати (WebP & SVG)
Налаштування інтеграції медіаформатів нового покоління безпосередньо у вітрину:
- Завантаження SVG/WebP: Дозволяє додавати ці файли через стандартний диспетчер файлів (Filemanager) у адмінці OpenCart.
- On-The-Fly WebP + Lazy Load: Динамічний перехоплювач. Замінює посилання на зображення
.jpg/.pngна.webpверсії безпосередньо при виведенні HTML покупцеві (якщо браузер підтримує WebP). Також автоматично підставляє атрибут відкладеного завантаженняloading="lazy". - Прогресивний Lazy Load: Додає красивий ефект "розмиття" (blur-up) при завантаженні товарів під час скролу сторінки.
- Заглушка битих картинок: Автоматично замінює неіснуючі файли на вибране зображення-заглушку, рятуючи сітку дизайну сайту.
Настройки интеграции медиаформатов нового поколения непосредственно на витрину:
- On-The-Fly WebP + Lazy Load: На лету меняет расширения изображений на
.webpв коде страницы и добавляет отложенную загрузку. Не затрагивает базу данных! - Прогрессивный Lazy Load: Эффект красивого размытия (blur-up) картинок при прокрутке.
- Заглушка битых ссылок: Подставляет красивое изображение вместо отсутствующих на сервере файлов.
Configs next-gen format delivery and frontend speed features:
- SVG/WebP Upload Support: Unlocks filemanager capabilities to select and 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:
| Назва інструменту | Опис та функціонал |
|---|---|
| PNG to JPG Converter | Знаходить великі важкі файли PNG (наприклад, фото товарів на білому фоні) та конвертує їх у JPG. Зменшує розмір файлу на 70-80%, автоматично оновлюючи шляхи в БД. Находит тяжелые файлы PNG (без прозрачности) и конвертирует их в JPG. Уменьшает размер файлов на 70-80% и обновляет БД. Detects large PNG images lacking alpha transparency channels and translates them to JPEGs, reducing file size by 70-80% while updating database references automatically. |
| Duplicates Cleaner | Порівнює MD5-хеші зображень на сервері. Якщо знайдено повні копії з різними іменами, залишає лише один файл, а всі посилання в БД перенаправляє на нього. Находит полные дубликаты файлов по MD5-хешу, удаляет лишние файлы и обновляет пути в базе данных на единый файл. Compares MD5 checksums of files on server. Merges exact byte duplicates, deletes duplicates, and rewires DB records to point to a single original image file. |
| Watermarks Rules | Створення динамічних правил накладання водяних знаків (текст чи зображення) на кеш картинок товарів, брендів чи категорій. Підтримує налаштування прозорості, кута нахилу та фільтрацію. Создание правил наложения водяных знаков (текст или картинка) на кэш. Поддерживает прозрачность, угол наклона, скругление и фильтрацию категорий/брендов. Manages dynamic watermarks overlay (text/image) on catalog cache. Supports opacity sliders, rotation angles, TTF font rendering, and category inclusion/exclusion limits. |
| Broken DB Scanner | Знаходить записи в БД, які посилаються на видалені файли. Дозволяє очистити лінки, вимкнути товари або підставити заглушки. Находит в базе данных ссылки на отсутствующие файлы. Позволяет убрать ссылки, отключить товары или установить заглушки. Finds database entries referencing missing files. Offers batch actions to clean references, disable products, or link placeholder placeholders. |
| Transliteration & Translit | Перейменовує файли з кирилицею або пробілами в іменах на безпечну транслітерацію, що запобігає збоям кодування на деяких хостингах. Переименовывает файлы, содержащие кириллицу или пробелы, переводя их в транслит, и обновляет пути к ним в базе данных. Finds and sanitizes filenames containing cyrillic or spaces. Renames them using safe transliteration and maps changes to the database. |
| CMYK Converter | Швидко конвертує колірний простір CMYK у sRGB, що попереджає ситуації, коли фото товарів не завантажуються або відображаються некоректно на iPhone чи Safari. Переводит изображения из цветового профиля CMYK в sRGB для корректного отображения картинок на устройствах Apple (iPhone, Safari). Converts files from CMYK to sRGB, preventing display failures on Safari browsers and Apple iOS devices. |
Автоматизація по 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