E-commerce : les défis liés aux images responsives

Les sites e-commerce et les images, c’est une grande histoire d’amour ! Elles inspirent, illustrent et surtout, elles engagent et permettent de se démarquer de la concurrence. Elles jouent en effet un rôle crucial dans l'expérience utilisateur (sur mobile autant que sur desktop), ainsi que d'un point de vue SEO. Vos images requièrent donc une optimisation minutieuse, à bien des niveaux !

Aujourd'hui, nous vous proposons de vous pencher sur une problématique bien précise et qui préoccupe de nombreuses équipes techniques : servir des images responsives, c'est-à-dire parfaitement adaptées à chaque contexte utilisateur.

Le trafic mobile ne cessant de croître et étant majoritaire (on ne vous apprend rien), il devient urgent de réussir à servir des images adaptées au mobile. Mais parallèlement à cela, les images représentent un poids considérable… Jusqu’à 50 % du poids des pages web ! Ce qui n'est bien sûr, pas très digeste pour nos sites mobiles. Et si on pourrait penser que cela tend à s'améliorer, ce n'est pas le cas puisque selon HTTP Archive, le poids médian des images a été multiplié par 4, ces 10 dernières années (tout comme le poids des pages web) !

Mais la problématique des images responsives est bien plus complexe qu'une simple mise au régime de nos images. Les défis liés aux images responsives sont nombreux : images trop volumineuses, gestion complexe des différents formats, tailles ou versions d'images, difficultés de bien gérer le code HTML, etc. Bref, de nombreux aspects sont à prendre en compte.

Alors, êtes-vous prêt à plonger dans les profondeurs des images responsives ?

Les pièges des images à moitié optimisées

Vous avez déjà très probablement optimisé en partie vos images et c'est un premier pas. Pourtant, malgré vos efforts, il se peut que vos images ne s’affichent toujours pas de manière optimale dans tous les contextes de navigation. Pour vous donner une idée plus précise de ce qui peut être une image mal optimisée, analysons quelques cas.

Des images relativement optimisées

Premier cas, vos images sont compressées, l’image s’affiche correctement sur mobile et desktop, mais son poids n’est pas adapté à la taille de l’écran de l’utilisateur. Alors, tandis qu’elle s’affiche relativement correctement sur certains appareils, sur d’autres, elle s’affiche mal. Et contrairement à ce qu’on pourrait croire, à travers le monde, les équipements Apple ne sont pas les plus répandus parmi vos utilisateurs !

Source

Autre cas de figure qu’on peut rencontrer : l’image se décale pendant le chargement de la page, car elle n’est ni adaptée à la taille de l’écran, ni au type d’appareil sur lequel elle est chargée. Cela génère du CLS (une des métriques Core Web Vitals), ce qui a un impact sur votre SEO et dégrade la navigation, car cela peut engendrer des clics ou des actions non voulues par les utilisateurs.

Vous l'aurez compris, les cas sont nombreux et peuvent dégrader vos scores de performance, mais surtout augmenter considérablement la frustration de vos utilisateurs et donc votre taux de rebond. Autrement dit : bien gérer ses images peut vite devenir un cauchemar !

Des images trop nombreuses à gérer

Il est encore courant de trouver des organisations dont le CMS comporte plusieurs versions de la même image : différentes tailles et formats, pour différents devices. Dans ce cas, l’outil de gestion s’alourdit et parfois, on retrouve la même image en doublon (voire plus), car elles sont manipulées par différentes équipes : marketing, tech, design, e-commerce, etc. Malheureusement, cette pratique alourdit le poids des pages, dégrade vos performances et augmente l’énergie consommée pour les afficher !

Une étape préliminaire consiste à nettoyer votre CMS des images en doublons avant de passer à la compression. Mais une fois cette étape passée, de nombreuses équipes ont encore recours à des techniques d’optimisation des images qui se révèlent partiellement efficaces.

