Les images lourdes sont la première cause de lenteur des pages. Suivez ces étapes pour réduire leur poids sans perte de qualité visible.
Les images sont généralement la partie la plus lourde d'une page web. Une seule photo sortie d'un téléphone peut peser 3–5 MB, soit plus que ce que devrait peser une page entière bien conçue. Bonne nouvelle : on peut supprimer l'essentiel de ce poids sans que personne ne le remarque.
1. Redimensionnez avant de compresser
Si votre page affiche une image de 1200 pixels de large, inutile de servir un original de 4000 pixels. Ramenez-la à sa plus grande taille d'affichage, ou au double pour les écrans très nets. Le redimensionnement seul retire souvent 80 % ou plus du poids du fichier. Notre outil Redimensionneur d’image le fait en quelques clics.
2. Choisissez le bon format
Utilisez WebP ou JPG pour les photos, et PNG ou WebP pour les graphiques avec transparence. Enregistrer une photo en PNG la rend bien plus lourde que nécessaire.
3. Baissez un peu la qualité
Pour les photos, une qualité entre 70 % et 85 % paraît généralement identique à l'original en taille d'affichage normale. Descendez plus bas pour les vignettes et les arrière-plans. Comparez toujours le résultat avant de le publier.
4. Vérifiez le résultat
Regardez de près les zones avec des détails fins, du texte ou des dégradés doux. Si vous voyez des blocs ou des bandes, remontez légèrement la qualité. Notre outil Compresseur d’image affiche côte à côte la taille d'origine et la nouvelle taille pour vous aider à trouver le bon équilibre.
5. Laissez le navigateur vous aider
- Ajoutez les attributs
widthetheightpour que la page ne saute pas pendant le chargement des images. - Ajoutez
loading="lazy"aux images situées plus bas dans la page. - Proposez plusieurs tailles avec
srcsetpour que les téléphones téléchargent des fichiers plus légers.
Ensemble, ces étapes peuvent accélérer plusieurs fois le chargement des pages riches en images, ce que remarquent aussi bien les visiteurs que les moteurs de recherche.