Eviter d'utiliser des images matricielles pour l'interface

Ce que dit le référentiel

Choisir le bon format d’image est crucial pour éviter de transporter des octets inutilement et économiser ainsi de la bande passante. Par ailleurs, avec la multiplication des terminaux, des tailles d’écran et l’augmentation de leur résolution, une approche vectorielle doit être privilégiée par rapport à des images matricielles. Grâce à cette bonne pratique, l’interface est indépendante de la résolution de l’écran. On limite donc aussi la dette technique. La première règle consiste à remplacer les images matricielles (GIF, PNG, JPEG, WebP, etc.) par des styles (CSS), des pictos, des glyphes ou des icônes fournis par une webfont ou une police standard. L’internaute n’a ainsi aucune ressource supplémentaire à télécharger. S’il n’est pas possible d’utiliser des CSS ou une police standard (déjà installée sur le terminal de l’internaute), vous pouvez aussi :

• employer une webfont ;
• recourir à une image vectorielle au format standard SVG.

Notre avis

Notre expertise en React permet une intégration optimale des SVG comme composants. En les transformant en composants React, nous évitons les appels à des images bitmap traditionnelles et encourageons leur interactivité, réduisant ainsi la bande passante nécessaire pour télécharger des images.

Cette approche rend l’interface réactive et indépendante des résolutions d’écran, préservant ainsi la performance tout en minimisant la dette technique. Les images SVG étant scalables, elles maintiennent la haute qualité visuelle sans compromettre la vitesse de chargement.