Массовая оптимизация изображений товаров для 1С-Битрикс, Tilda, OpenCart и InSales до <100 КБ
Массово сжимайте изображения товаров для 1С-Битрикс, Tilda, OpenCart, InSales и других систем управления интернет-магазинами. Конвертация в WebP и AVIF помогает уменьшить вес файлов, ускорить загрузку страниц и улучшить показатели LCP. Браузерный компрессор поддерживает JPEG, PNG, WebP и AVIF, а также сохраняет прозрачность изображений.
Требования
- Резервное копирование оригиналов: Перед обработкой сохраните отдельную папку с исходными изображениями. Для 1С-Битрикс также рекомендуется создать резервную копию папки
/upload/и базы данных. - Сохранение размеров: Не меняйте ширину и высоту изображений без необходимости. Размеры должны соответствовать шаблону сайта, карточкам товаров и настройкам генерации миниатюр.
- Сохранение имён файлов: При массовой замене старайтесь сохранять исходные имена и структуру папок, чтобы не пришлось вручную обновлять ссылки.
- Примечание по кэшу: После загрузки новых файлов очистите кэш сайта, кэш изображений и CDN, если он используется.
Пошаговый процесс массового сжатия
| Шаг | Действие | Подробности |
|---|---|---|
| 1 | Подготовить исходные изображения | Выгрузите изображения товаров из административной панели, файлового менеджера, хостинга или папки сайта. Сохраните отдельную копию оригиналов. |
| 2 | Открыть инструмент компрессии | Перейдите на страницу Bulk Image Compressor. |
| 3 | Загрузить папку с изображениями | Перетащите папку с изображениями товаров, включая вложенные подпапки. Поддерживаются JPEG, PNG, WebP и AVIF. |
| 4 | Выбрать подходящий пресет | Используйте пресет Ecommerce или WordPress, если он подходит под размеры и тип изображений вашего каталога. |
| 5 | Выбрать форматы экспорта | Включите сравнение форматов и выберите WebP и AVIF. WebP подходит для большинства сайтов. AVIF можно использовать, если шаблон и CMS корректно его поддерживают. |
| 6 | Установить целевой размер | Переключитесь в режим Target Size и задайте предел 100 КБ. Для крупных фотографий товара можно использовать диапазон 100–200 КБ, если при 100 КБ заметно падает качество. |
| 7 | Проверить качество | Сравните исходное и сжатое изображение. Обратите внимание на мелкий текст, логотипы, градиенты, края товара и прозрачный фон. |
| 8 | Скачать готовые файлы | Скачайте изображения в ZIP-архиве. Проверьте, сохранились ли имена файлов и структура папок. |
| 9 | Загрузить изображения на сайт | Замените файлы через административную панель, файловый менеджер, FTP/SFTP, импорт товаров или собственный скрипт. |
| 10 | Очистить кэш | Очистите кэш CMS, кэш миниатюр и кэш CDN. В OpenCart может потребоваться очистка кэша изображений. В 1С-Битрикс очистите управляемый кэш. |
| 11 | Проверить результат | Откройте карточки товаров и убедитесь, что изображения загружаются, не искажаются и не вызывают смещения элементов страницы. |
| 12 | Проверить скорость | Используйте Яндекс Вебмастер, Lighthouse в Chrome или вкладку Network в инструментах разработчика. Сравните вес страницы, время загрузки изображений и показатель LCP. |
Основные советы для оптимальных результатов
- Используйте WebP как основной формат: Он хорошо поддерживается современными браузерами и подходит для большинства фотографий товаров.
- Проверяйте поддержку AVIF: AVIF часто даёт меньший размер файла, но некоторые старые шаблоны, модули импорта и системы обмена с 1С могут работать с ним некорректно.
- Сохраняйте прозрачность PNG: Для товаров на прозрачном фоне используйте WebP с альфа-каналом или оставляйте PNG, если результат конвертации выглядит хуже.
- Не уменьшайте все изображения до 100 КБ любой ценой: Для превью и небольших карточек обычно достаточно 30–100 КБ. Для крупных изображений товара допустим больший вес, если это необходимо для сохранения деталей.
- Не меняйте расширение вручную: Нельзя просто переименовать файл
.jpgв.webp. Файл нужно конвертировать, а затем обновить ссылки в CMS или шаблоне. - Сохраняйте исходные URL: Если страница уже получает трафик из поиска, лучше заменять файл по тому же адресу или настраивать корректную отдачу нового формата.
- Указывайте размеры изображений: Атрибуты ширины и высоты помогают браузеру заранее зарезервировать место и снижают смещение контента.
- Используйте SVG для логотипов и иконок: Простую графику лучше хранить в SVG, а не в PNG или JPEG.
Особенности популярных систем
- 1С-Битрикс: Изображения обычно хранятся в папке
/upload/. Перед массовой заменой создайте резервную копию файлов и базы данных. После загрузки очистите кэш и проверьте автоматически созданные миниатюры. - Tilda: Изображения чаще всего заменяются через карточки товаров и настройки блоков. После повторной загрузки адрес файла может измениться, поэтому проверьте все страницы каталога.
- OpenCart: Исходные изображения обычно находятся в
/image/catalog/. После замены очистите кэш изображений, чтобы система создала новые миниатюры. - InSales: Для небольшого каталога изображения можно заменить через административную панель. При большом количестве товаров удобнее использовать импорт или API.
- Самописные интернет-магазины: Уточните, где хранятся пути к изображениям, в базе данных или в файловой структуре. Перед заменой проверьте работу на тестовой копии сайта.
Типичные проблемы и их решения
- Артефакты на градиентах: Если появляются полосы или резкие переходы цвета, увеличьте качество или оставьте изображение в JPEG или PNG.
- Размытый текст на изображении: Повышайте качество или уменьшайте степень сжатия. Для баннеров с большим количеством текста лучше подготовить отдельную версию.
- Пропала прозрачность: Проверьте, что выбранный формат поддерживает альфа-канал. Используйте PNG или WebP с прозрачностью.
- Изображение не обновилось после загрузки: Очистите кэш CMS, браузера и CDN. Также проверьте, не используется ли старая миниатюра.
- После замены появились ошибки 404: Скорее всего, изменились имена файлов, расширения или пути. Верните исходную структуру или обновите ссылки в базе данных.
- CMS не принимает AVIF: Используйте WebP. Он поддерживается большим количеством модулей, шаблонов и систем импорта.
- Изображения выглядят нормально на компьютере, но размыты на телефоне: Проверьте исходное разрешение и настройки адаптивных изображений. Не загружайте слишком маленький файл для блока большой ширины.
- Слишком тяжёлые изображения высокого разрешения: Подготовьте отдельные версии для карточки товара, каталога, мобильных устройств и увеличенного просмотра.
Проверка SEO после оптимизации
- Проверьте, что изображения открываются по корректным адресам.
- Не удаляйте старые файлы до полной проверки новых.
- Сохраняйте понятные имена файлов.
- Проверьте alt-атрибуты в карточках товаров.
- Не загружайте один и тот же файл несколько раз под разными именами.
- Убедитесь, что папка с изображениями не закрыта от индексации.
- Проверьте, какой формат реально получает браузер.
- Следите за отсутствием ошибок 404 после массовой замены.
Используйте дополнительные инструменты
Другие инструменты для работы со скоростью сайта доступны на странице More Free Speed Tools от SimpleClickLab.
Массовое сжатие изображений помогает уменьшить вес каталога, ускорить открытие карточек товаров и снизить нагрузку на сервер. Главное правило при такой обработке: сначала сохранить оригиналы, затем проверить результат на нескольких страницах и только после этого заменять весь каталог.
?
FAQ
•Работает ли формат AVIF стабильно во всех основных браузерах для изображений товаров?
AVIF широко поддерживается в текущих версиях Chrome, Firefox, Edge и Safari на десктопах и мобильных устройствах, но для полной совместимости с устаревшими браузерами рекомендуется fallback на WebP или JPEG.
•Как откатить оптимизированные изображения, если качество сжатия неудовлетворительно?
Храните резервные копии оригинальных изображений до сжатия, затем при необходимости загрузите оригиналы обратно в Shopify/WooCommerce или на CDN для восстановления качества.
•Сохранится ли структура каталогов при перетаскивании вложенных папок в инструменте компрессии при экспорте?
Инструмент принимает вложенные папки для удобной загрузки, но экспортированный ZIP упаковывает изображения плоско; реорганизацию нужно делать вручную после скачивания.
•Когда следует выбирать JPEG вместо WebP или AVIF для изображений товаров в электронной коммерции?
Выбирайте JPEG, если фотографии товаров содержат сложные градиенты или возникают артефакты после сжатия WebP/AVIF; JPEG с MozJPEG обеспечивает хороший баланс качества и размера.
•Как проверить, что сжатие изображения улучшило показатель LCP в Core Web Vitals?
Запустите страницы продуктов снова через Google PageSpeed Insights или инструменты Web Vitals, чтобы увидеть более быстрое время Largest Contentful Paint, вызванное уменьшением размера файлов изображений.
Поделиться::