Comment faire un zoom produit sans bibliothèque lourde ?

Le zoom sur les photos de produit est une fonctionnalité attendue, et sa mise en œuvre passe presque toujours par une bibliothèque installée sans réflexion, qui embarque un moteur d'animation, une gestion tactile complète, un carrousel et une galerie modale, pour un poids qui dépasse fréquemment celui de l'ensemble du reste de la page. Le zoom produit est pourtant un problème simple, que les navigateurs modernes savent traiter avec quelques lignes de style et un très petit script. La question mérite d'être posée parce qu'elle touche à la page la plus importante d'une boutique, celle qui décide de l'achat, et où chaque dixième de seconde de chargement se paie.

Ce que le zoom doit réellement permettre

Avant de choisir une solution, il faut savoir ce que le client cherche à faire. Sur un vêtement, il veut voir la texture du tissu et la finition des coutures. Sur un bijou, il veut apprécier un détail de quelques millimètres. Sur un appareil, il veut lire les inscriptions d'une plaque signalétique ou vérifier la présence d'un connecteur. Ces usages ont un point commun : ils supposent une image source de bonne définition et la possibilité de la parcourir. Ils ne supposent en revanche ni animation élaborée, ni effet de loupe sophistiqué, ni transition de trois cents millisecondes, éléments qui occupent pourtant l'essentiel du code des bibliothèques dédiées.

Le second besoin, plus rarement formulé, est la confiance. Un zoom qui fonctionne bien signale une boutique sérieuse, un zoom flou ou absent laisse penser que le vendeur a quelque chose à cacher. Cet effet est mesurable sur les taux de conversion des catégories où l'aspect du produit compte, textile, ameublement, décoration, artisanat. Il ne dépend pas de la sophistication technique du dispositif mais de la qualité de l'image agrandie, ce qui déplace complètement l'endroit où l'effort doit porter. Une photo nette de deux mille pixels affichée sans effet vaut infiniment mieux qu'une loupe animée sur une image de six cents pixels. Ce constat, banal une fois formulé, contredit l'ordre dans lequel les budgets sont habituellement dépensés sur ce sujet.

Le troisième point concerne le contexte de consultation. Une majorité des visites de fiches produit se fait sur téléphone, où le geste naturel est le pincement pour agrandir, pas le survol qui n'existe pas. Concevoir d'abord pour ce contexte, puis ajouter le confort du survol sur les écrans qui le permettent, produit un résultat bien meilleur que l'inverse. Cette hiérarchie éclaire également le choix des données à fournir, comme nous l'évoquons à propos des données structurées d'une fiche produit, où l'image occupe une place déterminante. Une image de qualité suffisante sert d'ailleurs à la fois la fiche, le flux vers les comparateurs et l'aperçu de partage, ce qui répartit son coût sur plusieurs usages.

Ce que coûte une bibliothèque de zoom

Une bibliothèque complète de galerie et de zoom pèse entre cent et quatre cents kilooctets une fois compressée, script et feuille de style compris. Ce poids s'ajoute à celui du thème, des extensions et des outils de mesure, sur une page déjà chargée. Plus important encore que le poids, ces scripts s'exécutent au chargement, parcourent le document, attachent des gestionnaires d'événements et calculent des dimensions, travail qui bloque le fil principal du navigateur au moment précis où le visiteur attend l'affichage. Sur un téléphone d'entrée de gamme, ce coût se compte en secondes, et il s'ajoute à celui de tous les autres scripts chargés par la page.

S'y ajoutent des coûts moins visibles. La bibliothèque impose sa structure de balisage, ce qui rend le contenu dépendant d'un outil externe. Elle apporte ses propres styles, qu'il faut ensuite combattre pour respecter la charte graphique. Elle doit être mise à jour, et ces mises à jour cassent régulièrement l'intégration. Enfin, elle gère souvent mal les cas particuliers du site, images de proportions variables, produits sans photo, chargement différé, ce qui conduit à des correctifs empilés au fil du temps. Au bout de deux ans, personne n'ose plus y toucher. La fiche produit étant la page la plus critique d'une boutique, cette immobilisation a un coût qui dépasse largement la question technique.

Le dernier coût est celui de l'accessibilité. Beaucoup de ces composants piègent le clavier, ne gèrent pas la fermeture par la touche d'échappement, ne restituent pas le focus et n'annoncent rien aux technologies d'assistance. Ces défauts sont hérités sans qu'on les ait choisis et deviennent difficiles à corriger dans un code que l'on ne maîtrise pas. Le sujet est développé dans notre article sur la manière d'améliorer l'inclusivité d'un site avec les règles WCAG, et il pèse d'autant plus lourd que les obligations réglementaires se renforcent.

Ce que le navigateur sait déjà faire

