Image SEO : 7 conseils pour optimiser les images de votre site

L'image SEO regroupe les réglages qui aident une image à être comprise par Google, à apparaître dans Google Images et à ne pas ralentir la page. Les recommandations ci-dessous s'appuient sur les bonnes pratiques Google Images de Google Search Central (mises à jour en mars 2026).

1. Choisir le bon format d'image

Google indexe les formats BMP, GIF, JPEG, PNG, WebP, SVG et AVIF, appelés dans l'attribut src d'une balise img. L'extension du fichier doit correspondre à son type réel.

Sur Webflow, l'outil de conversion d'images transforme les JPEG et PNG en WebP ou AVIF depuis le panneau Assets, ou en une fois pour toutes les images du CMS. Attention : l'original est remplacé et ne peut pas être restauré dans son ancienne extension. Téléchargez-le avant. Pour les images de partage (Open Graph), Webflow conseille WebP plutôt qu'AVIF.

2. Redimensionner et compresser

Une image trop lourde ralentit l'affichage, surtout quand c'est le plus grand élément visible : elle détermine alors le LCP, l'un des Core Web Vitals. Deux règles suffisent dans la plupart des cas :

• Ne téléversez pas une image plus large que sa taille d'affichage maximale (une photo de 6 000 pixels pour un bloc de 1 200 pixels gaspille de la bande passante).
• Compressez avant l'envoi avec Squoosh, TinyPNG ou ImageOptim. La compression avec perte convient aux photos, la compression sans perte aux visuels à aplats et aux captures.

Indiquez toujours la largeur et la hauteur de l'image (attributs width et height ou ratio CSS). Le navigateur réserve ainsi la place, et la page ne « saute » pas au chargement, ce qui évite de dégrader le CLS.

3. Donner un nom de fichier descriptif

Google indique que le nom de fichier lui donne des indices légers sur le sujet de l'image. C'est un petit signal, mais il ne coûte rien :

• À éviter : IMG_1234.jpg, photo-finale-v2.png.
• À privilégier : poele-granules-salon.webp, tableau-de-bord-crm.avif.

Règles pratiques : minuscules, mots séparés par des tirets, pas d'accents ni d'espaces, quelques mots qui décrivent l'image. Renommez avant l'envoi : changer le nom d'un fichier déjà en ligne change aussi son URL.

4. Rédiger un attribut alt utile

L'attribut alt décrit l'image en texte. Google le combine à la vision par ordinateur et au contenu de la page pour comprendre l'image, et le traite comme une ancre quand l'image est un lien. Les lecteurs d'écran le lisent aux personnes aveugles ou malvoyantes.

L'exemple donné par Google, du moins bon au meilleur :

Une image purement décorative reçoit un alt vide (alt="") pour que les lecteurs d'écran l'ignorent. C'est aussi une exigence d'accessibilité web. Pour un SVG intégré directement dans le code, utilisez un élément title à la place de l'alt. Sur Webflow, l'alt se règle dans le panneau Assets (valeur par défaut) ou dans les réglages de chaque image.

5. Servir des images responsives

Une image responsive existe en plusieurs largeurs ; le navigateur charge celle qui correspond à l'écran. Google recommande l'attribut srcset (avec sizes) ou l'élément picture, toujours avec un src de secours :

<img src="chiot-800.webp" srcset="chiot-500.webp 500w, chiot-800.webp 800w, chiot-1600.webp 1600w" sizes="(max-width: 768px) 100vw, 50vw" width="1600" height="1067" alt="Chiot dalmatien qui joue à rapporter la balle">

Webflow le fait automatiquement. Selon sa page d'aide sur les images responsives, il génère jusqu'à sept variantes (de 500 à 3 200 pixels) et ajoute srcset et sizes. Trois limites : les images doivent être envoyées dans Webflow (pas par import CSV ou API), peser moins de 4 Mo, et les images en arrière-plan ou dans un champ rich text n'en profitent pas.

Autre point important : Google n'indexe pas les images appelées en arrière-plan CSS. Si une image doit se positionner dans Google Images, utilisez un vrai élément image.

6. Utiliser le lazy loading, sauf au-dessus de la ligne de flottaison

Le lazy loading retarde le chargement des images qui ne sont pas encore visibles. Il suffit de l'attribut natif loading="lazy" sur la balise img, sans bibliothèque JavaScript.

Mais ne l'appliquez jamais à l'image principale visible dès l'ouverture de la page : le guide web.dev de Google sur le lazy loading déconseille de différer les images de la première fenêtre visible, car cela retarde le LCP. Sur Webflow, passez ces images en chargement Eager dans leurs réglages. Le détail est dans notre article lazy loading des images : quand l'utiliser, quand l'éviter.

7. Ajouter des données structurées et un sitemap d'images

Les données structurées d'image servent surtout à afficher la licence dans Google Images. D'après la documentation Google sur les métadonnées d'image, un ImageObject doit contenir contentUrl et au moins l'une des propriétés creator, creditText, copyrightNotice ou license. La propriété license est nécessaire pour obtenir le badge « Sous licence ».

{"@context": "https://schema.org", "@type": "ImageObject", "contentUrl": "https://www.exemple.fr/images/chiot-dalmatien.webp", "creditText": "Studio Exemple", "license": "https://www.exemple.fr/licence-images"}

Pour choisir l'image qui représente une page dans les résultats, Google tient compte de primaryImageOfPage ou de la balise og:image : choisissez une image représentative, en haute résolution, sans texte incrusté ni logo. Notre guide des données structurées Schema.org détaille l'implémentation. Enfin, un sitemap d'images aide Google à découvrir des images qu'il pourrait manquer, y compris celles hébergées sur un CDN.

Check-list image SEO avant publication

• Format WebP ou AVIF (SVG pour les logos et icônes).
• Largeur adaptée à l'affichage, fichier compressé, dimensions déclarées.
• Nom de fichier en minuscules, avec des tirets.
• Alt descriptif, ou vide si l'image est décorative.
• Image importante dans une balise img, pas en arrière-plan CSS.
• Lazy loading sur les images hors écran, chargement immédiat pour l'image principale.
• Légende ou texte proche qui explique l'image : Google s'en sert aussi.

Comment nous gérons les images chez Synqro

Chez Synqro, les images font partie de la recette de chaque site avant mise en ligne : conversion en WebP ou AVIF dans Webflow après sauvegarde des originaux, alt rédigés à la main (jamais générés à la chaîne), image principale de chaque gabarit en chargement immédiat. Nous privilégions aussi les photos réelles du client, équipes, produits, locaux, plutôt que des banques d'images : elles disent quelque chose de vrai sur l'entreprise. Si vous préparez un site, notre équipe Webflow intègre ces réglages dès la conception.