На телефоне покупатель не может пощупать товар — единственное, что у него есть, это ваши фотографии. Он листает их большим пальцем, увеличивает, чтобы рассмотреть материал, ищет видео, чтобы понять масштаб. Если галерея тормозит, не листается свайпом или не даёт приблизить деталь, доверие падает, и человек уходит. А ведь больше половины трафика магазина сегодня — мобильный.
В этой статье разберём, как собрать удобную и быструю мобильную галерею товара на 1С-Битрикс: свайпы без конфликтов, зум под палец, видео и 360°, лёгкие изображения и ленивую загрузку. Всё это влияет не только на конверсию, но и на скорость, поэтому мобильная галерея — тот случай, где UX и SEO работают заодно, а качественная подготовка данных опирается на настроенную автоматизацию на 1С.
Коротко
- Мобильная галерея — главный способ «пощупать» товар онлайн, от неё напрямую зависит конверсия.
- Свайпы должны листать фото, не мешая скроллу страницы; зум — по тапу и щипку, а не наведением.
- Видео и 360° повышают доверие, но грузятся только по тапу и с лёгким превью.
- Вес изображений (WebP/AVIF, ленивая загрузка) определяет скорость и Core Web Vitals.
Почему мобильная галерея решает
Карточка товара на мобильном — это в первую очередь галерея. Она занимает первый экран, на неё смотрят раньше, чем на описание и характеристики, и именно по фото покупатель составляет первое впечатление. Если галерея неудобная, всё остальное содержание карточки уже вторично — человек не дошёл до него.
При этом мобильный контекст жёстче десктопного: маленький экран, палец вместо точного курсора, часто медленный интернет и ограниченный трафик. Галерея, отлично работающая на десктопе, на телефоне может проваливаться. Поэтому мобильную версию проектируют не «по остаточному принципу», а как основную — так же, как весь адаптивный шаблон магазина.
Свайпы: как листать правильно
Свайп — базовый жест мобильной галереи, и именно на нём чаще всего спотыкаются. Проблема в конфликтах: горизонтальный свайп по фото не должен запускать навигацию «назад» в браузере, а попытка пролистать карточку вниз не должна застревать на галерее.
- Горизонталь — фото, вертикаль — страница. Галерея распознаёт направление жеста и отдаёт вертикальный скролл странице.
- Индикатор позиции. Точки или счётчик «3 из 7» показывают, сколько ещё кадров впереди.
- Плавная анимация. Листание с инерцией и «прилипанием» к кадру ощущается естественно.
- Без конфликта с системным жестом. Свайп от края экрана оставляют браузеру, чтобы не ломать «назад».
Хороший индикатор количества фото важен психологически: покупатель видит, что кадров много, и охотнее их листает. Пустая галерея без индикатора кажется бедной, даже если фото на самом деле несколько.
Зум под палец, а не под мышь
На десктопе зум делают наведением: навёл курсор — увидел деталь крупно. На мобильном это не работает — там нет курсора. Мобильный зум строится на тач-жестах, и без него карточка выглядит недоделанной, ведь рассмотреть материал или разъём вблизи покупатель не может.
- Зум по двойному тапу. Быстрый способ приблизить центр кадра одним жестом.
- Щипок для масштаба. Pinch-to-zoom для плавного увеличения и перемещения по фото.
- Версия повыше для зума. При увеличении подгружается более детальное изображение, иначе виден «мыльный» апскейл.
- Полноэкранный режим. Тап по фото открывает его на весь экран для детального осмотра.
Видео в галерее товара
Видео — самый сильный элемент доверия после реальных фото. Товар в движении снимает сомнения, которые не закрывают статичные кадры: как выглядит вживую, какой масштаб, как работает механизм. Но на мобильном видео легко превратить из плюса в тормоз.
- Только по тапу. Никакого автозапуска со звуком — это раздражает и съедает трафик.
- Лёгкое превью. Вместо тяжёлого плеера сразу грузится картинка-обложка с кнопкой play.
- Отложенная загрузка. Сам плеер и видео подгружаются, только когда покупатель решил смотреть.
- Понятная иконка. В ленте галереи видео помечено значком play, чтобы его находили.
Правильно встроенное видео заметно повышает конверсию, особенно в категориях, где важны размер и работа изделия. Главное — не грузить его заранее: на мобильном это первое, что убивает скорость карточки.
Обзор 360° и когда он нужен
Обзор 360° создаёт эффект вращения товара: покупатель водит пальцем и осматривает изделие со всех сторон. Технически это набор кадров, которые листаются по горизонтальному жесту. Инструмент мощный, но уместен не везде.
360° оправдан там, где важна форма и детали со всех ракурсов: техника, мебель, автозапчасти, инструмент. Для многих категорий достаточно хорошей галереи и видео, а вращение только утяжелит карточку. Если внедрять 360°, кадры обязательно оптимизируют по весу — иначе на мобильном интернете эффект вращения будет собираться мучительно долго, и покупатель до него не дождётся.
Вес изображений и форматы
Скорость мобильной галереи на 80% определяется весом изображений. Тяжёлые фото — главная причина медленной карточки, и решается это в первую очередь форматами и сжатием.
| Приём | Что даёт | Нюанс |
|---|---|---|
| WebP / AVIF | Меньший вес при том же качестве | Нужен JPEG-фолбэк для старых браузеров |
| Адаптивные размеры | Телефон грузит фото под свой экран | Готовятся несколько версий (srcset) |
| Сжатие | Убирает лишний вес без видимой потери | Пережать оригиналы из 1С под веб |
| Указанные размеры | Нет «прыжков» вёрстки при загрузке | Задать width/height у изображений |
1С-Битрикс умеет отдавать современные форматы и генерировать адаптивные версии изображений. Важно, чтобы в галерею не попадали многомегабайтные оригиналы: под каждый экран отдаётся своя лёгкая версия, а не один тяжёлый файл на всех.
Ленивая загрузка и приоритеты
Не все фото галереи нужны сразу. Покупатель видит первый кадр, а остальные листает позже — или не листает вовсе. Поэтому изображения грузят по приоритету, а не все разом.
- Первый кадр — приоритетно. Главное фото грузится сразу и без ленивой загрузки, оно формирует LCP.
- Остальные — лениво. Следующие кадры подгружаются по мере листания, экономя трафик и время.
- Превью-заглушки. Пока фото грузится, показывается лёгкий плейсхолдер, а не пустота.
- Предзагрузка соседнего. Следующий по ходу листания кадр можно готовить заранее для плавности.
Такой подход даёт быстрый первый экран и экономный расход трафика. Покупатель видит товар мгновенно, а остальные кадры подтягиваются незаметно, когда он до них добирается.
Галерея и Core Web Vitals
Изображения товара — обычно самый тяжёлый элемент карточки, поэтому именно галерея определяет ключевые метрики скорости. Главное фото чаще всего и есть тот самый крупный элемент, по которому измеряется LCP, а «прыжки» вёрстки при загрузке фото портят CLS.
Оптимизированная галерея одновременно улучшает и UX, и позиции в поиске: быстрый первый экран, отсутствие сдвигов, лёгкие форматы. Это редкий случай, когда удобство пользователя и требования поисковика совпадают полностью. Системно скорость витрины — большая тема; вопросы устойчивости сайта под нагрузкой мы разбираем в статье про инфраструктуру и BitrixVM, а автоматизацию сборки и выкладки оптимизированных ассетов — в материале про CI/CD и деплой на Битрикс.
Фото из 1С и подготовка под веб
Изображения товаров либо приходят обменом из 1С вместе с номенклатурой, либо загружаются отдельно в инфоблок на сайте. В обоих случаях частая проблема — тяжёлые оригиналы: из учётной системы нередко приезжают фото на несколько мегабайт, снятые «для каталога», а не для веба.
Чтобы галерея оставалась быстрой, подготовку изображений автоматизируют:
- Автогенерация превью. Из оригинала создаются лёгкие версии под галерею, миниатюры и зум.
- Пережатие под веб. Оригиналы приводятся к разумному весу и современному формату.
- Контроль размеров. Слишком большие или битые файлы отсеиваются на входе.
- Стабильная привязка. Фото не «отваливаются» от товара при очередном обмене.
Когда подготовка изображений встроена в обмен и работу инфоблоков, в галерею не попадают тяжёлые файлы, а фото стабильно держатся за товарами. Навести порядок здесь помогает аудит и оптимизация 1С: он выявляет, где обмен тянет лишний вес и почему картинки периодически теряются.
Доступность и жесты
Галерея должна работать не только пальцем, но и для тех, кто пользуется вспомогательными технологиями. Это и требование доступности, и просто признак качественной реализации.
- Альтернативный текст. У изображений заполнен alt, описывающий, что на фото.
- Управление не только жестом. Листать можно и кнопками-стрелками, не только свайпом.
- Фокус и клавиатура. Элементы галереи доступны с клавиатуры на устройствах, где она есть.
- Понятные состояния. Видно, какой кадр активен и сколько их всего.
Доступная галерея заодно лучше индексируется и понятнее ведёт себя в пограничных ситуациях — при медленной сети, отключённых скриптах, необычных устройствах.
Реализация в 1С-Битрикс
Сборка мобильной галереи в 1С-Битрикс идёт поверх адаптивного шаблона и компонентов каталога. Общая последовательность такая:
- Адаптивный шаблон карточки. Галерея проектируется под мобильный экран как основной, а не как «уменьшенный десктоп».
- Подготовка изображений. Настраивается автогенерация лёгких версий и современных форматов из оригиналов.
- Свайпы и зум. Подключается тач-логика листания и увеличения без конфликтов со скроллом.
- Видео и 360°. Добавляются по тапу, с лёгким превью и отложенной загрузкой.
- Ленивая загрузка. Первый кадр приоритетно, остальные — по мере листания.
- Проверка скорости. Замеряются Core Web Vitals на реальных телефонах и сетях.
Для проектов, где важна максимальная скорость и PWA-подача, часть логики выносят в кастомную разработку поверх штатных компонентов. При этом критично, чтобы оптимизированные ассеты стабильно доезжали до боевого сервера, — этим занимается настроенный процесс выкладки, о котором мы писали в материале про CI/CD на Битрикс.
Частые ошибки
- Тяжёлые оригиналы в галерее. Многомегабайтные фото из 1С грузятся вечность на мобильном интернете.
- Зум как на десктопе. Наведение вместо тапа и щипка — на телефоне не работает вовсе.
- Свайп ломает навигацию. Жест по фото запускает «назад» в браузере или застревает на скролле.
- Автозапуск видео. Видео грузится и играет само — тормозит карточку и злит пользователя.
- Нет ленивой загрузки. Все кадры грузятся разом, первый экран открывается медленно.
- Прыжки вёрстки. У изображений не заданы размеры, при загрузке всё «скачет» — плохой CLS.
- Мыльный зум. Для увеличения нет версии повыше, деталь превращается в размытие.
- Пустая галерея. Одно фото без индикатора и дополнений выглядит бедно и снижает доверие.
Чек-лист внедрения
- Адаптив как основа. Галерея спроектирована под мобильный экран, а не уменьшена с десктопа.
- Лёгкие форматы. WebP/AVIF с JPEG-фолбэком, адаптивные версии под экран.
- Свайпы без конфликтов. Горизонталь листает фото, вертикаль скроллит страницу, есть индикатор.
- Зум под палец. Двойной тап и щипок, отдельная версия повыше для деталей.
- Видео по тапу. Лёгкое превью, отложенная загрузка, значок play.
- Ленивая загрузка. Первый кадр приоритетно, остальные по мере листания.
- Подготовка из 1С. Автогенерация превью, пережатие оригиналов, стабильная привязка фото.
- Скорость проверена. Core Web Vitals замерены на реальных телефонах и сетях.
Вывод
Мобильная галерея — это витрина товара в кармане покупателя и его единственный способ «пощупать» вещь онлайн. Свайпы без конфликтов, зум под палец, видео и 360°, лёгкие изображения и ленивая загрузка превращают карточку в убедительный инструмент продаж. И всё это влияет не только на конверсию, но и на скорость: оптимизированная галерея одновременно улучшает и удобство, и позиции в поиске.
Проектируйте галерею под мобильный как основной сценарий, держите изображения лёгкими и подготовленными под веб, не грузите видео заранее — и карточка станет быстрой и убедительной там, где большинство ваших покупателей и принимают решение. Это одна из самых окупаемых доработок магазина на 1С-Битрикс.