Sur mobile, l'ouverture de l'image en grand format dans une vue dédiée permet le pincement natif, geste que tout le monde connaît, avec des performances qu'aucun script ne peut égaler puisque l'agrandissement est traité par le compositeur graphique. Cette solution ne coûte rien, fonctionne partout et se comporte exactement comme les utilisateurs l'attendent. Elle se met en place avec un lien vers la version haute définition de l'image, ce qui constitue littéralement une ligne de balisage. Le seul soin à apporter concerne le retour à la page précédente, qui doit ramener le visiteur à l'endroit exact qu'il consultait.

Sur écran large, l'effet de loupe au survol s'obtient avec une image d'arrière plan positionnée dynamiquement et un très petit script suivant la position du pointeur. Le code utile tient en une vingtaine de lignes, sans dépendance. La technique consiste à afficher la version agrandie dans un conteneur, en déplaçant son point d'origine proportionnellement à la position du curseur dans la miniature. Aucune animation n'est nécessaire, le déplacement suivant naturellement le mouvement de la souris, ce qui donne un résultat plus réactif que la plupart des bibliothèques. Le chargement de l'image agrandie doit être déclenché à la première entrée du pointeur dans la zone, avec un affichage de la miniature agrandie en attendant.

La boîte modale, quand elle est souhaitée, dispose désormais d'un élément natif qui gère le fond assombri, le piégeage du focus, la fermeture par la touche d'échappement et le retour du focus à l'élément déclencheur. Tout ce qui justifiait autrefois une bibliothèque est fourni par le navigateur, correctement et sans code. Il reste à écrire l'ouverture et la fermeture, soit quelques lignes, et à styler l'ensemble selon la charte du site, ce qui est de toute façon nécessaire quelle que soit la solution retenue. Le comportement par défaut de cet élément couvre déjà les attentes en matière d'accessibilité, ce qui représente l'essentiel du travail habituellement délégué à une bibliothèque.

Préparer les images

C'est ici que se joue la qualité perçue, et c'est le poste sur lequel l'effort rapporte le plus. Un zoom exige une image source dont la définition dépasse largement celle affichée, typiquement mille cinq cents à deux mille pixels de côté pour un affichage à six cents. En dessous, l'agrandissement révèle les pixels et produit exactement l'effet inverse de celui recherché. Cette exigence doit être portée jusqu'aux fournisseurs de visuels, car aucune technique ne rattrape une photo source insuffisante. Sur un catalogue alimenté par des flux, le contrôle de la définition minimale doit figurer parmi les validations effectuées à l'import.

Le poids de ces images se maîtrise par le format et par le chargement différé. Les formats modernes divisent le poids par deux à trois à qualité perçue équivalente, sujet que nous traitons dans notre article sur la compression d'images en WebP et AVIF. La version haute définition ne doit être chargée qu'au moment où le visiteur manifeste l'intention de zoomer, au survol ou au clic, jamais au chargement initial de la page. Ce simple décalage divise le poids de la fiche produit sans rien retirer à l'expérience. Le chargement différé natif, déclaré par un attribut, suffit pour les vues secondaires de la galerie et ne demande aucun script.

Le rapport de forme mérite une décision explicite. Des images de proportions variables produisent une galerie qui saute et une mise en page instable, défaut pénalisé par les indicateurs d'expérience. Imposer un rapport unique, avec un cadrage ou un fond ajouté automatiquement au traitement, règle le problème définitivement. Cette normalisation se fait au moment du téléversement et doit être appliquée à l'ensemble du catalogue existant, opération scriptable qui prend quelques heures et se voit immédiatement. Elle améliore au passage l'aspect des listes de catégorie, où l'alignement des vignettes devient enfin régulier.

Le zoom au survol et le zoom au clic

Les deux gestes ne répondent pas au même besoin et gagnent à coexister. Le survol permet une exploration rapide, sans engagement, pendant que le visiteur parcourt la page. Il convient aux détails de texture et de finition, et il doit rester discret : un agrandissement de deux à trois fois suffit, au delà l'utilisateur perd ses repères et ne sait plus quelle partie du produit il regarde. Le conteneur d'affichage doit être placé à côté de l'image plutôt que par dessus, afin que la vue d'ensemble reste visible en permanence. Lorsque la place manque, un affichage par dessus l'image reste acceptable à condition de laisser apparent le cadre indiquant la zone regardée.

Le clic ouvre une vue plein écran et répond à un besoin d'examen approfondi. C'est là que l'on autorise un agrandissement plus important, la navigation entre les différentes photos du produit et éventuellement le déplacement par glissement. Cette vue justifie de charger l'image dans sa définition maximale, puisque l'intention du visiteur est claire. Elle doit pouvoir se fermer de trois façons : la touche d'échappement, un bouton visible, et un clic en dehors de l'image, trois gestes que les utilisateurs emploient indifféremment. Le bouton de fermeture doit rester visible en permanence et disposer d'une zone de contact suffisante sur mobile, faute de quoi la vue devient une impasse.

