Introduction : Pourquoi internet pollue ?
Chaque action effectuée sur le web consomme de l’énergie, et est donc responsable d’émissions carbone. Consulter les sites internet, regarder des vidéos ou encore envoyer un mail, ces actions semblent sans conséquences mais en réalité, elles ne le sont pas.
L’affichage d’une page web nécessite un nombre important de requêtes pour que le navigateur affiche les éléments du site web (texte, images, typographies, script etc…). Ces requêtes vont être envoyées à un serveur, qui dispose de ces éléments pour les afficher sur la page web. Les requêtes demandent de l’énergie et l’utilisation d’un serveur, donc de l’électricité, qui a été produite en générant plus ou moins de CO2. Plus un site internet est complexe, nécessite des requêtes et possède des éléments lourds (images, vidéos…), plus les émissions de carbone seront élevées.
Il existe des solutions pour réduire les émissions carbone d’un site web. Parmi ces solutions, nous avons l’éco-conception.
Qu’est-ce que l’éco-conception web ?
L’éco-conception web allie performance et impact environnemental. En optimisant le cycle de vie du site internet (du design à la conception, en passant par le choix du CMS et de l’hébergement, des fonctionnalités, jusqu’aux canaux d’acquisition de trafic), l’impact environnemental de celui-ci sera réduit.
Envie de vous lancer dans l’éco-conception et de réduire les émissions de votre site web ? Et si on commençait par l’optimisation des images ?
Comment optimiser les images pour le web ?
Optimiser les images de votre site web est un point crucial. Une image compressée et réduite à la bonne taille, aura un effet bénéfique sur votre site web. Cela vous permet de réduire le temps de chargement de la page et d’avoir une meilleure expérience utilisateur.
Quelle résolution d’images pour le web en pixels :
Généralement, la zone centrale affichant le contenu d’une page web est large de 1200 à 1400 pixels. Pour les sites utilisant des images en pleine page, comptez une résolution de 2500 px. (c’est une base de travail en 2022). Pour connaître la zone d’affichage d’une image sur une page web, plusieurs solutions sont possibles. Les copies écrans de l’image, ou les outils d’inspection de code permettent des chiffres plus précis.
Mais gardez déjà à l’esprit ces données :
- Une image utilisant toute la largeur de l’écran : max 2500 pixels de large
- Une image utilisant la partie centrale du site : 1200 à 1400 px
- Une image utilisant la moitié de la largeur de la page : 1200 / 2 = 600 px
- Une image utilisant ⅓ de la largeur de l’écran : 1200 / 3 = 400 px
Pour changer la résolution de votre image et réduire son poids, vous pouvez utiliser des logiciels professionnels tels que Photoshop, ou ses équivalents open sources tels que Gimp. Des outils en ligne tels que https://www.resizepixel.com/ ou https://www.img2go.com/ permettent également de facilement redimensionner et convertir des images dans le bon format, et la bonne résolution.
Choisir la bonne extension de fichier image
Il existe plusieurs extensions de fichiers images. Principalement, nous allons ici traiter des formats Jpeg, Png, Svg et WebP. Une même image dans des formats différents pourra avoir un rendu différent, mais surtout un poids et une empreinte carbone différents, sans pourtant changer l’apparence visible à l’écran.
Jpeg : C’est un format ancien mais très utilisé. Il est assez peu gourmand en ressources si bien utilisé. Les fichiers jpeg, contrairement aux png, webp ou svg, ne prennent pas en compte les couches de transparence. C’est souvent le format privilégié pour les photos par exemple. Il est possible de fixer pour le web une qualité de compression d’image. Dans 99% des cas, même l’œil d’un graphiste expérimenté ne voit pas la différence entre un JPEG à 100 % et un à 60 ou 70 %. Pourtant le poids et les émissions sont réduits de 50% environ.
PNG : Format utilisé en particulier pour les visuels tels que logo, pictogrammes, ou schémas. Ce format gère la transparence, ce qui le rend très pratique en cas de superposition de plusieurs visuels, ou sur un fond de couleur. Il est peu gourmand pour les ressources désignées. Mais, il est en revanche plus lourd que le jpeg s’il est appliqué à des photos, beaucoup plus lourd même (entre 3 et 10 fois plus qu’un jpeg en qualité 60%). Il est possible de réduire le nombre de couleurs d’un PNG lors de son export (en PNG 8), et ainsi de réduire de façon importante le poids du fichier.
WebP : Ce format est assez récent. Créé en 2010 par Google, il permet de réduire le poids des ressources, avec une perte de qualité réduite. Jusqu’à 2020, il n’était pas pris en charge par l’ensemble des navigateurs, ce qui réduisait son utilisation. Maintenant intégré tant à Chrome qu’aux navigateurs IOS et Firefox, il est utilisable sur la majorité des sites web. Certains matériels anciens ne pourront cependant pas le lire. Le format WebP gère la transparence, comme le PNG. Il permet en outre de réduire de 10 à 40% le poids des images, en comparaison au .png et .jpeg.
SVG : Il s’agit ici d’un format vectorisé de fichier image. Il est donc très utile pour tous les visuels réalisés sur des logiciels tels illustrator. Il gère la transparence, et permet des visuels extensibles sans perte de qualité. Très utile pour les logos, les pictogrammes, et toute ressource désigné sur un logiciel vectoriel. A proscrire en revanche pour les photos. Il est peu gourmand pour les ressources s’y prêtant bien.
AVIF : Nouveau format d’images créé en 2019. Il permet des compressions encore plus importantes que le WebP, mais, n’est pas encore pris en charge par certains navigateurs. Vous le voyez, savoir choisir le bon format d’extension est primordial pour réduire le poids des ressources images.
Changer la résolution des images pour le web :
Afin de vous guider dans l’optimisation de vos images, nous allons prendre un cas concret avec cette image de chat trop mignon.
(source : Freepik.com )
L’image d’origine à une résolution de 5008 x 3343 pixels (sa taille d’origine sur la carte SD de l’appareil photo réflex). Elle pèse donc beaucoup trop lourd : 5,1 Mo…. Nous l’avons chargé en un peu plus léger pour éviter de polluer inutilement. Nous allons voir comment diviser son poids par 50 (et d’autant ses émissions carbone). Rappelez-vous que la résolution de l’espace utile central d’une page d’un site web fait généralement 1200 pixels de large. Nous allons donc utiliser Photoshop et redimensionner le format de l’image.
Photoshop :
- Ouvrez votre image dans photoshop
- Allez dans Fichier puis Exportation et cliquer sur “Enregistrer pour le web”
- Sélectionnez le format (ici JPEG puis la qualité à 60%)
- Régler la dimension de l’image en renseignant 1200 px
- Enregistrer l’image dans votre dossier
Et voilà, grâce à cette solution, vous avez optimisé votre image en 2 minutes. En passant d’un poids de 5300 Ko à 106 Ko, soit une réduction de … 98 % , ou une division par 50. Et oui, l’image optimisée émettra 50 fois moins de CO2 que l’image non optimisée, sans perte de qualité perçue. Vous pouvez ainsi voir la différence avec l’image avant et l’image après son optimisation.
Il ne vous reste plus qu’à intégrer la bonne image sur votre site internet ! 😉
Comment calculer et connaître l’empreinte carbone de son site web ?
Greenoco a été développé pour calculer et réduire l’empreinte carbone d’un site web. L’outil analyse votre audience, le contenu de chaque page et le pays d’hébergement du site web. Grâce à Greenoco, vous pourrez ensuite facilement identifier les optimisations à effectuer sur le site web et ainsi réduire ses émissions carbone et son temps de chargement. En effet, grâce à ses algorithmes de web-performance, Greenoco va identifier les ressources permettant les plus importantes économies de CO2 sur votre site.
Un site plus léger permet de réduire les consommations électriques des centres de données, et également celles des appareils des utilisateurs. De ce fait, les ordinateurs ou encore les téléphones ont besoin de moins de ressources et réduisent leur consommation électrique. Réduire l’impact des appareils numériques est aussi un enjeu majeur, et la réduction des émissions carbone des sites web peut aider à diminuer l’impact carbone du numérique.
Conclusion :
L’éco-conception des sites web présente un bénéfice pour l’image des entreprises mais aussi améliore la rapidité d’affichage du site et donc l’expérience utilisateur. Il est aussi synonyme d’un engagement écologique, car vous allez contribuer à limiter l’impact carbone de vos services numériques..
Pour commencer votre démarche de décarbonisation de votre site web, contactez-nous pour un audit carbone de site web, ou créez votre compte sur Greenoco !
