Optimiser ses images pour le SEO : le guide complet

Les images représentent en moyenne 50 % du poids total d’une page web. Un site avec des images non optimisées, c’est un site lent. Un site lent, c’est un site que Google pénalise et que les visiteurs quittent. Pour une PME suisse, chaque seconde de chargement supplémentaire coûte des clients.

Ce guide couvre tout ce que vous devez savoir pour optimiser vos images — du nommage des fichiers au lazy loading.

Si vous cherchez un aperçu rapide, notre guide d’optimisation d’images est un bon point de départ. Cet article va plus en profondeur.

Pourquoi l’optimisation des images impacte votre SEO

La vitesse de chargement

Google utilise les Core Web Vitals comme facteur de classement. Le LCP (Largest Contentful Paint) — le temps d’affichage du plus grand élément visible — est directement impacté par la taille de vos images. Une image hero de 3 Mo au lieu de 150 Ko peut faire basculer votre score de « bon » à « mauvais ».

Un site rapide convertit davantage. L’optimisation des images est souvent le levier le plus facile à activer.

Google Images

Google Images représente 20 à 25 % de toutes les recherches Google. Un internaute qui cherche « intérieur restaurant Sion » ou « rénovation salle de bains avant après » peut tomber sur vos images — et visiter votre site. Ignorer Google Images, c’est ignorer un quart du trafic potentiel.

L’accessibilité

Les textes alternatifs (alt text) permettent aux lecteurs d’écran de décrire les images aux personnes malvoyantes. C’est une obligation légale en Suisse avec l’entrée en vigueur de la norme eCH-0059 et c’est aussi un signal SEO positif.

Le nommage des fichiers

Le nom du fichier image est le premier signal que Google utilise pour comprendre le contenu de l’image.

Les règles

• Descriptif : renovation-cuisine-sion.webp plutôt que IMG_20260315_001.jpg
• Mots-clés pertinents : incluez le sujet et éventuellement la localisation
• Tirets entre les mots (pas d’underscores, pas d’espaces)
• Minuscules uniquement
• Court mais explicite : 3-5 mots suffisent

Exemples

Mauvais	Bon
DSC_4521.jpg	facade-restaurant-montreux.webp
image1.png	equipe-agence-web-sion.webp
photo_finale(2).jpeg	salle-de-bains-renovee-avant-apres.webp
LOGO.PNG	logo-tacelo-agence-web.webp

Le texte alternatif (alt text)

Le alt text est l’attribut HTML qui décrit le contenu d’une image. C’est l’un des signaux SEO les plus sous-estimés.

Comment rédiger un bon alt text

1. Décrivez ce que l’image montre — pas ce que vous voulez qu’elle signifie
2. Soyez spécifique : « Salle de bains rénovée avec douche à l’italienne et carrelage gris » plutôt que « photo salle de bains »
3. Incluez des mots-clés naturellement — sans forcer
4. Limitez à 125 caractères — les lecteurs d’écran tronquent au-delà
5. Ne commencez pas par « Image de » ou « Photo de » — c’est redondant

Exemples par secteur

Restaurant :

• Mauvais : alt="restaurant"
• Bon : alt="Terrasse du restaurant Le Panorama avec vue sur le lac Léman à Montreux"

Artisan :

• Mauvais : alt="travaux"
• Bon : alt="Rénovation complète d'une cuisine en chêne massif dans un appartement à Lausanne"

Commerce :

• Mauvais : alt="produit"
• Bon : alt="Montre suisse artisanale en acier brossé exposée en vitrine à Sion"

Quand laisser le alt text vide

Pour les images purement décoratives (icônes, séparateurs, motifs de fond), utilisez un alt text vide (alt=""). Cela indique aux lecteurs d’écran de les ignorer et à Google qu’elles n’ont pas de valeur sémantique.

Le format : WebP, AVIF ou JPEG ?

WebP : le standard actuel

WebP offre une compression 25-35 % supérieure au JPEG pour une qualité équivalente. Il est supporté par 97 % des navigateurs en 2026.

Utilisez WebP pour :

• Les photos (produits, équipe, projets)
• Les images de blog
• Les bannières et visuels marketing

AVIF : l’avenir (presque)

AVIF offre une compression encore meilleure que WebP (30-50 % de réduction supplémentaire). Le support navigateur atteint 92 % en 2026 — suffisant pour l’utiliser avec un fallback.

Utilisez AVIF si :

• Votre framework le supporte nativement (Astro, Next.js)
• Vous pouvez fournir un fallback WebP ou JPEG

JPEG : encore utile

JPEG reste pertinent pour les photos avec beaucoup de détails où la compatibilité maximale est nécessaire. Pour tout le reste, préférez WebP.

PNG : uniquement pour la transparence

PNG est nécessaire uniquement quand vous avez besoin d’un fond transparent (logos, icônes). Pour les photos, n’utilisez jamais PNG — le fichier sera 5 à 10 fois plus lourd qu’un WebP.

SVG : pour les graphiques vectoriels

