RWEB 0030 Préférer les glyphes aux images
Ref. Version →
Ref. BP →
GreenIT
20
2.0.0
0018
3.0.0
0030
4.0.0
0030
Description
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
Exemple
Pour optimiser une landing page comprenant visuellement :
Un gain de 91% du poids a été réalisé en incluant pictogrammes et illustrations vectorielles dans une icon font via Font Forge.
Pour aller plus loin : https://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements
Principe de validation
| Le nombre | est inférieur ou égal à |
|---|---|
| d'images qui auraient pu être remplacées par un glyphe (symbole de police de caractère) | 0 |