Pourquoi l'optimisation des images est importante
Les images volumineuses ou chargées tardivement peuvent retarder le contenu principal et dégrader LCP. Commencez par les fichiers réellement demandés et mesurez leur contribution. Réduire les transferts peut améliorer le chargement, sans garantir de classement ni de hausse précise des conversions.
Choisir un format d'image
Comparez JPEG, PNG, WebP et AVIF sur des images représentatives, à une qualité acceptable. La plus petite taille dépend de l’image, de l’encodeur et des réglages. Vérifiez vos navigateurs cibles et prévoyez un format de repli si nécessaire. SVG convient aux illustrations vectorielles adaptées.
| Format | Atouts | Limites | Usages courants |
|---|---|---|---|
| JPEG | Souvent efficace pour les photos | Compression avec pertes, sans transparence alpha | Photos |
| PNG | Encodage sans perte et transparence | Photos parfois volumineuses | Graphiques aux détails sans perte |
| WebP | Avec ou sans perte, transparence | Vérifier les anciens navigateurs et la taille finale | Photos, graphiques, animation |
| AVIF | Bonne compression possible à qualité utile | Vérifier coût d’encodage et compatibilité | Photos et graphiques |
| SVG | Dessin vectoriel redimensionnable | Ne remplace pas les photos matricielles | Icônes, logos, illustrations |
Images adaptatives : srcset et sizes
Listez les variantes dans srcset et décrivez leur largeur dans la mise en page avec sizes. Le navigateur choisit selon ces données et les conditions de l’appareil. Les largeurs ci-dessous sont des exemples à adapter au CSS réel. L’exemple concerne une image hors de la vue initiale ; remplacez le texte alternatif illustratif et utilisez les proportions réelles.
<img
src="example-400w.jpg"
srcset="example-400w.jpg 400w, example-800w.jpg 800w, example-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Lac de montagne"
width="1200"
height="800"
loading="lazy"
/>
Chargement différé des images hors écran
loading="lazy" permet de différer une image jusqu’à ce qu’elle approche de la zone visible. Le téléchargement peut commencer avant son apparition ; le moment dépend du navigateur et des conditions.
- Différer les images non critiques peut réduire le transfert initial et les requêtes concurrentes.
- Ne différez pas l’image principale visible au chargement, surtout l’image LCP probable : cela peut dégrader LCP.
- Réservez de l’espace avec des dimensions ou un rapport d’aspect corrects pour réduire les décalages de mise en page.
Exemple d’image située sous la vue initiale. Les dimensions sont illustratives : utilisez celles du fichier réel.
<img src="example.webp" alt="Lac de montagne" width="1200" height="800" loading="lazy" />
Outils et services d'optimisation
| Outil | Descriptif | Lien |
|---|---|---|
| TinyPNG | Service en ligne pour compresser des fichiers PNG et JPEG | TinyPNG |
| ImageOptim | Optimisation des images sur macOS | ImageOptim |
| Squoosh | Un outil puissant de Google | Squoosh |
Conseils pratiques et exemples
- Comparez les formats à qualité acceptable et ajoutez un format de repli si nécessaire.
- Faites correspondre
srcsetetsizesau véritable affichage et aux appareils. - Réservez
loading="lazy"aux images hors écran, sans différer l’image LCP probable. Le mécanisme natif ne demande généralement pas d’Intersection Observer ; une logique personnalisée doit répondre à un besoin précis. - Automatisez le redimensionnement et la compression dans la compilation ou la diffusion, puis inspectez le résultat.
- Comparez PageSpeed Insights et les Web Vitals utiles, dont LCP et CLS, avant et après dans des conditions comparables.
Vérifiez le résultat publié
Vérifiez le fichier choisi, les octets transférés, la qualité et la priorité de chargement. Répétez sur des mises en page mobiles et d’ordinateur représentatives. L’image principale doit apparaître rapidement et la mise en page rester stable.
Réduisez les octets inutiles tout en préservant le contenu et la qualité nécessaires au lecteur.
Utilisez notre test de vitesse pour examiner la page, puis vérifiez les changements d’images dans le navigateur. Séparez les gains mesurés des hypothèses non vérifiées.
