OcBox Image Pro — WebP-конвертер для OpenCart і ocStore, водяні знаки, ImageMagick, MD5-анонімізатор фото товарів

OcBox Image Pro — WebP, ImageMagick, водяний знак і MD5-анонімізатор у одному модулі

Сторінки сайту вантажить картинки повільно? Google PageSpeed скаржиться на «Serve images in next-gen formats»? Конкуренти крадуть фото з вашого каталогу через прямі URL? Платформа віддає JPEG за 200 КБ замість WebP за 40 КБ? Photoshop-и фото з watermark по 1000 разів вручну?

OcBox Image Pro вирішує всі ці проблеми одним модулем без втручання в шаблон, без зміни URL картинок і без правок twig-файлів.

Головна ідея — зробити зображення вашого магазину максимально якісними, замінивши базову PHP-бібліотеку GD (з якою працює OpenCart за замовчуванням) на ImageMagick. Що це означає для вас: коли OpenCart робить мініатюру з вашого фото 4000×3000 для каталогу — стандартна GD знижує якість, з’являються артефакти, розмиваються деталі. ImageMagick робить це професійно, з мінімальними втратами якості при стисненні — товар на сайті виглядає так само добре, як на оригінальному фото від фотографа.

А також ми автоматично конвертуємо всі картинки сайту у WebP — щоб Google любив ваш магазин. WebP — сучасний формат який важить у 2-3 рази менше ніж JPEG при тій же якості. Сторінки вантажаться швидше, Core Web Vitals зеленіють, позиції в пошуку ростуть. І все це — без правок шаблону, без втручання в код тем, без болю.

Beta-версія 0.9
Це бета-версія 0.9. Основне (швидкість, WebP, якість картинок, захист від крадіжок фото) — працює стабільно. Візуальний конструктор водяного знаку і кнопка масової перегенерації кешу — на фінальній стадії і будуть у найближчих оновленнях, безкоштовно для тих хто купив на бета-етапі. Ціна $15 — стартова знижка для тих хто бере зараз. Після релізу 1.0 ціна підніметься. Пишіть в особисті — будемо вдячні за відгуки.

Що ви отримуєте — повний перелік

Усі функції модуля з поясненням, які болі магазину вони закривають. Кожна функція — реальний код, а не маркетинг.

✓ Автоматичний WebP без правок шаблону
Модуль показує сучасним браузерам WebP замість JPEG/PNG автоматично. Картинки важать у 2-3 рази менше при тій же якості — сторінки летять, Google любить, Core Web Vitals у зеленому. Старі браузери і ваша адмінка бачать звичайні JPEG, тому нічого не ламається. Шаблон чіпати не треба — вмикаєте і працює.
⚠ Без цього: повільні сторінки, скарги Google PageSpeed, втрата позицій у мобайлі.

✓ MD5-анонімізатор — захист від злодіїв фото
Замість iphone-15-pro.jpg ваші фото лежать як 3a7f8b2.jpg. Конкурент уже не може за 5 хвилин скачати весь каталог скриптом — імена непередбачувані. Захищає авторські фото від парсингу і копіювання за прямими посиланнями.
⚠ Без цього: ви заплатили фотографу $1000-3000, конкурент за вечір качає всі фото і використовує безкоштовно.

✓ ImageMagick замість стандартної PHP GD
OpenCart за замовчуванням ріже фото бібліотекою GD — швидко, але якість страждає, з’являються артефакти, розмиті деталі. Ми ставимо ImageMagick — професійний рушій який використовують Adobe, Shopify, eBay. Мініатюра 300×300 з оригіналу 4000×3000 виглядає різко і чисто.
⚠ Без цього: фото товарів виглядають гірше ніж є насправді — мутні мініатюри відштовхують покупця.

