Sur la plupart des pages web, les images représentent la plus grande part des octets téléchargés. Une photo de 5 Mo posée là où 150 Ko suffiraient ralentit l'affichage, consomme les données mobiles des visiteurs et dégrade les indicateurs de performance que Google mesure. La bonne nouvelle : en agissant sur trois leviers dans l'ordre (les dimensions, le format puis la qualité), on divise couramment le poids d'une image par dix sans différence visible. Ce guide donne la méthode, des repères chiffrés et les bonnes pratiques de mise en ligne.
Appliquez-la avec le redimensionneur, le convertisseur de format, le compresseur et le générateur de favicons. Tout se fait dans votre navigateur, sans envoi de fichier.
Pourquoi le poids des images compte
- Vitesse d'affichage. L'image principale d'une page est souvent l'élément qui détermine le « Largest Contentful Paint » (LCP), l'indicateur de rapidité d'affichage du contenu principal. Plus elle est lourde, plus le LCP s'allonge.
- Données mobiles. Une page avec dix images de 3 Mo coûte 30 Mo à un visiteur sur réseau mobile.
- Référencement et expérience. Google intègre des indicateurs de performance dans son évaluation des pages, et un visiteur qui attend part plus facilement.
- Coût d'hébergement et empreinte carbone : chaque octet transféré a un coût.
Un téléphone ou un appareil photo produit des fichiers de 3 à 10 Mo, bien plus que nécessaire pour un écran. L'optimisation consiste à ne livrer que les pixels utiles, dans un format efficace, avec une qualité raisonnable.
Levier 1 : les dimensions (le plus efficace)
Une photo de 4 000 × 3 000 px affichée sur 800 px de large contient 25 fois plus de pixels que nécessaire. Réduire les dimensions est de loin le gain le plus important, car le poids d'une image varie à peu près comme son nombre de pixels : réduire chaque côté de moitié divise le nombre de pixels (et grossièrement le poids) par quatre.
| Usage | Largeur de l'image |
|---|---|
| Vignette, avatar | 200 à 400 px |
| Image d'article (colonne de texte) | 800 à 1 200 px |
| Image pleine largeur | 1 600 à 1 920 px |
| Image de partage (Open Graph) | 1 200 × 630 px |
Écrans haute densité. Un écran « 2x » (la plupart des téléphones) a quatre fois plus de pixels pour la même surface : pour qu'une image affichée sur 600 px de large soit nette, elle doit mesurer jusqu'à 1 200 px. Au-delà, on livre des pixels inutiles. La solution est de proposer plusieurs versions et de laisser le navigateur choisir avec srcset et sizes.
Levier 2 : le format
| Format | Compression | Transparence | À privilégier pour |
|---|---|---|---|
| JPEG | avec perte | non | Photos ; compatibilité universelle |
| WebP | avec ou sans perte | oui | Photos et illustrations pour le web ; en général plus léger que JPEG et PNG |
| AVIF | avec ou sans perte | oui | Très bonne compression ; encodage plus lent |
| PNG | sans perte | oui | Captures d'écran, logos aux aplats, détails fins |
| SVG | vectoriel | oui | Logos, icônes, formes géométriques : net à toute taille |
- Selon web.dev, WebP et AVIF offrent généralement une meilleure compression que JPEG et PNG, et sont pris en charge par tous les navigateurs récents ; on peut les proposer avec un JPEG ou un PNG de secours via la balise
picture. - Le PNG donne la meilleure qualité possible mais des fichiers beaucoup plus lourds : réservez-le aux images où la perte n'est pas acceptable.
- Remplacez les GIF animés par de courtes vidéos : le gain de poids est considérable.
- Évitez de mettre du texte dans une image : il n'est ni sélectionnable, ni recherchable, ni accessible.
- Pour les icônes et logos, préférez le SVG : voir la bibliothèque d'icônes.
Levier 3 : la qualité de compression
Dans un format avec perte (JPEG, WebP), le curseur de qualité arbitre entre netteté et poids.
| Qualité | Résultat |
|---|---|
| 90 à 100 % | Quasi identique à l'original, poids élevé |
| 75 à 85 % | Excellent compromis pour le web : différence presque invisible |
| 60 à 70 % | Acceptable pour des vignettes ; léger flou sur les dégradés |
| moins de 50 % | Artefacts visibles (blocs, halos) : à éviter |
Partez toujours de l'original (jamais d'une image déjà compressée) et ne recompressez pas plusieurs fois. Comparez le résultat à l'écran sur une image importante avant de traiter un lot.
Mise en ligne : les bonnes pratiques HTML
<img src="photo-800.webp"
srcset="photo-480.webp 480w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(min-width: 900px) 800px, 100vw"
width="800" height="533" alt="Description utile de la photo"
loading="lazy" decoding="async">widthetheight: renseignez-les toujours, pour que le navigateur réserve la place et que la page ne « saute » pas au chargement (indicateur CLS).loading="lazy"pour les images situées sous la ligne de flottaison ; pas pour l'image principale, qui doit se charger en priorité.alt: un texte alternatif utile pour les lecteurs d'écran et le référencement (vide pour une image purement décorative).- Noms de fichiers descriptifs (
velo-electrique-pliant.webp) plutôt queIMG_4521.jpg. - Métadonnées : supprimez les données EXIF (position GPS, appareil) avant publication ; le passage par les outils d'Outilia les retire.
- Favicon et icônes d'application : générez-les à partir d'une image source d'au moins 512 px.
Un flux de travail en quatre étapes
- Redimensionnez chaque image à la taille d'affichage maximale (en tenant compte du « 2x » si besoin).
- Choisissez le format : WebP pour la plupart, SVG pour les logos et icônes, PNG pour les captures sans perte.
- Compressez à 75-85 % et vérifiez visuellement.
- Intégrez avec
width,height,altet, si besoin,srcset, puis mesurez la page (outil PageSpeed ou Lighthouse) pour confirmer le gain.
Objectif réaliste : une image d'article de 800 à 1 200 px de large devrait peser entre 40 et 150 Ko ; une grande image pleine largeur, 150 à 300 Ko. Si vos images dépassent 500 Ko, il y a presque toujours un gain facile à réaliser.
Questions fréquentes
Quel poids viser pour une image de site web ?
Entre 40 et 150 Ko pour une image d'article de 800 à 1 200 px de large, 150 à 300 Ko pour une grande image pleine largeur. Au-delà de 500 Ko, il existe presque toujours un gain facile.
WebP ou JPEG ?
WebP donne en général des fichiers plus légers à qualité équivalente et accepte la transparence ; tous les navigateurs récents l'affichent. Gardez le JPEG pour une compatibilité maximale (courriels, logiciels anciens) ou comme secours via la balise picture.
Quelle qualité JPEG choisir ?
Entre 75 et 85 % pour des photos destinées au web : la différence avec l'original est rarement visible, et le poids diminue fortement. En dessous de 60 %, les défauts deviennent perceptibles.
Faut-il toujours mettre loading="lazy" ?
Non : uniquement sur les images situées sous la ligne de flottaison. L'image principale visible au chargement doit se charger en priorité, sinon l'affichage est retardé.
Pourquoi renseigner width et height sur les images ?
Pour que le navigateur calcule l'espace à réserver avant le chargement et évite que la page ne se décale quand l'image arrive, ce qui améliore le score de stabilité visuelle (CLS).