Comment optimiser les images pour l’éco-conception web ?

u003cpu003eu003cstrongu003eÉco-concevoir un site internet, c’est maitriser, quantifier et optimiser les ressources nécessaires et suffisantes au chargement d’une page webu003c/strongu003e. Selon une estimation, le poids moyen des médias d’une page internet représente jusqu’à 60% du poids total. Pour l’u003ca href=u0022http://www.ecoindex.fr/u0022u003eu003cemu003eEco-Indexu003c/emu003eu003c/au003e, le poids fait justement partie des u003ca href=u0022https://www.logitourisme.com/ecoconception-web/u0022u003eu003cstrongu003e3 grands indicateursu003c/strongu003eu003c/au003e pour évaluer le niveau d’écoconception d’une page. L’utilisation et l’optimisation des images sont donc des vecteurs importants d’amélioration d’écoconception d’une page internet.u003c/pu003e

u003cpu003eAfin de limiter la taille totale qu’occupe l’ensemble des médias d’un site sur un serveur, il est nécessaire d’importer des images correctement dimensionnées pour un emploi sur le web. Il faut comprendre que la taille d’une image est proportionnelle à son poids. u003cstrongu003ePlus l’image est grande, plus son poids est important !u003c/strongu003eu003c/pu003ernu003cpu003eGénéralement, une image sera très peu utilisée au-delà d’une largeur de 1920px sur une page internet. L’import d’une image plus grande sur un bibliothèque média comme sur le u003ca href=u0022https://www.logitourisme.com/wordpress-6-0-tout-ce-quil-faut-savoir/u0022u003eCMS WordPress qui va bientôt sortir sa version 6.0u003c/au003e, est non-conseillé et optimise son empreinte environnementale. Plein d’outils s’offrent à vous pour redimensionner vos images avant leurs imports. En voici quelques exemples :u003c/pu003ernu003culu003erntu003cliu003eAdobe Photoshopu003c/liu003erntu003cliu003eu003ca href=u0022https://www.canva.com/u0022u003ecanva.comu003c/au003eu003c/liu003erntu003cliu003eGIMPu003c/liu003ernu003c/ulu003e

u003cpu003eAfin de respecter u003ca href=u0022https://www.eyrolles.com/Informatique/Livre/ecoconception-web-les-115-bonnes-pratiques-9782416006272/u0022u003eu003cstrongu003eles bonnes pratiques de l’écoconceptionu003c/strongu003eu003c/au003e, il est important d’intégrer des images sur une page web qui présentent une taille d’affichage équivalente à leurs tailles intrinsèques. Utiliser une image plus grande impactera le poids de la page, la performance d’affichage et par conséquence une dévalorisation de son éco-conception.u003cbr /u003ernDe plus, ces normes font également parties des points d’analyse et de performance des critères de u003ca href=u0022https://www.logitourisme.com/formations/optimiser-son-referencement-naturel/u0022u003eréférencement naturel SEOu003c/au003e comme sur l’outil u003cstrongu003eu003cemu003eLighthouseu003c/emu003eu003c/strongu003e.u003c/pu003e

u003cpu003eComme évoqué plus haut, les médias représentent plus de la moitié des ressources téléchargées au chargement d’une page. Il faut comprendre que le u003cstrongu003epoids de la pageu003c/strongu003e et le u003cstrongu003enombre de requêtes HTTPu003c/strongu003e augmenteront en conséquence de la quantité de médias intégrés. u003cbr /u003ernAutrement dit, moins on utilise de médias dans le contenu, plus le site internet est éco-conçu. Cependant, il est important de rendre à César ce qui est à César : u003cstrongu003eles médias sont les contenus les plus consommés sur le web !u003c/strongu003eu003c/pu003ernu003cpu003eC’est pourquoi il faut quantifier et raisonner l’emploi des médias sur ses pages. Il faut analyser l’importance et la pertinence de ceux-ci par rapport aux sujets évoqués. A-t-on vraiment besoin d’intégrer une image quand celle-ci n’est pas pertinente ? Pourquoi utiliser une vidéo alors que le sujet n’en a pas vraiment besoin ?u003cbr /u003ernu003cstrongu003eLa quantité des médias et le poids cumulé doivent être considérés sur chaque page afin de respecter ces critères de l’éco conception.u003c/strongu003eu003c/pu003e

