AccueilClientsExpertisesBlogOpen SourceContact

Bonne pratique

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

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

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.

Règle de validation

Le nombre d'images qui auraient pu être remplacées par un glyphe (symbole de police de caractère) doit être inférieur ou égal à 0

Ressources économisées

Stockage
Réseau
Requêtes
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