Optimisation des images web : poids, formats et bonnes pratiques
Réduire le poids des images sans sacrifier la qualité visible, et les techniques de chargement à connaître.
Choisir le bon format
| Format | Idéal pour | À éviter pour |
|---|---|---|
| JPEG | Photos, dégradés | Textes, logos, formes nettes (flou de compression) |
| PNG | Logos, icônes, captures avec transparence | Grandes photos (fichiers plus lourds que JPEG) |
| WebP | Remplace JPEG/PNG avec un poids réduit | Compatibilité très ancienne (rare aujourd'hui) |
| SVG | Logos, icônes, illustrations vectorielles | Photos (ne s'y prête pas) |
| AVIF | Photos, meilleure compression que WebP | Compatibilité encore partielle selon les navigateurs |
Réduire le poids
- Redimensionner à la taille d'affichage réelle plutôt que de servir une image en pleine résolution rétrécie par le CSS.
- Compresser (une qualité de 70-85 % en JPEG suffit généralement, sans perte visible).
- Servir plusieurs tailles (
srcset) pour que chaque appareil télécharge la taille adaptée à son écran.
Une image « responsive » bien configurée peut réduire le poids transféré sur mobile de 60 à 80 % par rapport à une image desktop servie telle quelle.
Chargement
loading="lazy"sur les images hors de l'écran initial : elles ne se chargent que lorsqu'elles approchent de la zone visible.- Réserver l'espace de l'image (attributs
width/heightouaspect-ratioen CSS) pour éviter que la page ne « saute » pendant le chargement.
Vérifier le résultat
Les outils d'audit de performance intégrés aux navigateurs (onglet Performance/Lighthouse) signalent les images non optimisées et estiment le gain potentiel.
Merci pour votre retour !