Vous avez sans doute déjà vécu ça : un site magnifique, un design soigné, un contenu bien écrit… mais des pages qui mettent trois ou quatre secondes à s’afficher. Neuf fois sur dix, le coupable se cache dans les images. Photos de bannière en pleine résolution, visuels non compressés, formats dépassés : les images sont, de très loin, la première cause de lenteur sur le web. Et une page lente, c’est un classement Core Web Vitals dégradé, des visiteurs qui repartent, et un référencement qui en pâtit directement.
La bonne nouvelle, c’est qu’optimiser ses images n’a rien de sorcier. Quelques réflexes simples, appliqués systématiquement, suffisent à diviser par trois ou quatre le poids d’une page sans sacrifier la qualité visuelle. Voici comment s’y prendre concrètement.
Pourquoi les images plombent (souvent) votre site
Une photo prise avec un smartphone récent ou un appareil professionnel pèse fréquemment plusieurs mégaoctets. Publiée telle quelle sur un site web, où elle ne sera affichée qu’à quelques centaines de pixels de large, elle représente un gaspillage énorme de bande passante. Le navigateur du visiteur doit télécharger l’intégralité du fichier avant de pouvoir l’afficher, ce qui ralentit le chargement de toute la page.
Ce problème se répercute directement sur les indicateurs que Google utilise pour juger la qualité d’une page, en particulier le LCP (Largest Contentful Paint), qui mesure le temps d’affichage du plus grand élément visible à l’écran — très souvent une image. Nous en parlions déjà dans notre article sur la vitesse de chargement : chaque seconde perdue coûte des visiteurs et des conversions. Les images non optimisées sont, concrètement, la première chose à corriger avant tout autre chantier de performance.
Choisir le bon format d’image
WebP : le nouveau standard
Pendant des années, le web s’est appuyé sur le trio JPEG, PNG et GIF. Ces formats ont fait leurs preuves, mais ils sont aujourd’hui dépassés par des alternatives bien plus efficaces. Le format WebP, développé par Google, est désormais reconnu par tous les navigateurs modernes. Il permet de réduire le poids d’une image de 25 à 35 % par rapport à un JPEG de qualité équivalente, sans perte visible à l’œil nu.
AVIF : encore plus performant, mais moins mature
Le format AVIF va plus loin encore, avec des gains de compression parfois supérieurs à 50 % par rapport au JPEG. Sa compatibilité s’est nettement améliorée, mais certains outils d’édition et plugins WordPress ne le prennent pas encore parfaitement en charge. Pour un site professionnel, WebP reste aujourd’hui le compromis le plus sûr entre performance et compatibilité universelle ; AVIF peut être testé en complément pour les visuels les plus lourds.
Quand garder du PNG ou du SVG
Le PNG garde son utilité pour les images nécessitant une transparence complexe (logos, icônes détaillées). Pour les logos, pictogrammes et illustrations vectorielles, le format SVG reste imbattable : il est infiniment redimensionnable, très léger, et parfaitement net sur tous les écrans, y compris les écrans haute densité (Retina).
Compresser sans sacrifier la qualité
Choisir le bon format ne suffit pas : il faut aussi compresser correctement chaque fichier. Deux approches se complètent :
- La compression avec perte (lossy) : elle réduit le poids du fichier en supprimant des détails imperceptibles à l’œil. Pour une photo destinée au web, une qualité de compression entre 70 et 85 % offre généralement un excellent rapport poids/qualité.
- La compression sans perte (lossless) : elle allège le fichier en nettoyant les métadonnées et en optimisant l’encodage, sans toucher aux pixels. Elle est idéale pour les logos et captures d’écran où chaque détail compte.
Sur WordPress, des extensions comme ShortPixel, Imagify ou Smush automatisent cette compression à chaque import, y compris pour les images déjà présentes dans la médiathèque. C’est un investissement de quelques minutes de configuration pour un gain durable sur l’ensemble du site.
Dimensionner ses images à la bonne taille
Une erreur très fréquente consiste à uploader une image de 3000 pixels de large pour l’afficher dans un espace de 600 pixels. Le navigateur télécharge alors un fichier cinq fois plus lourd que nécessaire, avant de le redimensionner à la volée. La règle est simple : une image ne doit jamais peser plus que ce que sa taille d’affichage réelle exige.
Le HTML moderne permet d’aller plus loin grâce à l’attribut srcset, qui propose au navigateur plusieurs versions d’une même image (mobile, tablette, desktop) et le laisse choisir la plus adaptée à la taille de l’écran du visiteur. La plupart des thèmes WordPress récents génèrent automatiquement ces variantes ; encore faut-il que les images sources aient été correctement dimensionnées en amont.
Le lazy loading : ne charger que ce qui est visible
Sur une page longue, il est inutile de charger immédiatement les images situées tout en bas, que le visiteur ne verra peut-être jamais. Le lazy loading (chargement différé) retarde le téléchargement d’une image jusqu’au moment où elle approche de la zone visible à l’écran. L’attribut natif loading="lazy", supporté par tous les navigateurs modernes, s’active en une ligne de code et réduit considérablement le temps de chargement initial d’une page, en particulier sur mobile.
Attention toutefois à ne pas l’appliquer à l’image principale visible dès l’arrivée sur la page (au-dessus de la ligne de flottaison) : celle-ci doit au contraire être chargée en priorité pour ne pas pénaliser le LCP.
Ne pas oublier le texte alternatif
L’optimisation technique ne doit pas faire oublier l’essentiel : chaque image doit porter un attribut alt pertinent, décrivant son contenu de façon concise. Ce texte alternatif sert à trois choses : il permet aux lecteurs d’écran de décrire l’image aux personnes malvoyantes (un enjeu que nous détaillions dans notre article sur l’accessibilité web RGAA), il s’affiche si l’image ne charge pas, et il aide Google Images à comprendre et indexer le contenu visuel de votre site — une source de trafic souvent sous-exploitée.
Le nom du fichier image lui-même compte aussi : mieux vaut chaussures-cuir-artisanales.jpg que IMG_20260315.jpg. C’est un détail, mais qui s’additionne aux autres signaux de pertinence pour les moteurs de recherche.
Utiliser un CDN pour livrer les images plus vite
Enfin, la manière dont les images sont livrées compte autant que leur poids. Un CDN (Content Delivery Network) distribue vos fichiers depuis des serveurs répartis géographiquement, au plus près de chaque visiteur, plutôt que depuis un unique serveur d’hébergement. Certains CDN spécialisés dans l’image (Cloudflare Images, Bunny CDN, ou les fonctions équivalentes intégrées à certains hébergeurs) génèrent même automatiquement les bons formats et les bonnes tailles à la volée, sans intervention manuelle.
Une checklist simple à appliquer
Pour résumer, avant chaque publication d’image sur votre site :
- Redimensionner l’image à sa taille d’affichage réelle maximale
- Convertir en WebP (ou AVIF si votre configuration le permet)
- Compresser avec un outil dédié (qualité 70-85 %)
- Renommer le fichier de façon descriptive
- Renseigner un attribut alt pertinent
- Activer le lazy loading, sauf pour l’image principale visible immédiatement
Ces réflexes, une fois pris, ne demandent que quelques secondes supplémentaires par image — un investissement minime au regard des gains en vitesse, en expérience utilisateur et en référencement. Ils s’inscrivent d’ailleurs naturellement dans une démarche plus large de SEO technique, où chaque détail d’implémentation compte autant que la stratégie de contenu.
Vous préparez une refonte ou la création d’un nouveau site et vous voulez que ces bonnes pratiques soient intégrées dès le départ plutôt que corrigées après coup ? C’est justement ce que je fais avec chaque client, en tant que freelance web en Normandie et en Bretagne (Avranches, Granville, Caen, Rennes, Fougères). N’hésitez pas à me contacter pour en discuter.
