Product Image Gallery with Zoom for E-Commerce
Image gallery is main product study tool. Buyer cannot touch product, so gallery quality and functionality directly affect trust and conversion. Technically gallery is more than image set: it's large image management, load optimization, zoom without quality loss, and seamless touchscreen experience.
Image Formats and Processing
Store maximum resolution (2000–4000px long side), deliver needed size. Don't serve 5MB original on every page.
Processing pipeline on new image upload:
Upload original → S3 (originals/, private)
↓ Worker (libvips)
Generate variants:
- thumbnail: 100×100, JPEG 80%
- small: 400×400, JPEG 85%
- medium: 800×800, JPEG 90%
- large: 1600×1600, JPEG 95%
- webp: each variant in WebP (30-50% smaller)
↓
CDN (public bucket or Cloudflare Images)
libvips faster than ImageMagick 4–8x. For PHP use intervention/image with libvips driver, Node.js sharp.
Modern <picture> with WebP:
<picture>
<source srcset="product-800.webp" type="image/webp">
<img src="product-800.jpg" alt="Nike Air Max 90 — side view"
width="800" height="800" loading="lazy">
</picture>
Gallery Component Structure
Typical card layout: main slot (large image) + thumbnail strip below or left. Desktop — horizontal or vertical, mobile — swipe main slot.
function ProductGallery({ images, activeVariantImages }: Props) {
const [activeIndex, setActiveIndex] = useState(0);
const [isZoomed, setIsZoomed] = useState(false);
// Reset to first on variant change
useEffect(() => {
setActiveIndex(0);
}, [activeVariantImages]);
const allImages = [...activeVariantImages, ...images.filter(
img => !activeVariantImages.find(v => v.id === img.id)
)];
return (
<div className="gallery">
<MainSlot image={allImages[activeIndex]} onZoom={() => setIsZoomed(true)} />
<Thumbnails images={allImages} activeIndex={activeIndex} onSelect={setActiveIndex} />
{isZoomed && <LightboxOverlay images={allImages} startIndex={activeIndex} />}
</div>
);
}
Hover Zoom
Classic desktop: cursor hover shows magnified region. Implementation:
function useHoverZoom(containerRef: RefObject<HTMLDivElement>, scale = 2.5) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (e: MouseEvent) => {
const rect = containerRef.current!.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
setPosition({ x, y });
};
return { position, handlers: { onMouseMove: handleMouseMove } };
}
Zoom image 2–3x larger. Alternative: lens zoom — small lens shows magnified region in adjacent window.
Pinch-to-Zoom for Mobile
react-zoom-pan-pinch library:
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
<TransformWrapper minScale={1} maxScale={4} doubleClick={{ mode: 'zoomIn' }}>
<TransformComponent>
<img src={largeImageUrl} alt={alt} />
</TransformComponent>
</TransformWrapper>
When zoomed horizontally swipe disabled, on scale=1 allowed again.
Lightbox
On click open modal/lightbox fullscreen. Requirements:
- Close by Escape and click outside
- Arrow keys to switch (Left/Right)
- Swipe on mobile
- Preview buttons below
- URL unchanged (or hash:
#image-3)
yet-another-react-lightbox or PhotoSwipe (5kb, excellent mobile support).
Progressive Image Loading
Cannot load all gallery images at once. Strategy:
-
First image —
loading="eager",fetchpriority="high", preload in<head> - Thumbnails — small files, load all (they're small)
-
Other large images —
loading="lazy"or load on thumbnail select
function loadImageOnDemand(index: number, images: GalleryImage[]) {
if (loadedIndexes.has(index)) return;
const img = new Image();
img.src = images[index].largeUrl;
img.onload = () => setLoadedIndexes(prev => new Set([...prev, index]));
}
Prefetch N-1 and N+1 neighbors.
Video in Gallery
Many stores add review video directly in gallery — between images. Thumbnail — keyframe with play icon. On select video loads lazily (<video preload="none">).
Formats: MP4/H.264 (max compatibility) + WebM/VP9 (smaller). Autoplay only muted.
<video controls preload="none" poster="poster.jpg">
<source src="review.webm" type="video/webm">
<source src="review.mp4" type="video/mp4">
</video>
Images Per Variant
Each variant (color) has own image set. On select:
- Gallery switches to variant images
- Smooth animation (crossfade or slide)
- Selected variant thumbnail highlighted
In DB: product_images (id, product_id, variant_id, url, sort_order). variant_id IS NULL — common for all.
Timeline
- Basic gallery (slider + thumbnails + lazy load): 3–5 days
- With hover-zoom and lightbox: 1–1.5 weeks
- With pinch-to-zoom, video, variant images: 2–3 weeks
- Pipeline for preview generation (libvips + S3 + CDN): +1 week