Как оптимизировать изображения в OpenCart

Изображения — самая тяжёлая часть любой страницы. В интернет-магазине они занимают 60–80% всего объёма загружаемых данных. Оптимизация изображений даёт наибольший прирост скорости среди всех доработок.

Почему изображения тормозят сайт

Современные фотоаппараты и смартфоны создают изображения в原始ном разрешении — 3000–6000 пикселей по ширине и 3–10 МБ на файл. Для отображения на сайте достаточно 800–1200 пикселей и 100–300 КБ.

Пошаговая оптимизация

Шаг 1. Конвертируйте в WebP

WebP — формат изображений от Google, который даёт на 25–35% лучшее сжатие, чем JPEG, и полную прозрачность, как PNG. Установите модуль WebP для OpenCart, который автоматически конвертирует все изображения.

Шаг 2. Настройте lazy load

Lazy load (ленивая загрузка) — изображения загружаются только тогда, когда пользователь доскроллил до них. Это в 2–3 раза ускоряет начальную загрузку страницы. Большинство современных модулей кэша включают lazy load.

Шаг 3. Сожмите изображения

Используйте TinyPNG, Squoosh или аналоги для сжатия изображений перед загрузкой на сайт. Для автоматического сжатия при загрузке установите модуль сжатия изображений.

Шаг 4. Настройте правильные размеры

В OpenCart можно настроить размеры изображений для разных мест: категории, товары, доп. изображения. Укажите в админке: Система → Настройки → Изображения. Не ставьте размеры больше, чем нужно для отображения.

Шаг 5. Используйте CDN для изображений

Если у вас тысячи изображений — подключите CDN (например, QIWI CDN или imgix). Изображения будут загружаться с сервера, ближайшего к покупателю.

Рекомендации из практики

Как лучше: Используйте формат WebP — он даёт сжатие на 25-35% без потери качества. В OpenCart это можно настроить через модуль или на уровне хостинга.

Как не делать: Не загружайте оригиналы фотографий с камеры (3 000-5 000 px) напрямую в OpenCart. Стандартный размер для карточки товара — 800-1000 px по ширине.

Кейс из практики: Магазин загружал фото 4 000×3 000 px. После ресайза до 1 000 px и конвертации в WebP — страницы категорий стали весить 2.5 МБ вместо 15 МБ. Скорость загрузки выросла с 5 до 1.8 секунды.

По практике, оптимизация изображений даёт самый быстрый прирост скорости среди всех методов. Поможем оптимизировать изображения — закажите доработку

Рекомендуемые модули

Image Optimizer, WebP Converter, Lazy Load for OpenCart. Выбирайте модули с хорошими отзывами и регулярными обновлениями.

FAQ

WebP поддерживается всеми браузерами?

Да, Chrome, Firefox, Safari, Edge и Яндекс.Браузер поддерживают WebP. Старые версии Safari (< 14) не поддерживают — используйте fallback на JPEG/PNG.

Сколько можно сэкономить на трафике?

После полной оптимизации (WebP + lazy load + сжатие + CDN) — 60–80% трафика на изображения. Для магазина с 10 000 посетителей в день это сотни мегабайт в день.

Я занимаюсь разработкой на OpenCart с 2009 года, запустил больше 150 проектов. Через мои руки прошли магазины от маленьких витрин до каталогов на 50 000 товаров. Знаю CMS вдоль и поперёк: slow-логи MySQL, конфликты OCMOD-модификаторов, грабли с SEO URL. Если у вас есть вопрос — пишите, подскажу.

Итог

Оптимизация изображений — самый быстрый способ ускорить сайт. Конвертируйте в WebP, настройте lazy load, сжимайте перед загрузкой и используйте CDN для крупных каталогов. Подробнее про ускорение — PageSpeed Insights для OpenCart. А если нужна помощь — закажите ускорение магазина.

Из практики. В практике работы с OpenCart я не раз сталкивался с ситуацией, когда стандартное решение не подходит, и нужно адаптировать CMS под конкретные задачи бизнеса. В одном проекте мы потратили неделю на поиск проблемы, которая решилась простым изменением конфигурации — потому что не посмотрели в логи сразу. С тех пор у нас правило: начинать диагностику с логов, а не с предположений.

Как не надо. Не копируйте готовые решения из интернета без проверки совместимости с вашей версией OpenCart и установленными модулями. То, что сработало у другого владельца магазина, может сломать ваш сайт — особенно если у вас нестандартная сборка. Всегда делайте бэкап перед любыми изменениями.

Антон Баринов — разработчик интернет-магазинов на OpenCart с 2009 года, основатель opencart-cms.ru.