u003cpu003eDepuis quelques années, l’optimisation des images pour le web est devenue un facteur important d’amélioration d’un site internet. Pour les performances u0026amp; la vitesse d’affichage, il est suggéré de mettre en place des outils de compression et d’optimisation. Dans le cas d’écoconception d’un site web, il est primordial et même obligatoire de mettre en place cette politique. Les médias sont responsables u003cstrongu003ejusqu’à 60% du poids d’une page web en moyenneu003c/strongu003e et de l’augmentation des requêtes HTTP, 2 des 3 indicateurs de u003ca href=u0022https://www.logitourisme.com/ecoconception-web/u0022u003enotre formule d’écoconceptionu003c/au003e et de l’u003ca href=u0022http://www.ecoindex.fr/quest-ce-que-ecoindex/u0022u003eEco-Indexu003c/au003e. u003cstrongu003eMais optimiser ses images, qu’est-ce que ça veut réellement dire ?u003c/strongu003eu003c/pu003ernu003cpu003eLes formats d’images u003cemu003ebitmapsu003c/emu003e (images à pixels) tels que le u003cstrongu003eJPEGu003c/strongu003e et le u003cstrongu003ePNGu003c/strongu003e proposent des niveaux de compression. Cette compression permet de réduire le poids de l’image selon le niveau choisi. L’inconvénient est que u003cstrongu003eplus le niveau de compression est élevé, plus la qualité de l’image est détérioréeu003c/strongu003e. Sur le web, une image de mauvaise qualité n’offre pas une bonne expérience utilisateur. C’est pourquoi il est nécessaire de trouver u003cstrongu003ele bon rapport entre poids/qualitéu003c/strongu003e pour respecter les critères de l’éco-conception.u003c/pu003ernu003cpu003eL’optimisation peut être réalisée avec des outils en ligne et des modules WordPress d’automatisation de la tâche. Voici quelques exemples de ces outils :u003c/pu003ernu003culu003erntu003cliu003eu003ca href=u0022https://imagify.io/u0022u003eImagify.iou003c/au003e u0026amp; son module WordPressu003c/liu003erntu003cliu003eu003ca href=u0022https://fr.wordpress.org/plugins/wp-smushit/u0022u003eSmushu003c/au003eu003c/liu003erntu003cliu003eu003ca href=u0022https://tinyjpg.com/u0022u003eTiny JPEG u0026amp; PNGu003c/au003eu003c/liu003ernu003c/ulu003e

u003cpu003eLe choix du format d’une image a toujours été un sujet important pour la conception d’un site internet. Choisir un format en particulier était avant tout motivé par rapport à leurs avantages respectifs. u003cstrongu003ePour l’écoconception web, il est nécessaire de prendre en compte les critères d’optimisation et de poids de l’image en fonction du format.u003c/strongu003eu003c/pu003e

u003cpu003e• Le format u003cstrongu003eJPEGu003c/strongu003e (Joint Photographic Experts Group)u003cbr /u003ernC’est un format standard qui est devenu universel et lisible par n’importe quel logiciel de traitement d’images. C’est le format le plus répandu sur le web. Il a l’avantage d’être supporté par tous les navigateurs. Il ne supporte pas la transparence mais présente u003cstrongu003eun taux de compression satisfaisant pour réduire son poidsu003c/strongu003e. Ce taux de compression peut également être un désavantage quand celui-ci détériore la qualité et le rendu de l’image.u003c/pu003ernu003cpu003e• Le format u003cstrongu003ePNGu003c/strongu003e (Portable Network Graphics)u003cbr /u003ernC’est un format ouvert qui a été instauré pour remplacer le format u003cstrongu003eGIFu003c/strongu003e. À l’instar du u003cstrongu003eJPEGu003c/strongu003e, c’est un standard du web supporté par tous les navigateurs. Il a lui l’avantage de supporter la transparence mais présente u003cstrongu003eun taux de compression faible pour réduire son poidsu003c/strongu003e. Il peut donner une image de bonne qualité mais son poids compressé peut remettre en cause son intégration sur une page web.u003c/pu003e

u003cpu003e• Le format u003cstrongu003eWEBPu003c/strongu003eu003cbr /u003ernLe u003cstrongu003eWEBPu003c/strongu003e est un format d’image matricielle créé par u003cemu003eGoogleu003c/emu003e dans le but de remplacer les formats standards. L’objectif de ce celui-ci est de proposer le même rendu que ces derniers avec un poids réduit allant u003cstrongu003ejusqu’à 30% plus légeru003c/strongu003e. Son désavantage premier étant sa faible histoire. Beaucoup de navigateurs actuels ne proposent pas son support, notamment u003cemu003eInternet Exploreru003c/emu003e selon le site u003ca href=u0022https://caniuse.com/u0022u003ecaniuse.comu003c/au003e.u003c/pu003e

