8 erreurs courantes qui alourdissent vos images (et comment les corriger)
Votre site est lent et vous ne comprenez pas pourquoi ? Il y a de fortes chances que vos images soient en cause. Les images représentent en moyenne 50 % du poids total d’une page web, et quelques erreurs courantes peuvent facilement doubler ou tripler ce poids.
Voici les 8 erreurs les plus fréquentes et comment les corriger immédiatement.
Bloquer les publicités gratuitement — Installer l’extension Chrome
Vue d’ensemble des 8 erreurs
| # | Erreur | Impact sur le poids | Difficulté de correction |
|---|---|---|---|
| 1 | Images non compressées | +200-500 % | Facile |
| 2 | Mauvais format d’image | +50-300 % | Facile |
| 3 | Dimensions surdimensionnées | +100-400 % | Facile |
| 4 | Métadonnées EXIF conservées | +10-20 % | Très facile |
| 5 | Pas de lazy loading | Pas de gain poids, mais chargement lent | Facile |
| 6 | Images en double résolution | +100-200 % | Moyen |
| 7 | Captures d’écran non optimisées | +200-500 % | Facile |
| 8 | GIF animés au lieu de vidéos | +500-1000 % | Moyen |
Erreur n°1 : Publier des images sans les compresser
Le problème : c’est l’erreur la plus courante et la plus impactante. Une photo sortie d’un appareil photo ou d’un smartphone pèse entre 3 et 15 Mo. Publiée telle quelle sur un site web, elle ralentit drastiquement le chargement.
L’impact : une page avec 5 photos non compressées peut peser 25 à 50 Mo, au lieu de 1 à 2 Mo après optimisation.
La solution : compressez systématiquement chaque image avant publication. Un réglage JPEG à 80 % de qualité réduit le poids de 70 à 85 % sans perte visible.
Utilisez notre guide pour compresser vos images en ligne gratuitement.
Erreur n°2 : Utiliser le mauvais format d’image
Le problème : sauvegarder une photo en PNG au lieu de JPEG, ou un logo en JPEG au lieu de PNG. Chaque format a un usage optimal.
Comparatif de poids pour la même image :
| Type de contenu | En PNG | En JPEG (80 %) | En WebP (80 %) | Meilleur choix |
|---|---|---|---|---|
| Photo (paysage) | 8 Mo | 800 Ko | 550 Ko | WebP ou JPEG |
| Logo simple | 50 Ko | 80 Ko | 35 Ko | WebP ou PNG |
| Capture d’écran | 1,2 Mo | 300 Ko | 200 Ko | WebP ou JPEG |
| Icône | 15 Ko | 25 Ko | 10 Ko | SVG ou WebP |
| Graphique avec texte | 200 Ko | 150 Ko | 100 Ko | WebP ou PNG |
La solution : utilisez JPEG pour les photos, PNG pour les logos et graphiques avec transparence, WebP pour tout si la compatibilité le permet. Consultez notre guide complet sur les différences entre JPEG, PNG et WebP.
Erreur n°3 : Ne pas redimensionner les images
Le problème : uploader une image de 4000 x 3000 px alors qu’elle s’affiche en 600 x 450 px sur la page. Le navigateur télécharge l’intégralité de l’image puis la réduit côté client.
L’impact : une image 4000 px pèse environ 4x plus qu’une image 2000 px et 16x plus qu’une image 1000 px (la taille du fichier augmente avec le carré des dimensions).
La solution :
- Déterminez la taille d’affichage réelle (inspecteur Chrome > onglet Éléments)
- Redimensionnez l’image à 2x cette taille (pour les écrans Retina)
- Utilisez
srcsetpour servir différentes tailles selon l’appareil
Pour connaître les bonnes dimensions, consultez notre guide sur les tailles idéales d’images pour le web en 2026.
Erreur n°4 : Conserver les métadonnées EXIF
Le problème : les appareils photo et smartphones intègrent des données EXIF dans chaque image : modèle de l’appareil, réglages, date, et parfois coordonnées GPS. Ces données pèsent entre 10 Ko et 200 Ko par image.
L’impact : sur un site avec 100 images, les données EXIF peuvent représenter 1 à 20 Mo supplémentaires. En plus du poids, elles posent un problème de confidentialité (localisation GPS).
La solution : supprimez systématiquement les EXIF pour les images destinées au web. La plupart des compresseurs d’images le font automatiquement. Vérifiez l’option « supprimer les métadonnées » dans votre outil.
Bloquer les publicités gratuitement — Installer l’extension Chrome
Erreur n°5 : Ne pas utiliser le lazy loading
Le problème : par défaut, le navigateur charge toutes les images de la page dès l’ouverture, même celles qui sont tout en bas et invisibles à l’écran.
L’impact : sur une page longue avec 20 images, le navigateur télécharge les 20 d’un coup au lieu de ne charger que les 3-4 visibles. Cela ralentit le chargement initial.
La solution : ajoutez l’attribut loading="lazy" à toutes les images sauf celles au-dessus de la ligne de flottaison :
<!-- Image visible immédiatement — PAS de lazy loading -->
<img src="hero.webp" alt="Image principale" width="1200" height="600">
<!-- Images en bas de page — lazy loading -->
<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">
Erreur n°6 : Servir des images en double résolution sur tous les écrans
Le problème : pour supporter les écrans Retina (2x), certains sites servent des images en haute résolution à tous les visiteurs, y compris ceux avec des écrans standard.
L’impact : les utilisateurs avec un écran 1x téléchargent une image 4x plus lourde que nécessaire.
La solution : utilisez l’attribut srcset pour servir la bonne résolution :
<img
src="image-800.webp"
srcset="image-800.webp 1x, image-1600.webp 2x"
alt="Description"
width="800" height="600"
>
Erreur n°7 : Utiliser des captures d’écran non optimisées
Le problème : les captures d’écran (screenshots) sont souvent sauvegardées en PNG haute résolution. Une simple capture d’écran peut peser 1 à 5 Mo.
L’impact : un tutoriel avec 10 captures d’écran peut peser 10 à 50 Mo sans optimisation.
La solution :
- Recadrez la capture pour ne garder que la zone utile
- Redimensionnez à la largeur d’affichage (800-1200 px max)
- Convertissez en JPEG 80 % si la capture ne contient pas de texte fin
- Pour les captures avec du texte, gardez le PNG mais compressez avec pngquant
Pour convertir vos captures, utilisez notre guide convertir PNG en JPG sans perte.
Erreur n°8 : Utiliser des GIF animés au lieu de vidéos
Le problème : les GIF animés sont extrêmement lourds. Un GIF de 5 secondes peut peser 5 à 20 Mo, alors que la même animation en vidéo MP4 ne pèserait que 500 Ko à 2 Mo.
L’impact : un seul GIF animé peut peser plus que tout le reste de la page réuni.
La solution : remplacez les GIF par des vidéos MP4 en autoplay :
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
| Format | Poids (5 sec, 480p) | Qualité | Support |
|---|---|---|---|
| GIF | 5-20 Mo | 256 couleurs | Universel |
| WebP animé | 1-4 Mo | 16,7M couleurs | 97 % |
| MP4 (H.264) | 0,5-2 Mo | Excellente | Universel |
| WebM (VP9) | 0,3-1,5 Mo | Excellente | 96 % |
Checklist : vérifiez votre site
Avant de publier, passez en revue cette checklist :
| Vérification | Outil | OK si… |
|---|---|---|
| Images compressées | PageSpeed Insights | Pas d’avertissement « images » |
| Bon format utilisé | Inspection manuelle | JPEG pour photos, PNG pour logos |
| Dimensions correctes | DevTools Chrome | Taille affichée ≈ taille naturelle / 2 |
| EXIF supprimées | ExifTool / inspection | Pas de données GPS/appareil |
| Lazy loading actif | DevTools > Network | Images hors écran non chargées |
| Pas de GIF lourd | DevTools > Network | Aucun fichier > 2 Mo |
Conclusion
Ces 8 erreurs sont faciles à corriger et l’impact est immédiat. En compressant, redimensionnant et choisissant le bon format pour chaque image, vous pouvez réduire le poids de vos pages de 50 à 90 %. Votre site sera plus rapide, mieux référencé et plus agréable à naviguer.
Commencez par les erreurs n°1 (compression) et n°3 (redimensionnement) — ce sont celles qui ont le plus grand impact.
Bloquer les publicités gratuitement — Installer l’extension Chrome
FAQ
Comment savoir si mes images sont trop lourdes ?
Utilisez Google PageSpeed Insights ou l’onglet Network des DevTools Chrome. Si une image individuelle pèse plus de 300 Ko ou si le total des images dépasse 2 Mo, il y a matière à optimiser.
Mon CMS compresse-t-il automatiquement les images ?
WordPress, Shopify et certains CMS appliquent une compression légère à l’upload, mais elle est souvent insuffisante. Un plugin dédié (Imagify, ShortPixel) offre des résultats bien meilleurs.
Le CDN résout-il le problème des images lourdes ?
Non. Un CDN accélère la livraison des fichiers (en réduisant la distance réseau) mais ne réduit pas leur poids. Vous devez compresser vos images ET utiliser un CDN pour un résultat optimal.
Combien de Ko devrait peser une image web idéale ?
En règle générale : 50-150 Ko pour une image standard, 150-300 Ko pour une hero image plein écran, et moins de 50 Ko pour les vignettes et icônes. Le total des images d’une page devrait rester sous 1,5-2 Mo.
Les images SVG ont-elles besoin d’être compressées ?
Les SVG sont déjà légers par nature (texte XML) mais peuvent être optimisés avec SVGO qui supprime les données inutiles (métadonnées éditeur, attributs redondants). La compression Gzip du serveur réduit ensuite le poids de transfert de 50-70 %.