Загрузка и оптимизация фото товаров

Фотографии — половина продажи в интернет-магазине, но именно они чаще всего убивают скорость каталога. Разберём, как в 1С-Битрикс правильно загружать изображения товаров и торговых предложений и как готовить их так, чтобы карточка оставалась и красивой, и лёгкой.

Где в карточке живут изображения

У товара в информблоке каталога есть два системных поля картинки: анонс (PREVIEW_PICTURE) и детальная (DETAIL_PICTURE). Анонс обычно используется в списках и плитке каталога, детальная — в карточке. Но одной пары полей магазину почти всегда мало.

Для галереи используют дополнительное свойство типа «Файл» с включённым флагом «Множественное» — как правило оно называется MORE_PHOTO. Именно из него стандартный компонент catalog.element собирает слайдер миниатюр. Если товар торгуется через торговые предложения (SKU), то у каждого SKU есть свои PREVIEW_PICTURE, DETAIL_PICTURE и своё MORE_PHOTO — при выборе цвета/варианта галерея подменяется на фото конкретного предложения.

Подготовка исходников до загрузки

Битрикс умеет ресайзить, но не умеет улучшать плохой исходник. Поэтому базовую подготовку делают до загрузки в каталог:

• Единый размер по длинной стороне. Для большинства магазинов достаточно исходника 1500–2000 px по большей стороне — этого хватает и на зум, и на retina, и не раздувает диск.
• Единый фон и кадрирование. Одинаковые пропорции (например 1:1 или 3:4) избавляют каталог от «прыгающей» вёрстки и скачков CLS.
• Осмысленные имена файлов. koleso-r16-bridgestone.jpg вместо IMG_4821.jpg — это плюс к SEO и к порядку в /upload/.
• Формат исходника — JPEG для фото и PNG только там, где нужна прозрачность. Тяжёлый TIFF и CMYK-JPEG в веб не грузим.

Оптимизировать сам исходник до предела не нужно: Битрикс всё равно создаст из него уменьшенные копии. Задача исходника — быть чистым и достаточно крупным.

Способы загрузки: от одной штуки до тысяч

Выбор способа зависит от объёма:

При обмене с 1С фотографии приходят в подпапке выгрузки и привязываются к товарам по внешнему коду. Если картинки «не доезжают», почти всегда дело в размере архива, правах на /upload/1c_catalog/ или в том, что в 1С у номенклатуры просто не заполнено изображение.

Ресайз и кэш изображений

Показывать оригинал 2000 px в плитке каталога — прямой путь к медленному сайту. Битрикс формирует уменьшенные копии на лету функцией CFile::ResizeImageGet(), а в компонентах за это отвечает массив параметров arCustomProject и настройки вида: тип ресайза (BX_RESIZE_IMAGE_PROPORTIONAL, BX_RESIZE_IMAGE_EXACT), ширина и высота, качество JPEG.

• Готовые копии складываются в /upload/resize_cache/ и отдаются повторно без пересчёта.
• Для каждого места (плитка, карточка, слайдер, корзина) задавайте свой размер, а не один большой на всё.
• Качество 80–85 для JPEG визуально неотличимо от 100, но легче в полтора-два раза.

WebP, современные форматы и вес

Самый крупный выигрыш по весу даёт переход на WebP: он на 25–35% легче JPEG при том же качестве. В свежих версиях «1С-Битрикс: Управление сайтом» поддержка WebP включается в настройках, и платформа отдаёт WebP-версию превью браузерам, которые её понимают, с откатом на JPEG для старых.

Если штатной опции нет или нужен полный контроль, WebP-конвертацию выносят на уровень веб-сервера или CDN:

• модуль nginx с проверкой заголовка Accept: image/webp и подменой файла;
• серверная конвертация библиотеками Imagick/GD при генерации ресайза;
• внешний CDN-оптимизатор, который сам подбирает формат и качество под устройство.

Проверьте, что на сервере установлено GD или ImageMagick с поддержкой WebP (php -i | grep -i webp) — без этого конвертация молча не сработает.

Ленивая загрузка и вёрстка галереи

Мало сжать картинки — важно не грузить их все сразу. Приёмы, которые реально влияют на скорость каталога и на Core Web Vitals:

• Lazy loading. Атрибут loading="lazy" на изображениях вне первого экрана; первое фото карточки, наоборот, грузим сразу (loading="eager"), чтобы не портить LCP.
• Явные размеры. Указывайте width и height (или aspect-ratio в CSS) — это убирает скачки макета (CLS).
• Адаптивные картинки. srcset/sizes отдают мобильному маленькую копию, десктопу — крупную.
• Спрайты и SVG для иконок и меток, чтобы не плодить мелкие запросы.

В стандартных решениях Битрикс часть этого уже есть в шаблоне catalog, но на кастомных шаблонах ленивую загрузку и srcset обычно нужно дорабатывать руками в шаблоне компонента.

Alt, подписи и SEO изображений

У поля-файла в Битрикс есть ALT_TEXT и TITLE, а у свойства галереи — свои описания. Не оставляйте их пустыми:

• alt — краткое осмысленное описание («Смартфон Model X, чёрный, вид спереди»), помогает и SEO, и доступности;
• подписи в галерее уместны для сложных товаров (комплектация, схемы);
• единый шаблон alt можно генерировать из названия товара и свойства цвета — так поле не остаётся пустым при массовой загрузке.

Для поисковиков также полезно отдавать изображения в sitemap и не закрывать /upload/ от индексации в robots.txt, если картинки должны попадать в поиск по картинкам.

Итог

Рабочая схема простая: чистый исходник 1500–2000 px, хранение в DETAIL_PICTURE и множественном свойстве MORE_PHOTO, ресайз под каждое место показа с качеством 80–85, WebP, ленивая загрузка и заполненные alt. Тогда каталог остаётся и наглядным, и быстрым, и переживает обмен с 1С без потери фотографий.

Если у вас тысячи SKU, тяжёлые исходники из 1С и проседающие Core Web Vitals, мы в B2Bsite настраиваем конвейер изображений под ключ: правила ресайза и WebP, ленивую загрузку в шаблонах, корректный обмен картинками с 1С и ускорение каталога в целом. Приведём фото товаров в порядок так, чтобы это не мешало продажам, а помогало им.