u003cpu003eLe format vectoriel majoritairement supporté sur le web est le format u003cstrongu003eSVGu003c/strongu003e (Scalable Vector Graphics). L’avantage de l’emploi des images vectorielles est qu’u003cstrongu003eelles sont nettement plus légères une fois optimisées que les photos et images bitmaps standardsu003c/strongu003e. Il faut cependant prendre en considération que les images vectorielles ne remplaceront jamais les images standards. Une image vectorielle est souvent une illustration graphique. Alors quand le contenu d’une page est, par exemple, un lieu touristique, il est difficile d’imaginer l’emploi d’une image vectorielle pour illustrer le propos.u003c/pu003ernu003cpu003ePour notre site internet écoconçu u003ca href=u0022https://www.logitourisme.com/u0022u003eu003cstrongu003ewww.logitourisme.comu003c/strongu003eu003c/au003e, nous avons pris la décision en majorité de nous séparer des formats standards bitmaps au profit du format vectoriel SVG raisonné. Nous avons constaté une nette baisse du poids moyen des pages et une hausse des performances d’affichage. Force est de constater que ce format est un énorme avantage pour l’écoconception d’un projet web.u003c/pu003e

u003cpu003eSi le contenu de votre site internet vous permet d’imaginer un design basé sur des images illustratives vectorielles, vous pouvez utiliser le format SVG pour l’éco-conception de votre site internet. Il respectera totalement les critères d’analyse et d’évaluation de l’éco-conception web.u003c/pu003ernu003cpu003eDans d’autres cas, il faudra vous rabattre sur les autres formats cités. La meilleure solution serait d’offrir le support du WEBP et une solution de repli aux standards JPEG ou PNG quand le navigateur ne supporte pas le premier, fonctionnalité qu’offre le module u003ca href=u0022https://fr.wordpress.org/plugins/imagify/u0022u003eWordPress Imagifyu003c/au003e. Cette démarche permettrait d’optimiser le rendu et le poids d’une page, tout en respectant la compatibilité avec tous les navigateurs et l’accessibilité du site internet. u003cstrongu003eCar l’éco-conception web c’est également respecter les standards de la u003ca href=u0022https://www.numerique.gouv.fr/publications/rgaa-accessibilite/u0022u003eu003cemu003eRGAAu003c/emu003eu003c/au003e, en rendant accessible le même contenu à tout le monde.u003c/strongu003eu003c/pu003e

u003cpu003eLes u003cstrongu003eEXIFu003c/strongu003e, qui signifie u0022u003cemu003eExchangeable Image Fileu003c/emu003eu0022 ou fichier d’échange de données, sont un ensemble d’informations relatives à chaque image. Ces données sont générées automatiquement par l’appareil photo et elles sont stockées dans le format de l’image.u003cbr /u003ernLes données EXIF peuvent être nombreuses, u003cstrongu003ejusqu’à 350 données différentesu003c/strongu003e pour une même image. Elles rajoutent du poids non-indispensable dans le cas d’un affichage sur internet et leurs suppressions allègent le poids.u003c/pu003ernu003cpu003eC’est pourquoi il faut envisager de supprimer ces métadonnées. Voici quelques exemples pour vous aider dans cette démarche :u003c/pu003ernu003culu003erntu003cliu003eu003ca href=u0022https://imagify.io/u0022u003eimagify.iou003c/au003eu003c/liu003erntu003cliu003eu003ca href=u0022http://www.verexif.comu0022u003everexif.comu003c/au003eu003c/liu003erntu003cliu003eu003ca href=u0022https://mass-images.pro/u0022u003emass-images.prou003c/au003eu003c/liu003ernu003c/ulu003e

u003cpu003eLe u003ca href=u0022https://developer.mozilla.org/fr/docs/Web/Performance/Lazy_loadingu0022u003eu003cstrongu003eu003cemu003elazyloadingu003c/emu003eu003c/strongu003eu003c/au003e est une méthode qui permet d’améliorer et d’optimiser les temps de chargement des sites Internet en incluant les images et les vidéos. Lors de la consultation d’une page web, le navigateur charge toutes les ressources nécessaires pour afficher la page. Ils sont alors chargés, même s’ils ne se trouvent pas dans la zone de visualisation appelée u003cemu003eviewportu003c/emu003e. Grâce au « chargement paresseux », le navigateur charge uniquement les médias et les autres données lorsqu’elles apparaissent dans le « u003cstrongu003eu003cemu003eviewportu003c/emu003eu003c/strongu003e » en faisant défiler la page notamment.u003c/pu003ernu003cpu003eCette technologie permet un chargement synchrone des ressources nécessaires. Les ressources non-visibles sont donc chargées à l’action de l’utilisateur, ce qui optimise les performances d’affichage et des requêtes HTTP.u003c/pu003e

u003cpu003eL’emploi d’images dans un site internet écoconçu n’est pas à prendre à la légère. Elles représentent, à elles seules, un impact important sur l’écoconception d’une page web. Il est nécessaire de prendre en compte tous les points évoqués précédemment.u003c/pu003e