Comment optimiser le zoom sur les images produit ?

La réponse courte

Pour un zoom efficace :

• Résolution minimum : 2000x2000 pixels
• Desktop : Zoom au survol (hover)
• Mobile : Pinch-to-zoom (geste naturel)
• Option : Lightbox plein écran

Pourquoi le zoom est important

Le zoom permet aux clients d’examiner les détails comme ils le feraient en magasin :

• Texture des matériaux
• Qualité des finitions
• Détails de couture
• Étiquettes et certifications

Types de zoom

1. Zoom au survol (Hover zoom)

Le zoom s’active quand la souris survole l’image.

Avantages :

• Intuitif sur desktop
• Ne nécessite pas de clic
• Aperçu rapide

Implémentation :

.product-image {
  overflow: hidden;
}

.product-image img {
  transition: transform 0.3s ease;
}

.product-image:hover img {
  transform: scale(2);
}

2. Zoom en loupe

Une zone de zoom suit le curseur.

Avantages :

• Zoom ciblé
• Ne cache pas l’image originale
• Professionnel

3. Lightbox (plein écran)

Clic pour ouvrir l’image en plein écran.

Avantages :

• Vision maximale
• Fonctionne sur tous devices
• Navigation entre images

4. Pinch-to-zoom (mobile)

Geste de pincement pour zoomer.

Avantages :

• Geste naturel sur tactile
• Contrôle précis
• Standard mobile

Spécifications techniques

Résolution des images

Usage	Résolution minimum
Miniature	400x400 px
Image principale	1200x1200 px
Zoom	2000x2000 px
Ultra zoom	3000x3000 px

Format recommandé

Format : JPEG ou WebP
Qualité : 80-85%
Profil couleur : sRGB

Performance

Le zoom ne doit pas ralentir la page :

1. Chargement différé : L’image haute résolution se charge seulement quand nécessaire
2. Progressive JPEG : Affichage progressif pendant le chargement
3. CDN : Hébergement sur un réseau de distribution

Implémentation par device

Desktop

// Zoom au survol avec loupe
const zoomLevel = 2.5;
const container = document.querySelector('.zoom-container');
const img = container.querySelector('img');

container.addEventListener('mousemove', (e) => {
  const { left, top, width, height } = container.getBoundingClientRect();
  const x = (e.clientX - left) / width * 100;
  const y = (e.clientY - top) / height * 100;

  img.style.transformOrigin = `${x}% ${y}%`;
  img.style.transform = `scale(${zoomLevel})`;
});

container.addEventListener('mouseleave', () => {
  img.style.transform = 'scale(1)';
});

Mobile

<!-- Permettre le zoom natif -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<!-- Ou utiliser une librairie -->
<script src="pinch-zoom.min.js"></script>

Erreurs courantes

1. Images trop petites : Zoom flou, inutilisable
2. Zoom bloqué sur mobile : maximum-scale=1 empêche le zoom
3. Chargement de l’image HD au départ : Page lente
4. Pas de feedback visuel : L’utilisateur ne sait pas qu’il peut zoomer
5. Zoom trop sensible : Difficile à contrôler

Bonnes pratiques UX

Indiquer que le zoom est disponible

┌─────────────────────┐
│                     │
│     [Image]         │
│                     │
│        🔍           │  ← Icône de zoom
└─────────────────────┘
  Survolez pour zoomer

Sur mobile

┌─────────────────────┐
│                     │
│     [Image]         │
│                     │
│  Pincez pour zoomer │
└─────────────────────┘

Outils et plugins

Plateforme	Solution recommandée
Shopify	Magic Zoom, Photoswipe
WooCommerce	YITH Zoom Magnifier
Custom	Photoswipe, Lightbox2