Optimiser les images de son site : formats, poids, alt et SEO

Optimiser une image, c’est lui donner le bon format, la bonne taille et la bonne description. Une image bien traitée s’affiche vite, ne fait pas bouger la page et peut apparaître dans Google Images. Une image négligée fait l’inverse : elle alourdit la page, dégrade les Core Web Vitals et reste invisible pour les moteurs de recherche. Voici les règles qui comptent, d’après la documentation de Google et de web.dev.

Pourquoi les images pèsent autant sur votre site

Google le dit sans détour dans ses bonnes pratiques pour les images (2026) : les images sont souvent ce qui contribue le plus au poids total d’une page, ce qui la rend lente et coûteuse à charger.

Elles jouent aussi un rôle direct dans les Core Web Vitals :

• LCP (Largest Contentful Paint) : sur 73 % des pages mobiles, le plus grand élément affiché est une image, selon le Web Almanac 2024 de HTTP Archive. Si cette image est lourde, le LCP dépasse vite le seuil de 2,5 secondes recommandé par web.dev (2024).
• CLS (Cumulative Layout Shift) : une image sans dimensions déclarées fait sauter le texte vers le bas au moment où elle apparaît.

Une page lente fait perdre des visiteurs avant même qu’ils lisent votre offre. Pour comprendre le lien entre la vitesse de chargement d’un site internet et les ventes, voyez le guide dédié. Les Core Web Vitals sont utilisés par les systèmes de classement de Google, mais de bons scores ne garantissent aucune position : l’optimisation des images s’inscrit dans un travail plus large de classement sur les moteurs de recherche.

Choisir le bon format

Google Images prend en charge les formats BMP, GIF, JPEG, PNG, WebP, SVG et AVIF. Google conseille aussi que l’extension du fichier corresponde à son type réel.

Quelques chiffres vérifiés :

• selon la documentation WebP de Google (2025), une image WebP sans perte est 26 % plus légère qu’un PNG, et une image WebP avec perte est 25 à 34 % plus légère qu’un JPEG de qualité équivalente ;
• pour l’AVIF, web.dev (2021) indique des économies de plus de 50 % par rapport au JPEG observées sur certaines images, le gain exact dépendant du contenu et des réglages.

En pratique, le WebP est un bon choix par défaut. L’AVIF vaut le test pour les grandes photos. Si vous servez plusieurs formats avec l’élément « picture », gardez toujours une version de secours.

Redimensionner avant de compresser

C’est l’erreur la plus courante : une photo de 4 000 pixels de large, sortie d’un appareil photo, affichée dans un cadre de 800 pixels. Le navigateur télécharge tout, puis réduit l’image à l’écran. Le visiteur paie le poids, sans gain de qualité.

La méthode :

1. Mesurez la taille d’affichage réelle de chaque emplacement (bannière, vignette, galerie).
2. Exportez l’image à cette taille, voire au double pour les écrans haute densité.
3. Compressez ensuite, avec un outil comme Squoosh, TinyPNG ou ImageOptim. Comparez avant et après à l'œil : une compression trop forte se voit vite sur les dégradés et les visages.
4. Supprimez les métadonnées inutiles quand l’outil le permet.

Servir la bonne taille à chaque écran

Un même emplacement n’a pas la même largeur sur un smartphone et sur un grand écran. L’attribut « srcset » de la balise image, ou l’élément « picture », permet de proposer plusieurs versions et de laisser le navigateur choisir la plus adaptée. Google rappelle de toujours prévoir une URL de secours dans l’attribut « src », car certains navigateurs et robots ne comprennent pas ces attributs.

C’est un point central d’un site qui s’affiche correctement sur tous les écrans. Depuis sa version 4.4 (2015), WordPress ajoute automatiquement « srcset » et « sizes » aux images insérées depuis sa médiathèque, à condition de ne pas contourner ce système avec des images insérées en CSS.

Le lazy loading, oui, mais pas partout

Le lazy loading (chargement différé) retarde le téléchargement des images situées plus bas dans la page jusqu’à ce que le visiteur s’en approche. Aujourd’hui, un simple attribut « loading="lazy" » sur la balise image suffit, sans script.

Deux règles à respecter :

• Ne jamais différer l’image principale. web.dev le déconseille explicitement pour les images visibles dès le chargement, en particulier l’image LCP (web.dev, 2024). Pourtant, 16 % des pages mobiles le faisaient encore en 2024, selon le Web Almanac 2024. Pour cette image, on peut au contraire ajouter « fetchpriority="high" ».
• Ne pas dépendre d’une action du visiteur. Google n’interagit pas avec la page : une image qui ne se charge qu’après un clic ou un swipe risque de ne jamais être vue. Google recommande un lazy loading qui charge le contenu dès qu’il entre dans la zone visible, comme le lazy loading natif du navigateur (Google Search Central, 2025).

Déclarer les dimensions pour éviter les décalages

Indiquez la largeur et la hauteur de chaque image (attributs « width » et « height »). Le navigateur réserve alors la place avant que l’image n’arrive, et le texte ne bouge plus.

web.dev recommande ces attributs sur toutes les images (web.dev, 2024). C’est pourtant un oubli très répandu : en 2024, 66 % des pages mobiles avaient au moins une image sans dimensions explicites, selon le Web Almanac 2024. Le seuil « bon » pour le CLS est de 0,1 ou moins (web.dev, 2024).

Rendre vos images compréhensibles pour Google

