Сергей Сорокин · Изображения в интернет-магазине
Как фотографии MAYLINA попадают в каталог, карточку и корзину
Обновлено
В магазине одежды MAYLINA фотографию загружают один раз. В каталоге она заполняет рамку, в карточке открывается крупнее, в корзине занимает небольшое место. Я настроил подготовку отдельных версий, чтобы для маленького фото не приходилось загружать большой файл, а при увеличении можно было рассмотреть вещь целиком.
Размер зависит от места на странице
На снимке каталога фотографии одежды стоят в одинаковых рамках. Чтобы заполнить рамку, страница скрывает часть кадра, которая в нее не помещается. Это не обрезка загруженного файла: при увеличении в карточке доступна отдельная версия с полным кадром.
Размеры для каталога и галереи я вынес в общий список. Им пользуются и обработка фотографий, и шаблоны страниц. Если меняется размер блока в макете, соответствующий размер файла можно проверить в одном месте. Для небольшого изображения в корзине тоже готовится своя версия.
Телефону тоже бывает нужна крупная версия
Ширина фотографии на странице и ширина файла в пикселях могут различаться. Например, на экране двойной плотности для блока шириной 300 пикселей нужна картинка шириной 600 пикселей. Это условный расчет; размеры блоков MAYLINA заданы в макете.
Для таких экранов я добавил версии 2×. Браузер получает варианты для обычной и двойной плотности и выбирает подходящий. Поэтому маленькому экрану телефона иногда нужен файл крупнее, чем можно ожидать по ширине страницы.
Если разрешения исходника недостаточно, обработчик не растягивает его до заданного размера и не подставляет оригинал вместо недостающей версии 2×. Растягивание изображения не добавит деталей ткани, поэтому разрешение фото стоит проверить до загрузки.
Фото из 1С и ручная загрузка проходят общую обработку
Фотографии поступают при обмене с 1С или при ручном добавлении через Битрикс. Я подключил обработчик к штатному сохранению файла: оба способа загрузки проходят через него. Прямое копирование в папку сайта в обход Битрикса обработчик не запускает.
Если длинная сторона поддерживаемого изображения превышает 4000 пикселей, обработчик уменьшает ее до 4000, сохраняя пропорции и учитывая записанную в файле ориентацию снимка. В условном примере кадр 6000 × 4000 станет примерно 4000 × 2667. Если длинная сторона не превышает 4000 пикселей, файл на этом этапе не пережимается.
После уменьшения Битрикс сохраняет полученный файл. Но для обработки сервер сначала читает исходник в память. Ограничение сохраняемого размера само по себе не защищает от нехватки памяти при обработке огромного файла.
Что показал замер PNG и WebP
28 июля 2026, перед запуском магазина, в тестовом каталоге использовались фотографии PNG. Фото 990 × 660 пикселей занимало 1151 КБ. WebP тех же размеров занял 81 КБ, примерно в 14 раз меньше. Для 8 фотографий товарной сетки сумма уменьшилась с 4239 до 415 КБ. PNG уже были уменьшены до нужных размеров, поэтому здесь сравнивались именно форматы.
Это замер файлов из тестового каталога. Он не означает, что весь магазин стал в 14 раз быстрее. На снимках выше другие фотографии, к ним эти числа не относятся.
WebP не всегда оказывается легче. Я добавил сравнение размеров файлов: если полученный WebP весит столько же или больше, сайт оставляет версию в исходном формате. После сжатия сравните фотографии: у одежды нужно смотреть на фактуру ткани, края изделия и мелкие детали.
Подготовьте фотографию для своего магазина
Выберите фотографию, задайте ширину блока на странице и плотность экрана. Сравните полный кадр и обрезку под рамку, измените качество и скачайте готовый файл. Обработка идет в вашем браузере; выбранный файл не отправляется на сервер.
Почему копии готовятся после обновления каталога
Если нужной версии еще нет, сайт может создать ее при открытии страницы. Тогда покупатель ждет и обработку фото. Чтобы подготовить копии заранее, я добавил запуск после успешного обмена с 1С. Он использует те же размеры и обработчики, что каталог и карточка.
После обмена обработчик готовит копии, пока не достигнет лимита времени или числа товаров. Для оставшихся фотографий и ручных изменений я предусмотрел фоновое задание. После большого импорта часть копий может быть еще не готова; удаленные из кеша версии тоже приходится создавать заново при открытии страницы.
Для замены фото я подключил удаление связанных WebP-копий при штатном удалении файла Битриксом. Новая фотография получает свои версии. Поэтому при проверке важно заменить фото у товара, для которого копии уже созданы.
Как проверить обработку на своем каталоге
До массовой загрузки возьмите несколько своих фотографий с разными пропорциями и разрешением. Для одежды полезны кадр изделия целиком и крупный план ткани. На них можно проверить, что остается видимым в рамке и какие детали сохраняются после сжатия.
Что подготовить для интеграции сайта с 1С
- Загрузите фото через обмен с 1С и вручную через Битрикс. Проверьте ориентацию и видимую часть кадра в каталоге, карточке и корзине.
- Откройте увеличение фотографии на телефоне и компьютере. Посмотрите, можно ли рассмотреть детали, ради которых покупатель увеличивает изображение.
- Замените фото у товара с уже подготовленными копиями. Проверьте, что во всех местах показана новая фотография, в том числе при выборе цвета.
- Попросите разработчика показать размеры загружаемых файлов и проверить время первого открытия товара после импорта. Если копии подготовлены заранее, время их создания не попадет в этот замер.