✓ Працює на будь-якому хостингу — від преміум до бюджетного
Модуль автоматично визначає що доступно на вашому сервері і вибирає найкращий варіант: повний ImageMagick (преміум хостинг — найшвидше), CLI-фолбек (середній хостинг — на 30% повільніше але якість та сама), або стандартна GD (бюджетний хостинг — теж працює). Не зависнете без WebP як з більшістю плагінів.
⚠ Без цього: купуєте плагін, ставите, а він не працює бо у вас «не той хостинг» — гроші на вітер.

✓ Майстер встановлення з автоперевіркою сервера
На першому кроці майстра модуль сам перевіряє ваш сервер: що встановлено, що ні, чи є доступ на запис у потрібні папки. Показує зелений/жовтий/червоний статус і пояснює простими словами що робити якщо щось не так. Не треба гуглити, не треба турбувати хостера — все наочно.
⚠ Без цього: ставите модуль і не розумієте чому він не працює, мучаєтесь годинами або кидаєте.

✓ Налаштування якості картинок під ваш магазин
Слайдери: якість JPEG, якість WebP, стиснення PNG. Хочете максимальну якість фото для ювелірного магазину — двигаєте вгору. Хочете максимально швидкий сайт для одягу — вниз. Перегенеруєте кеш одним кліком і дивитесь що краще для вас.
⚠ Без цього: дефолт OpenCart дає або занадто стиснені (видно артефакти), або занадто важкі файли — компромісу нема.

✓ Чіткіший ресайз великих фото
Коли ваше фото 4000×3000 ріжеться на мініатюру 300×300 — вибір алгоритму впливає на результат. Ми даємо 4 варіанти: «найгостріший», «швидкий», «компроміс», «м’якший для портретів». Один клік — переключилися, перегенерували кеш — побачили результат.
⚠ Без цього: товари з тонкими деталями (одяг, ювелірка, годинники, техніка) виглядають розмитими.

✓ Прибирання прихованих метаданих з фото
Фото з фотоапарата містять приховані дані: модель камери, налаштування, ICC color profile, і часто — GPS-координати місця зйомки! Якщо ваш фотограф знімав на складі — координати складу витікають у публічний доступ через ваші товари. Модуль вирізає це автоматично + економить 30-50 КБ на кожному фото.
⚠ Без цього: координати вашого складу/офісу публічні через будь-яке фото товару. Або просто зайва вага картинок.

✓ Поступове завантаження картинок (Progressive JPEG)
Замість «порожнього прямокутника поки фото не завантажиться» — на повільному мобільному інтернеті покупець бачить картинку відразу: спочатку розмиту, потім чіткіше. Психологічно сприймається як «сайт працює» замість «сайт глючить».
⚠ Без цього: на 3G/4G покупець бачить пусті прямокутники і йде з сайту думаючи що «знову лагає».

✓ Підвищення різкості після ресайзу
При сильному стисненні (фото 4000px → мініатюра 300px) деталі неминуче втрачаються. Slider «різкість» додає їх назад. Особливо помітно на товарах з тонкими деталями: тканини, фактури, гравірування, дрібні написи на упаковці.
⚠ Без цього: дрібні товари (ювелірка, годинники, біжутерія) у списку каталогу виглядають як замилені плями.

✓ Швидкий перший рендер сторінки
Перший раз коли картинка показується — вона має конвертуватись у WebP. Зазвичай це затримує сторінку. У нас конвертація відбувається у фоні після того як сторінка вже показалась — перший відвідувач не помічає затримки, наступні дістають готовий WebP миттєво.
⚠ Без цього: перший відвідувач після очистки кешу чекає зайвих півсекунди — і сприймає сайт як повільний.

✓ Візуальний конструктор водяного знаку — drag&drop
Замість того щоб задавати координати в пікселях («X=120, Y=340») і дивитись що вийшло — у нас на екрані ваше реальне фото товару, перетягуєте мишею знак на потрібне місце, налаштовуєте розмір/прозорість/нахил візуально. Як у Photoshop, тільки в адмінці OpenCart і одразу для всього каталогу.
⚠ Без цього: налаштовуєте знак у Photoshop і потім вручну ставите на 1000 фото = тиждень роботи.

