Minimiser les Dimensions des Images

L'objectif est de limiter le poids des composants utilisés sur le service pour réduire l'empreinte globale, tout en garantissant la qualité esthétique.

Illustration d'une grande image étant redimensionnée en une image plus petite.

Objectif : Adapter la taille au besoin

Les dimensions d'une image (sa résolution en pixels) sont directement proportionnelles à son poids (en ko ou Mo).

Il est inutile de charger une image de 2000x2000 pixels si elle est affichée dans un cadre de 300x300 pixels. Le navigateur devra la redimensionner, ce qui consomme des ressources, tout en ayant transféré des données inutiles.

Comment faire ?

  • ✓ Ajuster la taille : Faire concorder la taille de l'image (en pixels) avec sa dimension d'affichage maximale sur l'interface finale (vignette, miniature, bandeau, header...).
  • ✓ Tester : Réaliser des tests avec des visuels de tailles différentes pour déterminer jusqu'où il est possible de réduire la taille sans impacter l'esthétique de la page.
  • ✓ Utiliser srcset : Pour le responsive design, utiliser l'attribut srcset sur les balises <img> pour fournir au navigateur plusieurs tailles d'une même image. Le navigateur choisira la plus appropriée.
← Page Précédente : Arrêter la Lecture Hors Cadre Page Suivante : Formats d'Image Optimisés →