Optimiser les images pour la performance et le SEO
Réduisez le poids et la taille de vos images, adoptez WebP et AVIF, et accélérez vos pages pour un meilleur LCP et un meilleur SEO.
Les images sont souvent la ressource la plus lourde et la plus fréquente d’une page web. Sur une page médiane d’environ 2 Mo transférés, elles représentent à elles seules près de la moitié du poids total. Les optimiser est donc l’un des leviers de performance les plus rentables : moins d’octets à télécharger, c’est un affichage plus rapide, un meilleur Largest Contentful Paint (LCP) et une expérience plus fluide.
Pour le SEO, l’enjeu est direct. La vitesse de chargement et les Core Web Vitals, dont la maîtrise repose sur les fondamentaux de la performance, font partie des signaux pris en compte par Google. Une page qui charge ses visuels efficacement retient mieux l’internaute, réduit les abandons et envoie des signaux d’engagement positifs. Optimiser ses images, c’est agir à la fois sur la performance technique et sur la qualité perçue par vos visiteurs.
Les images sont presque toujours la ressource la plus lourde d’une page, donc c’est le premier endroit où je regarde quand un LCP est mauvais. Servir la bonne taille, le bon format, et différer ce qui est hors écran : ces gestes cumulés transforment la vitesse perçue. Inutile de chercher l’exotique tant que ces fondamentaux ne sont pas en place.
Servir l'image à la bonne taille
La première optimisation consiste à afficher chaque image à ses bonnes dimensions. Une image affichée dans un conteneur de 500 x 500 pixels a une taille optimale de 500 x 500 pixels : utiliser un visuel de 1 000 pixels de côté revient à envoyer une image deux fois trop grande.
Le calcul se complique avec la densité de pixels (DPR). Un écran avec un DPR de 2 a besoin d’une image de 1 000 pixels pour un conteneur de 500 pixels, et de 1 500 pixels pour un DPR de 3. L’attribut srcset laisse le navigateur choisir la source la mieux adaptée, à l’aide d’un descripteur de densité (1x, 2x, 3x) ou d’un descripteur de largeur (500w, 1000w, 1500w).
<img
alt="Une image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>Choisir le bon format de fichier
Les navigateurs gèrent plusieurs formats d’image. Les formats modernes comme WebP et AVIF offrent une bien meilleure compression que JPEG ou PNG, ce qui réduit le poids des fichiers et accélère le LCP. Le bon choix dépend du type de visuel et de la compatibilité recherchée.
| Format | Compression | Atout principal |
|---|---|---|
JPEG |
Avec perte |
Standard universel pour les photos |
PNG |
Sans perte |
Transparence et aplats nets |
WebP |
Avec et sans perte |
Meilleure que JPEG ou PNG, gère la transparence |
AVIF |
Avec et sans perte |
Économies de plus de 50 % vs JPEG, HDR et large gamut |
SVG |
Sans perte (texte) |
Idéal pour logos, icônes et schémas vectoriels |
Compression et élément picture
Il existe deux types de compression. La compression avec perte réduit la précision de l’image : elle est très efficace sur les photos riches en détails, mais moins sur les bords nets et le texte. La compression sans perte préserve toutes les données. Des outils comme Squoosh ou ImageOptim permettent de tester différents niveaux jusqu’au bon compromis qualité / poids.
L’élément picture apporte de la flexibilité : il propose plusieurs candidats et laisse le navigateur retenir le premier format qu’il sait afficher. C’est la méthode recommandée pour servir AVIF en priorité, puis WebP, avec un repli JPEG. L’attribut loading se place toujours sur l’img enfant, jamais sur picture.
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="Une image"
width="500"
height="500"
src="/image.jpg">
</picture>Chargement différé et décodage
L’attribut loading= »lazy » demande au navigateur de ne télécharger une image que lorsqu’elle approche de la fenêtre d’affichage. Cela libère de la bande passante pour le contenu visible immédiatement. L’attribut decoding (async, sync ou auto) indique comment décoder l’image, avec un effet surtout sensible sur les très grands visuels haute résolution.
Chaque variante d’image supplémentaire alourdit votre code HTML et fragmente le cache du navigateur. Avec une seule source, tous les internautes partagent la même image mise en cache très efficacement. Générez un nombre raisonnable de candidats, mesurez l’impact réel, et réservez les nombreuses variantes aux images les plus stratégiques (image héros par exemple).
À faire
- afficher l’image à ses bonnes dimensions
- servir WebP ou AVIF avec un repli
- définir width et height
- compresser et tester la qualité
- différer les images hors écran
À éviter
- envoyer une image bien plus grande que son affichage
- ignorer les formats modernes
- multiplier les variantes inutiles
- différer l’image LCP au-dessus de la ligne de flottaison
Points clés à retenir
- Adaptez la taille de l'image à son conteneur et à la densité d'écran avec srcset et sizes.
- Privilégiez WebP ou AVIF, avec un repli JPEG via l'élément picture.
- Compressez vos visuels et contrôlez toujours la qualité finale.
- Différez les images hors écran, mais jamais l'image LCP.
- Définissez width et height pour réserver l'espace et éviter les décalages.
L’optimisation des images est l’un des gains de performance les plus rentables pour le SEO.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Quelle est la première optimisation à appliquer à une image ?
- L'afficher à ses bonnes dimensions, car une image dans un conteneur de 500 px n'a pas besoin de faire 1 000 px
- Ajouter le plus grand nombre possible de variantes srcset
- La servir toujours dans sa résolution d'origine maximale
La première optimisation consiste à afficher chaque image à ses bonnes dimensions. Un visuel de 1 000 pixels dans un conteneur de 500 pixels envoie une image deux fois trop grande.
-
Comment servir un format moderne comme AVIF tout en gardant une bonne compatibilité ?
- En servant uniquement de l'AVIF à tous les navigateurs
- Avec l'élément picture, qui sert AVIF puis WebP, avec un repli pour les navigateurs incompatibles
- En renonçant aux formats modernes pour rester en JPEG partout
AVIF compresse souvent mieux mais sa compatibilité est un peu moins large. L’élément
picturesert AVIF puis WebP, avec un repli, pour combiner légèreté et compatibilité. -
Quel est le risque de multiplier les variantes d'une même image ?
- Cela empêche définitivement le chargement différé
- Cela alourdit le code HTML et fragmente le cache du navigateur
- Cela dégrade automatiquement la qualité de chaque variante
Chaque variante supplémentaire alourdit le code HTML et fragmente le cache du navigateur. Avec une seule source, tous les internautes partagent la même ressource mise en cache.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Des images mal optimisées ralentissent vos pages et pénalisent votre SEO sans que vous le voyiez toujours.