✓ Водяний знак — картинка ABO текст
Завантажуєте PNG-логотип з прозорим фоном — або просто пишете текст (наприклад назва магазину, домен сайту) і вибираєте шрифт, розмір, колір, обводку.
⚠ Без цього: купуєте окремий watermark-плагін за $15-30 додатково.

✓ Водяний знак однаково виглядає на всіх розмірах
Налаштували один раз — модуль автоматично адаптує знак до кожного розміру мініатюри. На картці товару (800px) знак виглядає одного розміру, на мініатюрі в каталозі (300px) — пропорційно менший. Не псує макет.
⚠ Без цього: знак на 1200px нормальний, а на мініатюрі 300px займає пів-екрану і ламає каталог.

✓ Превью на реальному товарі
У конструкторі вибираєте з вашого каталогу конкретний товар (наприклад світле фото на білому фоні і темне на чорному) — і дивитесь як ваш знак буде виглядати. Перетягнули — оновилось миттєво. Так ви не помилитесь з кольором/позицією перш ніж залити на 5000 товарів.
⚠ Без цього: налаштували по одному прикладу, залили — і бачите що на чорному фоні ваш чорний знак не видно. А кеш уже згенерований.

✓ Водяний знак тільки на великих фото
У списку «схожих товарів» мініатюри 100×100. Знак на них все одно нечитабельний і тільки псує вигляд. Налаштовуєте мінімальний розмір для знаку (за замовчуванням 300×300) — менше цього розміру модуль не ставить знак. Картка товару отримує знак, дрібна іконка — ні.
⚠ Без цього: знак ліпиться на всі мініатюри, у списку «4 квадратики 100×100 з логотипом» покупець не розуміє що там за товари.

✓ Кілька наборів водяного знаку — для різних випадків
Один знак для звичайного каталогу (логотип у кутку), інший для розпродажу (текст «-30%» по центру), третій без знаку для категорії «B2B партнерам». Перемикаєте налаштування одним кліком — не треба переналаштовувати все наново.
⚠ Без цього: під кожну акцію переналаштовуєте знак з нуля і повертаєтесь — кожен раз півгодини.

✓ Знак тільки на фото товарів, не на категоріях/виробниках
Логотип Apple на фото iPhone — порушення авторських прав. Ваш знак на банері «Електроніка» — виглядає як хакерство. Модуль ставить знак ТІЛЬКИ на фото товарів, інші категорії картинок (банери, лого виробників, категорії) залишаються чистими.
⚠ Без цього: знак на лого виробника = претензії від правовласників.

✓ В адмінці бачите чисті фото без знаку
Коли ви редагуєте товар — бачите оригінальне фото без водяного знаку. Знак з’являється тільки на сайті для покупців. Не плутає вас при роботі.
⚠ Без цього: працюєте в адмінці і весь час дивитесь на свій же знак на власних фото — зайвий візуальний шум.

✓ Кнопка «Перегенерувати весь кеш»
Змінили налаштування якості або водяний знак — і хочете щоб всі картинки одразу оновилися без чекання. Натискаєте кнопку, бачите прогрес-бар, чекаєте — і весь каталог зі свіжим кешем. Без цього перші відвідувачі тиждень дістають повільні рендери поки сайт сам прогенерує.
⚠ Без цього: змінили якість — і протягом тижня перші відвідувачі сторінок дістають повільні рендери через регенерацію кешу.

✓ Виключення певних шляхів з обробки
Не хочете щоб модуль чіпав банери головної сторінки або платіжні логотипи? Вкажіть ці шляхи у налаштуваннях — модуль їх обходить. Інша частина сайту обробляється як завжди.
⚠ Без цього: WebP-підміна зачіпає банери і платіжні іконки, ламаючи дизайн сторінок.

✓ Безпечне видалення з відновленням оригіналів
Якщо передумали — модуль чисто видаляється: повертає OpenCart до стандартної логіки роботи з картинками, чистить кеш, відновлює оригінальний код. Жодних хвостів у базі або файлах. Ризику зламати магазин нема.
⚠ Без цього: дешеві модулі лишають хвости після видалення — потім тижнями шукаєте у логах причини глюків.