Une image rapide ne suffit pas pour apparaître dans Google Images. Google doit aussi comprendre ce qu’elle représente. Sa documentation sur le référencement des images (2026) donne des règles précises.

Le texte alternatif (attribut alt)

Google le présente comme l’attribut le plus important pour décrire une image. Il sert aussi aux personnes qui utilisent un lecteur d’écran. Il doit décrire l’image dans le contexte de la page, sans liste de mots-clés : le bourrage de mots-clés nuit à l’expérience et peut faire passer le site pour du spam.

Une image purement décorative (un trait, un motif de fond) n’a pas besoin de description.

Le nom du fichier

Google recommande des noms courts mais descriptifs. Préférez « terrasse-bois-jardin.jpg » à « IMG_4521.JPG » ou « image1.jpg ». Renommez avant l’envoi sur le site : changer le nom ensuite modifie l’URL de l’image.

L’emplacement et le code

• Utilisez une vraie balise image. Google ne prend pas en compte les images définies en arrière-plan via le CSS. Une photo importante insérée comme fond de section n’apparaîtra pas dans Google Images.
• Placez l’image près du texte qui en parle. Google s’appuie sur le contenu de la page, les légendes et les titres pour comprendre l’image.
• Gardez des URL d’image stables. Google déconseille les URL d’image qui changent à chaque chargement de la page (Google Search Central, 2025).
• Privilégiez des images nettes. Google note que des photos de qualité attirent davantage les utilisateurs que des images floues.
• Pensez au sitemap d’images si certaines images ne sont pas faciles à découvrir, par exemple quand elles sont hébergées sur un CDN.

Outils et plugins utiles

Vous n’avez pas besoin de tout faire à la main.

• Squoosh : outil en ligne gratuit pour comparer formats et niveaux de compression, image par image.
• TinyPNG et ImageOptim (Mac) : compression rapide de lots d’images.
• Plugins WordPress comme Imagify, ShortPixel ou Smush : compression automatique à l’envoi et, selon les réglages, conversion en WebP. Choisissez-en un seul : plusieurs plugins qui font le même travail se gênent.
• PageSpeed Insights : pour repérer les images trop lourdes, mal dimensionnées ou différées à tort.
• Un CDN : il distribue les images depuis un serveur proche du visiteur, utile pour les sites riches en visuels.

Check-list avant de publier une image

1. Le format est adapté (WebP ou AVIF pour les photos, SVG pour les logos).
2. L’image est exportée à sa taille d’affichage, pas à la taille de l’appareil photo.
3. Elle est compressée, et le résultat reste net à l'œil.
4. Le nom du fichier est court et descriptif.
5. Le texte alternatif décrit l’image en une phrase, sans bourrage.
6. Les attributs largeur et hauteur sont présents.
7. L’image principale n’est pas en lazy loading, les autres le sont.
8. Elle est insérée comme image, pas comme fond CSS, si elle doit être référencée.

L’approche de Top Agency

Chez Top Agency, je crée et je maintiens moi-même des sites WordPress, WooCommerce, Shopify et Sanity pour des indépendants, TPE et PME de Bruxelles et de Wallonie. L’optimisation des images fait partie de chaque projet dès la conception : formats modernes, tailles adaptées à chaque emplacement, textes alternatifs rédigés pour chaque visuel utile et vérification dans PageSpeed Insights avant la mise en ligne.

Je montre aussi à mes clients comment préparer leurs propres images, pour que le site reste léger quand ils ajoutent des photos eux-mêmes. Si votre site est lent et que vous soupçonnez vos images, vous pouvez me contacter pour en parler.

Questions fréquentes

Quel est le meilleur format d’image pour le web en 2026 ?

Pour les photos, le WebP est un choix sûr, bien pris en charge et nettement plus léger que le JPEG. L’AVIF compresse souvent encore mieux. Pour les logos et icônes, le SVG reste la référence.

Le texte alternatif améliore-t-il le référencement ?

Il aide Google à comprendre l’image et peut lui permettre d’apparaître dans Google Images. Il ne garantit aucune position. Son premier rôle reste l’accessibilité : décrivez l’image pour une personne qui ne la voit pas.

Faut-il activer le lazy loading sur toutes les images ?

Non. Il faut l’éviter sur les images visibles dès l’ouverture de la page, surtout la plus grande. Différer ces images retarde leur affichage et dégrade le LCP.

Quel poids viser pour une image ?

Il n’existe pas de chiffre officiel universel. Visez l’image la plus légère qui reste nette à sa taille d’affichage, puis vérifiez le résultat dans PageSpeed Insights. Vous pouvez aussi contrôler les textes alternatifs et la vitesse d’une page avec le test gratuit de Top Agency.

Google indexe-t-il les images en arrière-plan CSS ?

Non. Google indique qu’il n’indexe pas les images définies en CSS. Si une image doit apparaître dans les résultats, insérez-la avec une balise image classique.

Sources

• Google Search Central, bonnes pratiques de référencement des images, 2026
• Google Search Central, corriger le contenu à chargement différé, 2025
• Google for Developers, présentation du format WebP, 2025
• web.dev, Using AVIF to compress images on your site, 2021
• web.dev, Browser-level image lazy loading, 2024
• web.dev, Web Vitals, 2024
• HTTP Archive, Web Almanac 2024, chapitre Performance
• Google Search Central, bonnes pratiques pour l’indexation mobile-first, 2025
• WordPress Core, Responsive Images in WordPress 4.4, 2015