Optimisation des images : des techniques pas si simples à implémenter

Comme la navigation mobile est privilégiée, sur certains sites e-commerce, on peut retrouver deux images chargées :

la première à destination des appareils desktop ;
la seconde pour tous les appareils mobiles, indépendamment de la taille d’écran.

Une autre approche consiste à charger les URL de toutes les images (dont les dimensions sont différentes) et le navigateur affiche la bonne, à l’aide de balises. Cependant, avec cette technique, une seule partie du problème est résolue : l’image s’adapte au type d’appareil, mais pas à la dimension exacte de l’écran. De plus, le chargement de plusieurs images augmente naturellement le temps de chargement de la page.

Alors, pour que le navigateur affiche la bonne image sur le bon écran, vos équipes utilisent certainement les images responsives comprenant les pratiques suivantes :

l’utilisation de tailles relatives (relative sizes) : la taille de l’image s’adapte directement afin d’éviter qu'elles débordent accidentellement de leur conteneur. Cela est notamment fait en utilisant les balises css “width”.
Le recours à la balise HTML "picture" qui permet de spécifier différentes images en fonction des caractéristiques de l'appareil utilisé pour afficher la page.
L’emploi des attributs de la balise img "srcset" et "x descriptor" qui donnent des indications au navigateur sur la meilleure image à utiliser en fonction de la densité de pixels de l'écran.

Cependant, ces techniques présentent un inconvénient majeur : il faut prévoir tous les cas possibles des contextes utilisateur (device, taille d’écran, densité, taille du container et même type de connexion) ! Cela rend très complexe la génération du code par vos webmaster et/ou développeurs.

Vous vous en rendez sûrement compte désormais, pour diffuser des images 100 % optimisées sur votre site e-commerce, il existe des techniques, mais aussi des règles à respecter. C’est grâce à elles, que vous assurez une UX fluide, avec des images qui se chargent et s’affichent de façon optimale, quel que soit le contexte de navigation.

Les 3 + 1 règles d’or pour des images vraiment responsive

Règle N°1 : des images de qualité, mais légères

La première chose à laquelle vous devez penser lorsqu’on parle des images, c’est leur poids. D’ailleurs, en 2022, les images représentent environ la moitié du poids des pages (suivies des scripts JS qui pèsent près du quart) !

Source

Pourtant, qu’elles soient destinées à vos pages produit ou à votre homepage, elles doivent peser le moins lourd possible. Comme toutes les ressources qui sont chargées sur vos pages, plus le poids est élevé, plus vous risquez de ralentir ce chargement. Selon leur résolution, leur taille, et leur nombre, on comprend aisément que les images peuvent nécessiter plus de temps et de ressources au navigateur pour s’afficher correctement.

Et de l’autre côté de l’écran, elles peuvent aussi dégrader votre expérience utilisateur. En effet, si vous voulez proposer une excellente UX avec des images de très haute résolution (ou qui ont été traitées par votre équipe de direction artistique), elles ne sont pas forcément adaptées à l’appareil et aux conditions de navigation de vos utilisateurs.

Alors, même après avoir choisi les plus beaux visuels pour vos pages, elles risquent de ne jamais être vues si elles mettent trop de temps à charger. Pour éviter cela, la solution c’est la compression et ce, dans les formats recommandés par Google.

Opter pour les formats de compression AVIF

Chez Fasterize, nous vous recommandons d’opter pour le format AVIF qui permet de diffuser des images de qualité et optimisées pour la vitesse de chargement. En utilisant ce format de compression, vos images seront en moyenne 50 % à 80 % plus légères qu’une image JPEG !

Mais, vous vous doutez bien que la compression n’est pas le seul traitement à faire sur vos images pour qu’elles soient optimisées pour chaque contexte de navigation. Il faut aussi que vos images aient la bonne taille adaptée à chaque contexte : une image de 3000 x 3000 sur un écran d’iPhone affichée en 200 x 200 n’est certainement pas la meilleure des choses à faire ;-).

