Pourquoi les images dominent le poids de la page
Un document HTML typique avec CSS et JavaScript pourrait transférer 200–500 Ko. Une seule photographie non optimisée peut faire 5–15 Mo. Sur une connexion mobile à 10–20 Mbit/s en moyenne, une image de 10 Mo met 4–8 secondes à se télécharger. La plupart des visiteurs n’attendront pas.
Les images affectent aussi les Core Web Vitals — les mesures de Google pour l’expérience de page qui influencent le classement. Le Largest Contentful Paint (LCP) mesure le temps que met le plus grand élément visible à s’afficher. Si cet élément est une image hero, son temps de téléchargement détermine directement votre score LCP. Un LCP lent nuit à la fois à l’expérience utilisateur et au classement.
Les suspects habituels, et la solution pour chacun
Un chargement lent des images se ramène presque toujours à l’un d’eux. Chacun a une solution rapide et un bénéfice significatif :
| Cause | Solution | Économie typique |
|---|---|---|
| Mauvais format (photo PNG) | Convertir en WebP ou JPG | 80 % ou plus |
| Téléversement en pleine résolution | Redimensionner à environ 2× la largeur d’affichage | 70–80 % |
| Compression faible ou sautée | Exporter en qualité 75–85 | 3–5× vs qualité 95 |
| Pas de chargement différé | Ajouter loading=lazy sous la ligne de flottaison | Moins de données au premier chargement |
| HEIC servi brut | Convertir d’abord en WebP ou JPG | Évite les images cassées |
Le mauvais format pour le type de contenu
Utiliser le PNG pour les photographies est l’une des erreurs d’image les plus courantes sur le web. Le PNG est sans perte et préserve chaque pixel, ce qui compte pour les logos et les captures d’écran mais pas pour les photos. Une photographie enregistrée en PNG peut faire 15–25 Mo. La même photo en JPEG haute qualité fait 2–5 Mo. En WebP, elle peut être sous 2 Mo avec une qualité visible identique.
L’inverse est aussi une erreur : utiliser le JPEG pour les captures, les schémas ou les images avec du texte. Le JPEG introduit des artefacts visibles sur les bords durs et les zones de couleur unie, ce qui exige des réglages de qualité élevés produisant de gros fichiers. Le PNG ou le WebP gère ce contenu plus petit et plus propre.
Téléverser des images en pleine résolution d’appareil
Une photo d’un smartphone moderne fait 12–50 mégapixels et 3000–8000 pixels de large. La plupart des pages web affichent les images de contenu à 600–1600 pixels de large. Quand vous téléversez le fichier d’appareil en pleine résolution sur votre site, le navigateur télécharge les 8000 pixels et les met à l’échelle à 800 pixels pour l’affichage. Vous transférez 10× plus de données que nécessaire.
Redimensionner l’image à la plus grande largeur à laquelle elle sera jamais affichée — environ le double de la largeur d’affichage CSS pour les écrans haute densité — avant le téléversement est souvent la plus grande réduction de taille disponible à elle seule. Une image de 4000 pixels redimensionnée à 1600 pixels est généralement 70–80 % plus petite avant toute compression de qualité.
Sauter la compression ou utiliser le mauvais réglage de qualité
Beaucoup de systèmes de gestion de contenu acceptent et stockent les images téléversées sans compression. WordPress, Squarespace, Shopify et les plateformes similaires appliquent parfois un peu de compression par défaut, mais les réglages varient et sont souvent conservateurs. L’original téléversé peut être bien plus gros que nécessaire.
Pour le JPEG et le WebP, un réglage de qualité de 75–85 convient à la plupart des photographies affichées sur une page web. En dessous de 75, les artefacts de compression deviennent visibles. Au dessus de 85, la taille de fichier augmente nettement avec une amélioration visuelle décroissante. Beaucoup de développeurs choisissent par défaut la qualité 95 ou 100, ce qui produit des fichiers 3–5× plus gros que la qualité 80 sans différence visible aux tailles d’affichage normales.
Pas de chargement différé sur les images sous la ligne de flottaison
Par défaut, les navigateurs tentent de charger toutes les images d’une page pendant le rendu initial, y compris les images bien en dessous de la zone visible (la ligne de flottaison). Pour une longue page d’article avec 10 images, le navigateur essaie de télécharger les 10 simultanément même si le lecteur ne fera peut-être jamais défiler pour en voir la plupart.
L’attribut loading="lazy" sur une balise <img> indique au navigateur de différer le chargement de l’image jusqu’à ce qu’elle soit sur le point d’entrer dans le viewport, ce qui réduit nettement les données transférées au chargement initial de la page. Appliquez-le à toutes les images qui ne sont pas visibles dans le premier viewport. Ne l’appliquez pas à l’image hero ni à aucune image au-dessus de la ligne de flottaison — celles-ci doivent se charger le plus vite possible pour un bon score LCP.
Pour l’image hero en particulier, ajoutez fetchpriority="high" pour que le navigateur la récupère avant les scripts et les autres images. Utilisez-le sur une seule image par page — l’élément LCP — et laissez le reste à la valeur par défaut.
<img src="photo.webp" loading="lazy" alt="description" /><img src="hero.webp" fetchpriority="high" width="1200" height="675" alt="hero" />
Attributs width et height manquants
Quand un navigateur commence à rendre une page, il ne connaît pas encore les dimensions des images qu’il n’a pas téléchargées. Sans attributs width et height explicites dans le HTML, le navigateur ne peut pas réserver le bon espace, et la mise en page se décale à mesure que les images se chargent — un saut visuel gênant appelé Cumulative Layout Shift (CLS). Ajouter des dimensions explicites empêche le décalage de mise en page et permet au navigateur de commencer la mise en page sans attendre le téléchargement de l’image :
<img src="photo.webp" width="800" height="533" alt="description" />
HEIC ou formats inhabituels téléversés directement
Les iPhones prennent en HEIC par défaut. Si des fichiers HEIC sont téléversés sur un site web et servis sans conversion, ils ne s’afficheront pas dans Chrome, Firefox et Edge. Les visiteurs sous Windows et Android voient une icône d’image cassée. Convertissez toujours le HEIC en JPEG ou WebP avant de publier.
Une liste de contrôle d’optimisation pratique
PhotoTools gère les étapes de conversion de format, de redimensionnement et de compression dans votre navigateur sans rien téléverser vers un serveur. Traitez les images avant le téléversement pour garder vos pages rapides, et passez en revue cette liste :
- Utilisez le WebP pour les photographies et la plupart des images web. Utilisez le PNG pour les graphiques avec texte ou transparence.
- Redimensionnez les images à la plus grande largeur à laquelle elles seront réellement affichées, environ 2× la largeur d’affichage CSS pour les écrans retina.
- Compressez le JPEG et le WebP en qualité 75–85 pour les images web standard.
- Ajoutez loading="lazy" à toutes les images sous la ligne de flottaison.
- Ajoutez des attributs width et height explicites à toutes les images.
- Convertissez les fichiers HEIC en JPEG ou WebP avant de téléverser.
- Vérifiez les tailles de fichier finales : une image web affichée à 800 pixels CSS de large devrait être sous 200 Ko dans la plupart des cas.