Dans le monde de l'image, c'est une donnée bien connue : plus une image est de qualité avec une bonne définition et plus son poids sera élevé (on parle parfois ici de plusieurs dizaines voire centaines de Mo !).
Et le souci, notamment pour un site e-commerce, c'est qu'une image lourde augmente considérablement le temps de chargement des pages.
C'est un réel problème pour plusieurs raisons :
L'impact sera négatif sur votre référencement
La navigation dans votre site sera désagréable
L'internaute aura tendance à quitter votre site si la page met plus de 3 secondes à charger
Les images prendront plus de place sur votre espace serveur
Moins de visibilité et moins de conversion mènent mécaniquement à un manque à gagner considérable en termes de chiffre d'affaires. Et ce n'est pas le but de votre site e-commerce, n'est-ce pas ?
C'est la raison pour laquelle il est essentiel d'optimiser vos images pour réduire leur poids, et ainsi augmenter la vitesse générale de chargement de vos pages web, tout en faisant attention de ne pas dégrader la qualité des visuels. Et du coup, comment optimiser une image pour le web ?
La bonne nouvelle, c'est que c'est très facile !
Optimisez vos images pour le web !
Nous l'avons vu, trouver un équilibre entre une bonne qualité d'image et une taille de fichier qui reste modeste reste le but premier quand vous optimisez une image pour le web. Et il existe des tonnes de solutions pour optimiser une image à destination d'un site web.
1. Choisir le bon format de fichier
La première chose à laquelle il faut faire attention avant de modifier votre fichier, c'est le format de sortie utilisé. Il existe 4 formats recommandés pour le web :
JPEG : c'est le format d'image de base, qui convient à tous les usages. Via un logiciel de traitement d'images, il est possible d'utiliser l'optimisation lossy (compression avec pertes) ou lossless (compression sans pertes). De plus, c'est un format sur lequel il est possible d'ajuster chaque paramètre de compression pour trouver le meilleur équilibre entre le poids du fichier et sa qualité.
PNG : c'est un format qui produit des images plus lourdes, mais aussi de meilleure qualité. Ce format peut-être privilégié pour les images qui contiennent du texte ou qui n'affichent pas beaucoup de couleurs. De plus, c'est un format qui accepte la transparence et qui est idéal pour les sujets détourés et les logos.
GIF : Il s'agit du meilleur choix avant le format vidéo pour les images animées. N'utilisant qu'une palette de 256 couleurs, il s'agit du meilleur compromis pour disposer d'une image animée qui conserve un poids modeste.
WebP : C'est le format ultime pour l'image sur le web, et il y a de fortes chances pour que vous n'en ayez jamais entendu parlé. Ce format d'avenir a été conçu pour devenir un format unique polyvalent, remplaçant le jpeg pour de l'image classique, acceptant la transparence pour remplacer le png, et permettant la création d'images animées pour remplacer le gif, le tout en conservant une qualité d'image optimale avec un poids 20% à 30% inférieur aux formats classiques en compression lossless. Développé par Google et utilisé depuis une dizaine d'année, il s'agit d'un format relativement rare car il n'a pas été supporté pendant longtemps par la plupart des navigateurs (comme Firefox, Edge...) et certains CMS. Aujourd'hui encore, Wordpress ne l'accepte pas sans une extension dédiée et Safari ne supportera pleinement ce format qu'à partir de la version 16 (selon la dernière Technical Preview).
2. Trouver le bon rapport entre la qualité et le poids de votre image
Comme c'est souvent le cas dans la photo, tout n'est qu'une question d'équilibre. Voici deux exemples d'images compressées et optimisées pour le web :
L'image de originelle utilisée pour ces deux exemples pèse 1,4Mo.
La première version est compressée avec un taux de compression moyen, avec peu de pertes. Cela permet de conserver un maximum de couleurs et de détails, tout en bénéficiant d'une taille réduite et adaptée pour le web. Dans une compression équilibrée comme dans cet exemple, nous sommes parvenus à obtenir un poids raisonnable de 189Ko.
La seconde image a en revanche été compressée à l'extrême avec beaucoup plus de pertes. Bien que la taille du fichier soit très faible, cette compression poussée à l'extrême dégrade énormément la qualité de l'image (couleurs plus ternes, palette de couleurs réduite créant des halos disgracieux dans les transitions de lumière, perte de détails). L'image ne pèse ici que 32Ko, mais cela au détriment de la qualité, qui n'est en aucun cas acceptable, quel que soit le site web.
Ce simple exemple montre à quel point il est nécessaire de trouver un juste milieu entre la qualité de l'image compressée et son poids. De manière générale, si vous parvenez à obtenir un fichier avec peu de pertes dans un poids inférieur à 200Ko pour une photo haute résolution, Google sera content (et votre serveur aussi !). Les meilleures performances pour les images les plus simples (comme des logos par exemple) seront obtenues avec des fichier dont le poids est inférieur à 100Ko.
3. Utiliser de bons outils
Eh oui, après la théorie, l'application !
De multiples moyens existent pour changer le format de vos images et les compresser avec peu de pertes, comme les logiciels de traitement d'image. C'est à notre sens la meilleure solution, car elle vous permettra d'ajuster parfaitement chaque paramètre de compression (poids maximal souhaité de l'image, dimensions souhaités, taux de compression, format de sortie...).
Des logiciels de post-traitement tels que Adobe Photoshop, Adobe Lightroom, Gimp ou même Photofiltre Studio ou Photoscape pour les plus novices feront parfaitement l'affaire !
Une autre solution consiste à utiliser des sites spécialisés dans la compression, qui sont généralement gratuits et donnent des résultats acceptables la plupart du temps. Il s'agit d'une solution efficace si vous n'avez pas besoin de faire de traitement en lots et si vos images ne sont pas confidentielles. Nous pouvons citer notamment ILoveImg, CompressJPG, Website Planet ou encore Compress2Go (mais il en existe beaucoup d'autres).
Enfin, certains CMS comme Wix proposent nativement la compression d'image. Lorsque ce n'est pas le cas, il existe des plug-in que vous pourrez intégrer à votre site e-commerce, vous permettant de tout gérer directement dans votre back-office. C'est le cas du module Image Toolbox pour Prestashop par exemple.
Désormais, vous avez toutes les clés en mains pour faire performer votre site e-commerce grâce à de belles images optimisées ! Et chez Good Murphy, on est bien conscients de vos besoins, et on s'adapte en vous livrant chaque image dans le format et la taille souhaitée avec une qualité optimisée aux petits oignons. 👌
Comme ça, il n'y a plus qu'à mettre en ligne, et roule ma poule ! 🍹