Le zoom sur les images produit est une des rares fonctions dont l’absence se remarque immédiatement. Un client qui veut vérifier une texture, une finition ou une inscription et qui ne peut pas agrandir considère qu’on lui cache quelque chose.
La résolution source, condition préalable
Aucune fonction de zoom ne peut créer du détail qui n’existe pas dans le fichier. C’est la première vérification, et elle disqualifie souvent le projet avant de commencer.
La règle : votre image source doit faire deux à trois fois la taille d’affichage maximale. Si votre galerie affiche l’image à 600 pixels de large, la source doit faire entre 1200 et 1800 pixels. Pour un zoom confortable sur du détail, visez 2000 pixels sur le grand côté.
Un contrôle rapide : ouvrez une image produit dans un nouvel onglet et regardez sa taille réelle. Sur beaucoup de boutiques, les visuels ont été redimensionnés à l’import et plafonnent à 800 pixels, ce qui interdit tout zoom utile.
Point important : agrandir une image de 800 pixels par un traitement logiciel ne restitue aucun détail. Le résultat paraît flou et produit l’effet inverse de celui recherché. Si vos sources sont insuffisantes, le chantier commence par la photo, pas par le module.
Les trois comportements
La loupe au survol. Un carré de zoom suit le curseur, l’agrandissement s’affiche à côté ou par-dessus. Comportement classique sur desktop, efficace pour l’inspection rapide d’une zone.
Le plein écran au clic. L’image s’ouvre en superposition, avec navigation entre les visuels et possibilité d’agrandir davantage. C’est le comportement le plus complet et le plus universel.
Le pincement sur mobile. Le geste naturel sur écran tactile. Il doit fonctionner à l’intérieur de la vue plein écran, jamais sur la page entière.
La combinaison qui fonctionne : loupe au survol sur desktop, ouverture plein écran au clic sur les deux formats, pincement disponible dans le plein écran.
Galerie Produit PrestaShop — Zoom HD, Plein Écran & Filtre VariantesGalerie produit nouvelle génération : zoom HD, vignettes verticales, plein écran mobile avec pincement et filtrage des images par déclinaison.€69.00
Le point critique sur mobile
C’est l’erreur d’implémentation la plus fréquente et la plus pénalisante.
Si le composant de zoom capte les gestes tactiles sur la galerie affichée dans le flux de la page, il entre en conflit avec le défilement : le visiteur qui veut faire défiler la page reste bloqué sur l’image.
Le comportement correct : dans le flux de la page, la galerie se parcourt par glissement horizontal et le défilement vertical reste libre. Le zoom ne s’active qu’après ouverture explicite du plein écran, par un appui sur l’image ou sur une icône dédiée.
Deuxième point : la fermeture du plein écran doit être évidente, avec une croix visible et le geste de balayage vers le bas, qui est devenu un standard.
Le chargement différé de la haute définition
Charger une image de 2000 pixels sur chaque fiche produit pour un visiteur qui ne zoomera jamais est un gaspillage de bande passante, et cela dégrade vos indicateurs de performance.
La bonne architecture repose sur deux fichiers par visuel. Une version d’affichage, dimensionnée pour la galerie, chargée immédiatement. Et une version haute définition, chargée seulement au déclenchement du zoom.
Deux précautions d’exécution. Prévoyez un indicateur de chargement pendant le téléchargement de la version haute définition : sur une connexion lente, deux secondes sans retour visuel donnent l’impression que rien ne se passe. Et préchargez l’image suivante quand le visiteur est en plein écran, pour que la navigation entre visuels reste fluide.
Le poids et le format
Une image de 2000 pixels en JPEG de qualité maximale peut peser plusieurs mégaoctets. Trois leviers pour la ramener à une taille raisonnable.
Les formats modernes, WebP et AVIF, réduisent le poids de 30 à 50 % à qualité perçue équivalente. Prévoyez un repli sur JPEG pour les navigateurs anciens.
La qualité de compression, autour de 80 à 85 %, où la différence visuelle devient imperceptible tandis que le poids chute nettement.
Le redimensionnement à la source : une photo de 6000 pixels sortie d’un appareil professionnel n’a aucun intérêt en ligne. Plafonnez à 2000 ou 2500 pixels au moment de l’import.
Ce qu’il ne faut pas faire
Le zoom sur une image trop petite. Mieux vaut ne pas proposer de zoom que d’ouvrir une version pixelisée. Prévoyez une détection : si la résolution est insuffisante, le zoom ne s’active pas.
Le zoom qui masque le bouton d’achat. Sur desktop, une loupe qui s’affiche à droite de l’image recouvre souvent la colonne de prix et d’ajout au panier. Le zoom doit rester dans la zone image ou en superposition modale.
Le clic droit désactivé. Certains modules bloquent le clic droit pour protéger les images. Cela n’empêche personne de les récupérer, gêne les usages légitimes, et dégrade l’accessibilité.
Le cas des images de détail
Sur certains catalogues, le zoom ne suffit pas et une photo dédiée est plus efficace.
Un gros plan de la couture sur un vêtement, de la connectique sur un appareil ou du grain sur un matériau apporte davantage qu’un agrandissement d’une photo d’ensemble, parce qu’il a été cadré et éclairé pour montrer ce détail.
Le repère : si vos clients posent régulièrement la même question sur un détail, ajoutez une photo plutôt que d’espérer que le zoom y réponde.
Le module Galerie Produit pour PrestaShop gère cette chaîne sur PrestaShop 8 et 9 : zoom haute définition avec chargement différé de la version agrandie, comportement plein écran adapté au tactile sans conflit avec le défilement, et désactivation automatique du zoom quand la résolution source est insuffisante.