Logos, icônes, illustrations simples : SVG est parfait. Résolution infinie, poids minimal, et manipulable en CSS.

La compression

Compression avec perte (lossy)

Réduit la taille du fichier en supprimant des détails imperceptibles à l’œil nu. Pour les photos, une qualité de 75-85 % offre le meilleur compromis taille/qualité.

Compression sans perte (lossless)

Réduit la taille sans perdre de détails. Idéal pour les logos, les captures d’écran et les images avec du texte.

Outils recommandés

Outil	Type	Idéal pour
Squoosh (Google)	En ligne, gratuit	Compression manuelle image par image
TinyPNG	En ligne, gratuit/payant	Lots d’images PNG et JPEG
Sharp (Node.js)	Librairie, gratuit	Intégration dans le build (Astro, Next.js)
ImageOptim	Desktop macOS, gratuit	Compression en lot

Objectifs de poids

• Image hero (pleine largeur) : < 200 Ko
• Image de blog/article : < 100 Ko
• Vignette/carte : < 30 Ko
• Logo : < 20 Ko (SVG idéalement)
• Icône : < 5 Ko

Les dimensions et le responsive

Servir la bonne taille

Ne chargez pas une image de 4 000 × 3 000 pixels pour l’afficher en 800 × 600. Redimensionnez vos images aux dimensions d’affichage réelles.

Astuce : générez plusieurs variantes de chaque image et utilisez l’attribut srcset pour que le navigateur charge la version adaptée à l’écran.

<img
  src="projet-web-800.webp"
  srcset="projet-web-400.webp 400w, projet-web-800.webp 800w, projet-web-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Projet de site web pour PME suisse affiché sur ordinateur et mobile"
/>

Dimensions explicites

Spécifiez toujours les attributs width et height sur vos balises <img>. Cela permet au navigateur de réserver l’espace avant le chargement et évite les décalages visuels (CLS — Cumulative Layout Shift).

Le lazy loading

Le lazy loading retarde le chargement des images situées en dessous de la ligne de flottaison (hors écran) jusqu’à ce que l’utilisateur scrolle vers elles.

Implémentation native

<img src="photo-equipe.webp" alt="Équipe tacelo" loading="lazy" />

L’attribut loading="lazy" est supporté nativement par tous les navigateurs modernes. Aucun JavaScript nécessaire.

Quand ne pas utiliser le lazy loading

• Image LCP (hero, bannière principale) : cette image doit se charger immédiatement. Utilisez loading="eager" (comportement par défaut).
• Images au-dessus de la ligne de flottaison : tout ce qui est visible sans scroll doit se charger immédiatement.

Preload pour l’image LCP

Pour l’image principale de la page (celle qui détermine le LCP), ajoutez un preload dans le <head> :

<link rel="preload" as="image" href="hero-banner.webp" type="image/webp" />

Cela indique au navigateur de prioriser le téléchargement de cette image.

Les métadonnées EXIF

Les appareils photo intègrent des métadonnées EXIF dans les fichiers (date, lieu, appareil, réglages). Ces données ajoutent du poids au fichier sans valeur SEO.

Recommandation : supprimez les métadonnées EXIF lors de la compression. La plupart des outils de compression le font automatiquement. Cela réduit la taille du fichier et protège votre vie privée (certaines photos contiennent des coordonnées GPS).

Checklist d’optimisation

Avant de mettre en ligne une image, vérifiez :

• Nom de fichier descriptif avec des mots-clés
• Format WebP (ou AVIF avec fallback)
• Compression à 75-85 % de qualité
• Dimensions adaptées à l’affichage réel
• Alt text descriptif et naturel (< 125 caractères)
• Width et height spécifiés
• Lazy loading pour les images sous la ligne de flottaison
• Preload pour l’image LCP
• Métadonnées EXIF supprimées

Questions fréquentes

Combien d’images par page pour un bon SEO ?

Il n’y a pas de nombre magique. Utilisez autant d’images qu’il en faut pour illustrer votre contenu — ni plus, ni moins. Un article de blog peut avoir 3-5 images pertinentes. Une page produit, 5-10. L’important est que chaque image soit optimisée et pertinente. Vingt images bien optimisées pèsent moins qu’une seule image non compressée.

Dois-je optimiser les images déjà en ligne sur mon site ?

Oui. Faites un audit de vos images existantes. Identifiez celles qui dépassent 200 Ko, celles sans alt text, et celles en format PNG ou JPEG non compressé. La mise à jour des images existantes peut améliorer votre score PageSpeed de 20 à 40 points d’un coup.

Le CDN est-il nécessaire pour les images ?

Un CDN (Content Delivery Network) sert vos images depuis un serveur géographiquement proche de l’utilisateur. Pour un site ciblant uniquement la Suisse romande, un hébergement suisse avec un bon serveur suffit. Si vous ciblez toute la Suisse (y compris la Suisse alémanique et le Tessin), un CDN améliore les temps de chargement pour les utilisateurs éloignés de votre serveur.