Règle n°2 : la pédagogie interne est nécessaire

Optimiser parfaitement ses images de bout en bout se révèle donc être un défi technique. Mais, comme nous allons le voir, ce défi est également organisationnel.

Prendre le temps de sensibiliser vos équipes (tech, intégrateurs, content…) à l’importance de servir des images responsives optimisées, est une phase importante de votre démarche. Chaque membre de l’équipe doit pouvoir contribuer, ou a minima être vigilant, à chaque fois qu’une image est intégrée à votre CMS.

Si les priorités et intentions de chaque équipe peuvent parfois être en décalage avec la nécessité d’optimisation et les objectifs UX, leurs efforts ne doivent pas contribuer à dégrader votre webperf (et donc votre UX).

Si vos équipes ne voient pas les bénéfices et intérêts d’images optimisées (côté performance, ou UX), ce temps de pédagogie est fondamental pour que chacun soit conscient de son impact et participe à votre démarche d’optimisation.

Règle n°3 : abandonner les solutions partielles

Mais, direz-vous, éduquer les équipes demande du temps qu’on n’a pas toujours… Et si toutes les techniques présentées dans l’article sont intéressantes, elles présentent des limites : elles sont chronophages pour vos équipes, et ne garantissent pas que l’image soit adaptée au contexte de navigation de l’utilisateur. Les images s’adaptent au type d’appareil, mais pas à la taille d’écran de l’utilisateur qui varie énormément sur mobile. La solution pour éviter les contraintes d’utilisation de ces techniques est de proposer des images responsive de A à Z de façon automatisée !

Règle n°4 : choisir l’automatisation

Automatiser l’optimisation de vos images peut considérablement soulager vos équipes. Comme nous le disions, la complexité de la gestion et de l’optimisation des images demande une implication non négligeable de votre part et l’allocation de ressources (que vous n’avez pas toujours).

Alors, choisir d’automatiser plutôt que d’ajuster manuellement chaque image aux multiples résolutions et tailles d'écran existants, vous garantit un gain de temps non négligeable. De plus, vos équipes pourront se concentrer sur leurs priorités.

Par ailleurs, l’utilisation d’un moteur intelligent est l’assurance de générer des versions optimisées des images en fonction des contraintes spécifiques de chaque appareil, garantissant ainsi une expérience et agréable pour les utilisateurs. C’est le moyen le plus simple et le plus fiable pour optimiser entièrement vos images.

Servez des images full responsive avec Fasterize

En plus de toutes nos optimisations dédiées à vos images (lazyloading, inlining, compression WebP/AVIF), nous avons incorporé à notre moteur un script qui ajuste automatiquement les tailles d'image en fonction de l'écran, du container et de la densité de pixels. Fini les images trop volumineuses pour les utilisateurs, la gestion laborieuse des différents formats d'images et la complexité du code HTML. Quelque soit l’image source, nous générons à votre place des images parfaitement adaptées à chaque contexte utilisateur !

Garantir une bonne UX, vos performances et vos résultats

Le responsive design est une étape incontournable pour un site performant (à ce propos, le responsiveness fait aussi partie des préconisations de Google). En automatisant ces optimisations, vous n’aurez plus besoin de combiner par vous-même cropping, resizing et autres opérations de compression qui, si elles ne sont pas automatisées, ne sont pas viables dans le temps.

Opter pour une solution globale, c’est la garantie de faire gagner du temps à vos équipes techniques, d’assurer l’optimisation continue de votre front-end, au fil des évolutions de votre site. Mais c’est également l’assurance d’offrir une expérience optimale à vos utilisateurs, quel que soit leur contexte de navigation.

Découvrez notre solution EdgeSpeed et jouez la carte qui va révéler tout le potentiel de votre site ! (Et ce n’est pas un coup de poker ;))