AccueilClientsExpertisesBlogOpen SourceContact

Bonne pratique

Optimiser les images vectorielles

Ce que dit le référentiel

Les navigateurs modernes sont tous compatibles avec le format d’image vectorielle SVG (Scalable Vector Graphics), basé sur un ensemble de vecteurs décrits en XML. Les images SVG ont deux avantages indéniables : d’une part, elles peuvent être réduites et agrandies à l’infini sans dégradation de qualité ; d’autre part, elles sont, la plupart du temps, moins lourdes que des images bitmap.

Cependant, la plupart des images SVG contiennent de nombreuses métadonnées qui ont été nécessaires à leur création. C’est par exemple le cas des informations de couche (layer), des commentaires, etc., qui sont indispensables pour éditer l’image, mais inutiles pour l’afficher. D’où l’idée de les supprimer pour réduire le poids des fichiers. De nombreux outils de minification et d’optimisation, tels que Compressor.io, SVG Cleaner, ou SVGO sont disponibles.

Le taux de compression via gzip varie selon la complexité de l’image. Mais il est toujours élevé, car il s’agit de compresser du texte : en général, on atteint des ratios de l’ordre de 75 % à 80 %.

Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.

Plus d'informations sur collectif.greenit.fr et ecoconceptionweb.com.

Notre avis

React.js offre des outils pour optimiser les images vectorielles en amont. Par exemple, SVGO et ImageMin peuvent être intégrés dans le pipeline de build pour automatiser la minification et la suppression des métadonnées inutiles.

En utilisant des scripts de build configurés avec React, nous pouvons garantir que toutes les images SVG sont optimisées avant leur déploiement en production. Cette méthode améliore les temps de chargement et réduit la bande passante utilisée, contribuant ainsi à une empreinte environnementale plus faible.

Règle de validation

Le nombre d'images non optimisées doit être inférieur ou égal à 0%

Ressources économisées

Réseau
Bonne pratique précédente
Précédent
Bonne pratique suivante
Suivant
18 avenue Parmentier
75011 Paris
+33 1 43 57 39 11
hello@premieroctet.com

Suivez nos aventures

GitHub
X (Twitter)
Flux RSS

Naviguez à vue