AccueilClientsExpertisesBlogOpen SourceContact

Bonne pratique

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.

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

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.

Règle de validation

Le nombre d'images matricielles pour l'URL testée doit être inférieur ou égal à 5

Ressources économisées

Réseau
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