Un tutoriel concret pour mesurer puis réduire le poids des images d’une page réelle. On suit les bons indicateurs, on choisit le bon format et on vérifie l’impact sur le LCP.
Pour optimiser les images d’un site web, commencez par mesurer une page réelle, puis corrigez les images qui pèsent lourd, sont trop grandes ou bloquent le Largest Contentful Paint. En pratique, on exporte les visuels aux bonnes dimensions, on sert du WebP ou de l’AVIF quand c’est pertinent, puis on compare le poids transféré et le LCP avant/après. L’objectif n’est pas d’avoir des images minuscules, mais des images nettes, adaptées à l’écran et rapides à charger.
Une image trop lourde peut ralentir une page vitrine, une fiche produit WooCommerce, une landing page ou un article de blog. Le piège classique : changer de format sans mesurer. On peut gagner beaucoup plus en passant d’une image de 3000 px à une image de 1200 px bien compressée qu’en changeant seulement l’extension du fichier.
Voici une méthode de travail que vous pouvez appliquer à une page existante de votre site, sans inventer de performance théorique. Elle complète notre article dédié au SEO des images, avec un angle plus technique : format, dimensions, poids et impact sur le chargement.
Sommaire
- Pourquoi mesurer avant de compresser les images ?
- Que faut-il mesurer sur une page réelle ?
- Quel format choisir entre JPEG, PNG, WebP et AVIF ?
- Quelles dimensions prévoir pour les images ?
- Comment optimiser une page étape par étape ?
- Comment gérer les images dans WordPress ?
- Comment améliorer le LCP avec les images ?
- Questions fréquentes
- Sources
Pourquoi mesurer avant de compresser les images ?
Parce que toutes les images n’ont pas le même impact. Une miniature en bas de page n’a pas le même poids dans l’expérience utilisateur qu’une grande image héro affichée au-dessus de la ligne de flottaison. Le LCP mesure le temps nécessaire pour afficher le plus grand élément visible dans la fenêtre, souvent une image ou un bloc de texte important. Google indique qu’un bon LCP se situe à 2,5 secondes ou moins, mesuré au 75e percentile des chargements de page. (web.dev)
Si vous optimisez toutes les images au hasard, vous risquez de perdre du temps sur des fichiers secondaires. La bonne approche consiste à choisir une page, à noter son poids transféré, son image principale, son LCP, puis à refaire les mêmes mesures après optimisation.
Définition rapide : le poids d’une image correspond à la quantité de données téléchargées par le navigateur. Les dimensions correspondent à sa largeur et sa hauteur en pixels. Une image peut être légère mais trop petite, ou très grande mais mal compressée.
Que faut-il mesurer sur une page réelle ?
Choisissez une page importante : accueil, service, fiche produit, page catégorie ou article générant du trafic. Lancez une mesure mobile et desktop avec PageSpeed Insights, puis complétez avec l’onglet Network de Chrome DevTools. PageSpeed Insights distingue les données de laboratoire, utiles pour déboguer, et les données terrain issues d’utilisateurs réels quand elles sont disponibles. Les données terrain couvrent une période récente de 28 jours dans l’outil. (developers.google.com)
Notez les informations suivantes dans un tableau. Le but est de créer votre propre relevé avant/après, pas de comparer votre site à une moyenne générale.
| Indicateur | Avant optimisation | Après optimisation | Pourquoi le suivre |
|---|---|---|---|
| Poids total transféré | À relever | À relever | Mesure la quantité de données chargées par la page. |
| Poids des images | À relever | À relever | Permet de savoir si les images sont le principal frein. |
| Image LCP | À identifier | À vérifier | C’est souvent l’image prioritaire à corriger. |
| LCP mobile | À relever | À relever | Montre l’impact sur le chargement perçu. |
| Nombre de fichiers image | À relever | À relever | Aide à détecter les galeries ou carrousels trop lourds. |
Dans Chrome DevTools, ouvrez l’onglet Network, rechargez la page avec le cache désactivé, puis filtrez les fichiers image. La documentation Chrome montre notamment comment repérer les tailles de fichiers et tester l’effet d’images redimensionnées dans Lighthouse. (developer.chrome.com)
Quel format choisir entre JPEG, PNG, WebP et AVIF ?
Le format dépend du visuel. Il ne faut pas convertir mécaniquement tous les fichiers dans le même format. Une photo, un logo transparent, une icône et une capture d’écran n’ont pas les mêmes besoins.
| Format | À utiliser pour | À éviter pour | Remarque pratique |
|---|---|---|---|
| JPEG | Photos, visuels sans transparence | Logos, pictos, textes fins | Bon format de secours, largement pris en charge. |
| PNG | Transparence, captures, éléments graphiques nets | Grandes photos | Peut devenir lourd sur les grands visuels. |
| WebP | Photos, illustrations, images avec transparence | Cas où un ancien environnement impose un secours | Bon compromis moderne pour de nombreux sites. |
| AVIF | Photos et visuels riches quand le pipeline le supporte | Production trop lente ou CMS non configuré | Très intéressant, mais à tester sur votre site. |
| SVG | Logos simples, pictogrammes, illustrations vectorielles | Photos | Idéal quand le visuel est vectoriel et maîtrisé. |
MDN classe WebP et AVIF parmi les formats modernes adaptés au web, et précise que l’élément <picture> permet de fournir plusieurs versions d’une image avec un format de secours. La même source indique aussi qu’AVIF et WebP prennent en charge la compression avec ou sans perte, selon les usages. (developer.mozilla.org)
Notre recommandation opérationnelle : utilisez WebP comme base fiable pour la plupart des photos et illustrations, ajoutez AVIF quand votre site, votre hébergement et votre processus de génération d’images le gèrent correctement, puis conservez un secours JPEG ou PNG si nécessaire via <picture>.
Quelles dimensions prévoir pour les images ?
La bonne dimension est liée à l’affichage réel. Si un bloc affiche une image en 600 px de large sur mobile, envoyer une image source beaucoup plus large consomme de la bande passante sans bénéfice visible. À l’inverse, une image trop petite peut paraître floue sur un écran dense.
Procédez dans cet ordre :
- Ouvrez la page dans Chrome.
- Inspectez l’image concernée.
- Notez sa taille d’affichage en CSS sur mobile, tablette et desktop.
- Exportez plusieurs variantes adaptées aux principaux affichages.
- Servez ces variantes avec
srcsetetsizes, ou via les tailles générées par votre CMS.
Les images responsives permettent au navigateur de choisir le fichier le plus adapté au contexte de l’utilisateur. WordPress ajoute des attributs srcset et sizes aux images générées depuis la version 4.4, ce qui aide les appareils mobiles à recevoir une taille plus adaptée lorsque les tailles intermédiaires existent. (developer.wordpress.org)
Bon réflexe : ne téléversez pas vos photos brutes directement depuis un appareil photo ou une banque d’images. Recadrez d’abord selon l’usage : image héro, carte de service, vignette d’article, galerie, produit.
Comment optimiser une page étape par étape ?
Voici la méthode avant/après que l’on conseille pour une TPE ou une PME qui veut agir sans refaire tout son site.
- Sélectionnez une seule page. Prenez une page utile commercialement : page service, accueil, page de contact enrichie, fiche produit ou article stratégique.
- Mesurez l’état initial. Relevez le poids total transféré, le poids des images, le LCP mobile, le LCP desktop et l’image qui sert d’élément LCP.
- Classez les images par poids. Dans DevTools, filtrez les images et triez par taille. Commencez par les plus lourdes et par celles visibles dès l’arrivée sur la page.
- Redimensionnez avant de compresser. Une image trop grande doit d’abord être recadrée ou exportée à la bonne largeur. La compression vient ensuite.
- Convertissez au bon format. Testez WebP, puis AVIF si votre chaîne technique le permet. Gardez PNG pour les cas où la netteté ou la transparence le justifie.
- Remplacez les fichiers dans le site. Vérifiez que le HTML, le thème ou le constructeur de page ne continue pas à appeler l’ancien fichier.
- Recontrôlez le rendu visuel. Comparez sur mobile et desktop, surtout pour les portraits, les packshots et les images avec texte intégré.
- Relancez exactement les mêmes mesures. Comparez le poids transféré et le LCP. Si le LCP ne bouge pas, le frein vient peut-être aussi du serveur, du CSS, du JavaScript ou des polices.
Pour structurer le suivi, gardez un tableau simple. Vous pouvez le dupliquer pour chaque page importante du site.
| Image | Rôle dans la page | Problème détecté | Action | Résultat à relever |
|---|---|---|---|---|
| Image héro | Premier écran | Poids ou dimensions excessives | Recadrage, WebP ou AVIF, priorité de chargement | LCP avant/après |
| Vignette de carte | Liste de services ou articles | Fichier trop grand pour son affichage | Taille intermédiaire adaptée | Poids image avant/après |
| Logo ou pictogramme | Identité visuelle | Mauvais format | SVG si pertinent, sinon PNG optimisé | Netteté et poids |
| Galerie | Preuve visuelle | Trop de fichiers chargés trop tôt | Chargement différé des images non visibles | Nombre de requêtes image au chargement |
Comment gérer les images dans WordPress ?
Sur WordPress, l’optimisation dépend à la fois du thème, des tailles d’images déclarées, du constructeur éventuel et de l’hébergement. Depuis WordPress 6.5, le cœur de WordPress prend en charge l’upload, l’édition et l’enregistrement d’images AVIF, à condition que le serveur dispose des bibliothèques de traitement nécessaires. (make.wordpress.org)
À vérifier dans votre site :
- Les tailles d’images générées par le thème.
- Les réglages Médias de WordPress.
- Les images ajoutées en arrière-plan CSS, souvent oubliées par les optimisations automatiques.
- Les images des extensions : sliders, galeries, avis, constructeurs de pages.
- Les anciennes images téléversées avant la mise en place d’une optimisation.
Si vous préparez une refonte, c’est le bon moment pour définir des tailles propres pour les images : héros, cartes, vignettes, produits, bandeaux et contenus éditoriaux. Cela évite d’accumuler des fichiers inutiles et facilite la maintenance. Pour un site WordPress professionnel, notre page agence WordPress détaille notre approche de conception et d’intégration.
Vous pouvez aussi utiliser nos outils web pour cadrer un audit, préparer une refonte ou clarifier les priorités techniques avant d’intervenir sur le site.
Comment améliorer le LCP avec les images ?
Si l’image principale est l’élément LCP, il faut la traiter différemment des autres images. Elle doit être légère, bien dimensionnée, disponible dans un format efficace et chargée au bon moment. Évitez de la charger paresseusement si elle est visible dès l’arrivée sur la page, car cela peut retarder son affichage.
Actions prioritaires pour une image LCP :
- Limiter ses dimensions à ce qui est nécessaire pour l’affichage réel.
- Utiliser WebP ou AVIF avec un secours si besoin.
- Déclarer une largeur et une hauteur pour stabiliser la mise en page.
- Éviter de placer l’image dans un carrousel lourd.
- Réduire les fichiers CSS ou JavaScript qui bloquent son affichage.
- Vérifier que l’hébergement répond correctement.
Si votre diagnostic montre que le problème ne vient pas seulement des images, lisez aussi nos contenus sur le Largest Contentful Paint et les Core Web Vitals. Les images sont fréquentes dans les problèmes de LCP, mais elles ne sont pas les seules responsables.
Quel processus appliquer avant de publier une nouvelle page ?
Pour éviter de refaire les mêmes corrections à chaque publication, créez une mini-checklist interne. Elle peut être suivie par la personne qui publie les contenus, pas seulement par un développeur.
- Nommer le fichier clairement avant l’import.
- Recadrer l’image selon son emplacement dans la page.
- Exporter en WebP, ou en AVIF si votre site le gère proprement.
- Garder le PNG pour les transparences ou visuels graphiques qui le nécessitent.
- Vérifier le rendu mobile.
- Contrôler le poids transféré après publication.
- Ajouter un texte alternatif utile quand l’image apporte une information.
Si votre site contient déjà des centaines de médias, ne commencez pas par tout convertir. Priorisez les pages qui comptent pour votre activité, puis les images les plus lourdes et les plus visibles. C’est souvent plus rentable qu’une optimisation massive sans contrôle qualité.
Besoin d’un diagnostic plus global sur votre site, vos contenus, vos performances et vos priorités techniques ? Vous pouvez passer par la page outils ou nous contacter via le formulaire Osmova.
Questions fréquentes
WebP ou AVIF : lequel choisir ?
WebP est un très bon choix par défaut pour beaucoup de sites. AVIF peut donner d’excellents résultats, surtout sur les photos, mais il faut vérifier la compatibilité de votre CMS, de votre serveur et de votre processus de génération d’images.
Quel poids viser pour une image web ?
Il n’existe pas de poids universel valable pour toutes les images. Une image héro, une vignette et un pictogramme n’ont pas le même rôle. Le bon objectif est de réduire le poids sans dégrader le rendu visible, puis de mesurer l’impact sur la page réelle.
Faut-il mettre toutes les images en lazy loading ?
Non. Les images situées plus bas dans la page peuvent être chargées plus tard. En revanche, l’image principale visible immédiatement, surtout si elle est l’élément LCP, doit généralement être disponible sans délai artificiel.
WordPress optimise-t-il automatiquement les images ?
WordPress génère des tailles intermédiaires et peut produire un balisage responsive, mais cela ne remplace pas une vraie stratégie de dimensions, de formats et de contrôle du poids. Le thème, les extensions et l’hébergement changent beaucoup le résultat final.
Comment éviter une perte de qualité visible ?
Travaillez toujours depuis le fichier original, testez plusieurs niveaux de compression et comparez le rendu sur mobile et desktop. Pour les photos de produits, portraits et réalisations, validez visuellement avant de remplacer les fichiers en production.
Sources
- MDN Web Docs, guide des formats d’images, pour les caractéristiques de WebP, AVIF, PNG, JPEG et l’usage de
<picture>. (developer.mozilla.org) - web.dev, documentation Largest Contentful Paint, pour la définition du LCP et le seuil de 2,5 secondes. (web.dev)
- Google Developers, documentation PageSpeed Insights, pour la distinction entre données de laboratoire, données terrain et période de 28 jours. (developers.google.com)
- Chrome for Developers, documentation Lighthouse et DevTools, pour la mesure réseau et le redimensionnement des images. (developer.chrome.com)
- WordPress Developer Resources, API des images responsives, pour
srcsetetsizesdans WordPress depuis la version 4.4. (developer.wordpress.org) - Make WordPress Core, note développeur WordPress 6.5, pour la prise en charge d’AVIF sous conditions serveur. (make.wordpress.org)
