Préférer les glyphes aux images

Ce que dit le référentiel

Les glyphes sont des caractères typographiques spécifiques, inclus dans les polices de caractères comme celles d'un système d'exploitation, utilisables en remplacement d'images monochromes telles que des symboles ou pictogrammes (chevron, triangle, point, carré, signes astrologiques, etc.) jusqu'aux illustrations permettant :

• de réduire la bande passante en économisant sur le poids
• de réduire le nombre de requêtes
• de réduire la complexité du DOM, notamment avec de nombreux pictogrammes SVG

Notre avis

Utiliser des SVG inlinés dans des composants React nous permet de remplacer les images par des glyphes facilement. Cela réduit la bande passante nécessaire pour charger le site car les SVG sont souvent moins lourds que les images traditionnelles.

En outre, inliner les SVG permet de réduire le nombre de requêtes HTTP, ce qui diminue la latence et améliore les temps de chargement. Évitant des charges supplémentaires sur le serveur, cela simplifie également le DOM en minimisant le besoin de nombreux appels externes.