Сумісність та системні вимоги

• OpenCart 3.x та ocStore 3.x. OC 2.3 — у роадмапі (форк image_pro_oc23/ після стабілізації 3.x)
• PHP 7.4 або вище (тестовано на 7.4, 8.1, 8.3)
• ionCube Loader 14 або вище — модуль закодований ionCube Encoder 15
• Один з трьох backends:
  • PRO: Imagick PECL extension (extension=imagick.so) — рекомендовано, найшвидше
  • STANDARD: ImageMagick CLI (convert) + cwebp — fallback, на 30-40% повільніше
  • MINIMAL: PHP GD з WebP-підтримкою — мінімум, нижча якість ресайзу
• Запис в image/cache/ і image/cache/webp/ (chmod 755 або 775)
• Працює з будь-яким шаблоном — модуль на рівні response.php і model/tool/image.php (НЕ правки twig)
• FreeType (для текстового watermark — Phase 5)

На форумі розміщено технічний ZIP з інструкцією. Інсталяційна збірка готується індивідуально: напишіть в особисті повідомлення, вкажіть домен, версію PHP, ionCube Loader та версію OpenCart.

ionCube Loader — зверніть увагу!
Модуль закодований ionCube Encoder 15. Для роботи потрібен ionCube Loader версії 14 або вище. Якщо у вас на хостингу встановлений Loader 13.x або нижче — модуль не запуститься. Перевірити версію: php -m | grep ionCube або через phpinfo(). Якщо потрібна версія для старого Loader'а — пишіть в особисті, зробимо легасі-збірку.

Можливі конфлікти і як їх обійти

OcBox Image Pro вбудовується в OpenCart через два OCMOD'и: system/library/response.php (для WebP-підміни в HTML) і catalog/model/tool/image.php (для MD5 + WebP dual-write).

Можливі конфлікти і їх вирішення:

• OCMOD'и шаблонів — деякі преміум-шаблони (наприклад UpStore, CyberStore у певних версіях) самі переписують response.php чи додають свою image-логіку. Якщо після встановлення Image Pro картинки не показуються або сторінка біла — тимчасово вимкніть OCMOD шаблону через Розширення → Модифікації → Disable, перезавантажте кеш OpenCart і кеш браузера.
• Jet Cache (Jet Cache та подібні full-page cache модулі) — кешують HTML-вивід ДО того як наш OCMOD його обробить. Результат: WebP-підміна не працює, відвідувачі отримують стару кеш-версію з JPEG. Рішення — або повністю вимкнути Jet Cache, або налаштувати його exclude pattern для image/cache/ URLs (якщо такий exclude підтримується). Краще зовсім вимкнути — Image Pro сам по собі дає кращу швидкість сторінок ніж full-page cache завдяки WebP.

Що робити при конфлікті: зайти в Розширення → Модифікації, вимкнути підозрілі OCMOD'и по черзі, кожен раз робити Refresh + чистити image/cache/, поки картинки не повернуться. Якщо самі не розібралися — пишіть в особисті повідомлення, допоможемо.

Регламент видачі файлів модуля

У робочі дні в робочий час файл модуля передається покупцеві протягом доби з моменту оплати, як правило менш ніж за годину. У вихідні дні та офіційні (державні) свята можливі затримки — модуль буде надісланий з настанням найближчого робочого дня. Дякуємо за розуміння.

Рекомендовані платні модулі OcBox

Smart Related $30 — пов’язані товари

SEO FAQ AI $30 — AI FAQ + Schema.org

AI Product Editor $40 — масове редагування

Image Pro $15 — WebP, водяний знак (beta)

Ми рекомендуємо шаблони від 29aleksey

Найкраще працює зі швидкими шаблонами. 29aleksey робить топові шаблони для OpenCart 2.3/3.0 з акцентом на швидкість і оптимізацію з коробки:

Prime	UpStore	CyberStore
Chameleon	LuxShop	NewStore