Êtes-vous en mesure de déterminer la différence entre les deux images ci-dessous? S'agit-il de la même image?
Vous l'avez probablement deviné, mais non, ce n'est pas la même image! L'image de droite est en fait une version optimisée de l'image originale, située à gauche.
Cette amélioration a été réalisée manuellement à l'aide d'un outil que j'ai découvert aujourd'hui dans la dernière infolettre de Frontend Focus : SVGOMG.
SVGOMG est l'interface graphique manquante (Missing GUI en anglais) d'un outil Node.js spécialisé dans l'optimisation des fichiers graphiques vectoriels SVG, nommé SVGO.
L'interface de SVGOMG est très simple à utiliser et peut se résumer en trois étapes :
- Téléverser votre image SVG
- Jouer avec les différents contrôles offerts pour avoir une image quasi identique, mais avec un poids inférieur à l'image originale
- Télécharger l'image SVG résultante
Un des avantages d'utiliser une interface graphique et d'y aller avec un processus manuel est que nous pouvons plus facilement nous assurer de la qualité de l'image résultante.
Avec mon favicon, le poids de l'image est passé de 73 728 octets à 20 480 octets! Cela représente une économie d'environ 72 % de l'image originale! Impressionnant, non?😮
En effet, celle-ci compare la taille des fichiers compressés avec gzip! 😉
Vous aurez maintenant un site Web de plus dans votre palette d'outils! 😋