Un point mérite attention : le survol ne doit jamais être le seul moyen d'accéder au zoom. Les appareils tactiles ne le déclenchent pas, et une partie des utilisateurs d'ordinateur navigue au clavier. Le clic ou la touche d'entrée doivent produire le même résultat, ce qui suppose que l'élément déclencheur soit un vrai bouton ou un vrai lien plutôt qu'une image nue avec un gestionnaire d'événement. Cette exigence ne coûte rien lorsqu'elle est prise en compte dès le départ et devient pénible à rattraper après coup. Elle améliore en outre le référencement de la fiche, un lien réel vers l'image haute définition étant explorable là qu'un gestionnaire d'événement ne l'est pas.

Accessibilité et mobile

Sur téléphone, la meilleure expérience reste celle que le système offre nativement. L'ouverture de l'image dans une vue permettant le pincement, le déplacement à deux doigts et le retour par le geste habituel ne demande aucun code et se comporte exactement comme dans les applications que le visiteur utilise tous les jours. Chercher à reproduire ces gestes en JavaScript conduit invariablement à une imitation moins fluide, moins précise et parfois franchement pénible, notamment sur les appareils moins puissants. Le seul cas justifiant un développement spécifique est celui où le zoom doit s'accompagner d'une information contextuelle, par exemple un repère indiquant une dimension.

Côté accessibilité, quelques règles suffisent. Chaque image doit porter un texte alternatif décrivant ce qu'elle montre, et non le nom du fichier ni le nom du produit répété à l'identique sur chaque vue. Le déclencheur du zoom doit être atteignable au clavier et annoncer son action. La vue agrandie doit recevoir le focus à son ouverture et le rendre à son élément d'origine à la fermeture. Ces quatre points couvrent l'essentiel et se vérifient en quelques minutes avec la seule touche de tabulation. Le texte alternatif mérite un soin particulier sur une fiche produit, puisqu'il constitue la seule description disponible pour une partie des visiteurs et pour les moteurs de recherche d'images.

Il faut également penser aux personnes qui utilisent l'agrandissement système du navigateur. Un zoom logiciel qui se déclenche par dessus un affichage déjà agrandi produit un résultat illisible. Prévoir une désactivation du survol au delà d'un certain niveau d'agrandissement, ou simplement s'assurer que la vue modale reste utilisable, évite ce désagrément. Ce cas est rarement testé et concerne pourtant une part non négligeable des visiteurs, en particulier sur les catalogues destinés à un public âgé. Un simple essai à deux cents pour cent d'agrandissement suffit à repérer les défauts les plus gênants.

Mesurer avant et après

Le remplacement d'une bibliothèque par une solution sur mesure doit être justifié par des chiffres, faute de quoi il relève de la préférence esthétique. La mesure porte sur trois grandeurs : le poids total de la fiche produit, le temps avant que la page ne devienne interactive, et le temps de blocage du fil principal. Ces trois valeurs se relèvent en quelques minutes avec les outils de développement du navigateur, sur un appareil simulant une connexion mobile modeste plutôt que sur un poste de travail relié en fibre. La comparaison doit porter sur la même fiche produit, dans les mêmes conditions, avant et après modification, faute de quoi les chiffres ne signifient rien.

Le second contrôle porte sur le comportement réel. Un test rapide sur les quatre configurations principales, ordinateur avec souris, ordinateur au clavier, téléphone tactile, et navigateur avec agrandissement système, révèle la quasi totalité des défauts. Ce test prend un quart d'heure et devrait être refait après chaque modification du gabarit de fiche produit, sujet suffisamment central pour justifier cette discipline. Il vaut mieux le mener avant la mise en production que le découvrir par une réclamation. Les quatre configurations tiennent sur une petite liste que l'on garde à côté de soi, ce qui rend le contrôle systématique sans effort de mémoire.

Le dernier contrôle est commercial. Le taux d'ajout au panier depuis les fiches produit, comparé avant et après le changement, indique si l'intervention a produit un effet perceptible. Une amélioration nette du temps de chargement se traduit généralement par une amélioration mesurable de ce taux, surtout sur mobile. Ce lien entre performance technique et résultat commercial est le seul argument qui porte réellement au moment d'arbitrer le temps à consacrer à ce genre de travail, et il mérite d'être documenté quand il se vérifie. Une note d'une page, avec les mesures avant et après et l'évolution du taux constaté, sert ensuite d'appui à toutes les demandes du même ordre. Elle doit mentionner l'appareil et la connexion utilisés pour la mesure, sans quoi les chiffres avant et après ne sont pas comparables et la démonstration perd toute valeur.