Привет, я Максим — веб-разработчик. Качественные фото товара — основа конверсии в e-commerce. Но одних фото мало — покупатель хочет рассмотреть детали: текстуру ткани, швы, мелкий текст на этикетке, фактуру камня в украшении. Функция zoom (увеличения при наведении или клике) решает эту задачу. Расскажу, как реализовать увеличение изображений на сайте технически и какие JS-библиотеки для этого использовать.

Зачем нужен zoom на фото товара

Без возможности приблизить фото покупатель не видит деталей. Для некоторых категорий это критично:

Ювелирные изделия — огранка камня, проба, застёжка.

Одежда — качество ткани, строчки, фурнитура.

Электроника — разъёмы, маркировка, комплектация.

Мебель — текстура дерева, обивка, фурнитура крупным планом.

Косметика — состав на упаковке, текстура средства.

По данным исследований, наличие zoom-функции повышает конверсию на 3–5% — покупатель чувствует себя увереннее, когда может «потрогать глазами».

Типы zoom-эффектов

Hover zoom (увеличение при наведении). Самый распространённый. При наведении курсора на фото справа (или поверх) появляется увеличенная область. Работает только на десктопе.

Click zoom (увеличение по клику). По клику фото открывается в увеличенном виде — в лайтбоксе или во весь экран. Работает и на десктопе, и на мобильных.

Pinch zoom (увеличение щипком). На мобильных устройствах — стандартный жест увеличения двумя пальцами. Нативное поведение браузера, но часто блокируется CSS. Нужно явно разрешать.

Inline zoom (встроенное увеличение). При наведении увеличенное изображение показывается прямо поверх основного фото, без отдельного окна. Компактно, но может перекрывать другие элементы.

Lens zoom. «Лупа» — круглая или квадратная область увеличения, которая следует за курсором. Классический эффект, знакомый по магазинам электроники.

JS-библиотеки для увеличения изображений

Drift

Лёгкая и современная библиотека для hover/click zoom. Весит ~6 КБ. Хорошая документация, простая интеграция.

Установка: `npm install drift-zoom`

Поддерживает inline zoom (поверх изображения) и отдельный контейнер для увеличенного фото. Работает с мобильными (по тапу).

ElevateZoom Plus

Классическая библиотека с множеством опций: inner zoom, lens zoom, tint zoom, window zoom. Подходит для магазинов с разнообразными требованиями.

Установка: через npm или CDN.

Имеет встроенную галерею: миниатюры под основным фото, клик по миниатюре меняет основное изображение + zoom.

Medium Zoom

Минималистичная библиотека, делающая zoom по клику в стиле Medium.com — фото плавно увеличивается до полного размера. Красиво, но не подходит для детального рассмотрения (нет наведения).

React Inner Image Zoom

Для проектов на React. Увеличение при наведении внутри контейнера (inline). Установка: `npm install react-inner-image-zoom`.

PhotoSwipe

Полноценная галерея с zoom, свайпом, лайтбоксом. Тяжелее Drift, но даёт максимум возможностей: галерея фото товара с зумом, навигация стрелками, свайп на мобильных.

Swiper + Zoom

Swiper.js (популярный слайдер) имеет встроенный zoom-модуль. Если у вас уже есть Swiper для галереи товара — zoom подключается одной настройкой:

zoom: {
  maxRatio: 3,
  minRatio: 1
}

Как реализовать zoom: практические рекомендации

Подготовка изображений

Для качественного zoom нужны фото высокого разрешения. Минимум 1500×1500 пикселей, лучше — 2000×2000 или больше. На странице показывается уменьшенная версия (600–800 px), а при zoom подгружается полноразмерная.

Важно: храните две версии каждого фото — display (для показа) и full (для zoom). Не грузите полноразмерное фото сразу — это убьёт скорость. Подгружайте его только при активации zoom (lazy load).

Формат: WebP для display-версии (меньший размер), JPEG для full-версии (максимальная совместимость). Можно и WebP для обоих — зависит от аудитории.

Десктоп

Hover zoom — стандарт для десктопной версии. При наведении курсора на основное фото — увеличенная область справа или поверх. Покупатель водит курсором по фото и рассматривает детали.

Размер увеличенного окна: обычно 300×300 или 400×400 пикселей. Коэффициент увеличения: 2x–3x от display-размера.

Мобильные устройства

На мобильном hover не работает — нет курсора. Варианты:

Tap to zoom — по тапу фото открывается в полном размере с возможностью pinch zoom (увеличение щипком).

Лайтбокс — по тапу фото открывается на весь экран, свайп между фото, pinch zoom для приближения.

Важно: не блокируйте стандартный pinch zoom на мобильных. Убедитесь, что в meta viewport нет `user-scalable=no` и `maximum-scale=1`.

Галерея фото товара

Типичная структура: основное фото (большое) + миниатюры под ним. Клик по миниатюре меняет основное фото. Zoom работает на основном фото.

На мобильном: горизонтальный свайп между фото. Свайп вверх/вниз — скролл страницы. Точки-индикаторы под фото.

Влияние на скорость загрузки

Zoom требует больших изображений, а большие изображения замедляют страницу. Как решить:

Lazy loading для zoom-версий. Полноразмерное фото загружается только при активации zoom (наведении курсора или тапе).

Прогрессивный JPEG. Фото отображается сначала в низком качестве, потом «проясняется». Пользователь видит картинку сразу, без ожидания.

CDN. Раздавайте изображения через CDN — быстрее загрузка, особенно для регионов.

Оптимизация размеров. Display: 600–800 px. Zoom: 1500–2000 px. Не грузите оригиналы с фотоаппарата на 5000 px.

Влияние на конверсию и LCP

Zoom может негативно повлиять на метрику LCP (Largest Contentful Paint), если основное фото товара загружается медленно. Решения:

Оптимизируйте основное фото (display-версия): WebP, сжатие, правильные размеры.

Используйте `loading="eager"` для основного фото (оно — LCP-элемент) и `loading="lazy"` для остальных.

Preload основного фото: `<link rel="preload" as="image" href="product-main.webp">`.

Ошибки

Zoom на маленьких фото. Если исходное фото 400×400 — при увеличении будут видны пиксели. Загружайте для zoom минимум 1500 px.

Zoom блокирует скролл. На мобильном покупатель пытается скроллить страницу, а вместо этого зумит фото. Разделяйте жесты: pinch = zoom, свайп вверх = скролл.

Нет zoom на мобильном. Половина вашей аудитории — мобильная. Если zoom работает только на десктопе — теряете конверсию.

Слишком медленная загрузка. Покупатель навёл курсор — и ждёт 3 секунды, пока загрузится полноразмерное фото. Используйте preload при наведении на миниатюру.

Мой совет

Если у вас интернет-магазин — zoom обязателен. Начните с Drift (лёгкая, современная) или Swiper с zoom-модулем (если уже используете Swiper). Подготовьте фото в двух размерах. На весь процесс — от силы один-два дня.

Нужна помощь с галереей товара — пишите.