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 %.

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.