Optimiser les images et le texte alternatif en bricolage

Vos images ralentissent votre site. Vos visiteurs ne savent pas ce qu’ils regardent. Google les ignore. Et vos utilisateurs malvoyants doivent deviner le contenu. Le texte alternatif (alt) n’est pas du SEO cosmétique — c’est une base technique qui impacte le classement, l’accessibilité et l’expérience utilisateur.

La bonne nouvelle : vous pouvez optimiser vos images sans agence, sans budget, en appliquant des règles simples et en utilisant les bons outils. Ce guide vous montre comment faire, dès aujourd’hui.

Pourquoi les images mal optimisées vous coûtent du trafic

Une image non compressée ralentit votre page. Google privilégie la vitesse. Les utilisateurs quittent un site lent. Vous perdez du trafic avant même que quelqu’un ne lise votre contenu.

Un texte alt manquant ou vide, c’est une perte SEO directe. Google ne voit que du code vide. Il n’indexe pas l’image. Les utilisateurs malvoyants ne comprennent pas le contexte. Vous excluez une part de votre audience et vous ignorez un signal de pertinence pour les moteurs.

Sans optimisation, une image de 5 Mo sur votre page d’accueil ralentit le chargement de plusieurs secondes. Vos conversions chutent. Votre taux de rebond monte. Votre positionnement baisse.

Les deux piliers : compression et texte alternatif

Optimiser une image, c’est deux actions simples :

• Réduire le poids sans perdre la qualité visuelle.
• Écrire un texte alt pertinent qui décrit l’image en termes que Google et les humains comprennent.

Beaucoup de webmasters négligent la compression. Ils pensent que la qualité souffrira. C’est faux. Une image de 500 Ko peut souvent devenir 80 Ko sans perte visible.

Sur le texte alt, l’erreur courante est de l’oublier ou de le bourrer de mots-clés (« chaussures rouges femme pas chère design moderne »). Google voit la manipulation. Écrivez simplement ce que l’image montre.

Étape 1 : Choisir le bon format d’image

Avant de compresser, le format compte.

JPEG : idéal pour les photos. Compression avec perte (acceptable pour les photos). Très répandu.

PNG : idéal pour les graphiques, logos, images avec zones transparentes. Compression sans perte. Fichiers plus lourds.

WebP : format moderne, plus léger que JPEG et PNG. Support croissant, mais moins universel. Bon pour optimisation avancée.

SVG : pour les icônes et illustrations. Vectoriel, léger, scalable sans perte. Parfait pour les logos.

Conseil : convertissez vos photos en JPEG. Gardez les logos en PNG ou SVG. Testez WebP si votre public utilise des navigateurs récents.

Étape 2 : Compresser vos images (outils gratuits)

Vous n’avez pas besoin d’un logiciel payant. Ces outils gratuits suffisent :

TinyPNG / TinyJPG : compressez directement en ligne. Chargez jusqu’à 20 images, téléchargez la version optimisée. Gratuit jusqu’à ~160 images par mois.

Squoosh (Google) : outil en ligne de Google. Compressez, convertissez en WebP, prévisualisez en temps réel. Entièrement gratuit.

ImageOptim (macOS) ou FileOptimizer (Windows) : applications de bureau. Compressez par lot sans perdre en qualité. Simple et efficace.

ImageMagick (en ligne de commande) : pour les utilisateurs à l’aise avec le terminal. Automatisez la compression en masse.

Conseil : testez avec une image de votre site. Compressez-la avec TinyPNG. Comparez le poids avant/après. Vous verrez souvent une réduction de 60–80 % sans dégradation visible.

Étape 3 : Dimensionner l’image à la bonne taille

Une image de 4 000 × 3 000 px affichée en 600 × 400 px ? Votre navigateur télécharge inutilement les 4 000 × 3 000 px, puis réduit. Double perte de temps et de bande passante.

Redimensionnez vos images à la taille d’affichage réelle :

• Image pour une colonne de 600 px : export en 600 px de large maximum (1 200 px en Retina).
• Image de vignette (200 × 200) : export en 200 × 200 px.
• Image de bannière pleine largeur sur mobile (320 px) et desktop (1 200 px) : créez deux versions.

Utilisez Pixlr (en ligne, gratuit) ou GIMP (gratuit, installable) pour redimensionner rapidement.

Étape 4 : Rédiger un texte alternatif pertinent

Le texte alt est la description de l’image. Il s’affiche si l’image ne charge pas, et il est lu par les lecteurs d’écran.

Les règles :

• Décrivez ce que l’image montre, en 8–15 mots (pas plus de 125 caractères).
• Soyez précis. « Image » ou « photo » seul ne sert à rien.
• Incluez le mot-clé s’il rentre naturellement. Ne le forcez pas.
• Pas de « image de » en début (redondant, les lecteurs d’écran le disent déjà).
• Pas de ponctuation inutile. Une phrase simple suffit.

Exemples :

Conseil : relisez votre alt. Si vous le lisiez à quelqu’un au téléphone, saurait-il exactement ce que l’image montre ?

Étape 5 : Implémenter le texte alt dans votre site

En HTML direct :

<img src="gateau-chocolat.jpg" alt="Gâteau au chocolat recouvert de glaçage noir et cerises" />

Sous WordPress :

1. Allez à la Médithèque ou insérez une image dans l’éditeur.
2. Cliquez sur l’image.
3. Cherchez le champ « Texte alternatif ».
4. Écrivez votre alt. Sauvegardez.

Sous Shopify :

1. Rendez-vous dans Fichiers ou lors de l’ajout d’une image produit.
2. Remplissez le champ « Texte alternatif ».
3. Validez.

Remarque : ne remplissez PAS le champ « Titre » d’une image avec le même texte que l’alt. Le titre s’affiche au survol. Utilisez-le pour une légende courte si pertinent.

Étape 6 : Vérifier et auditer vos images existantes

Vous avez un site avec 500 images ? Ne les re-optimisez pas manuellement une à une. Audit d’abord.

Outil gratuit : Google PageSpeed Insights

1. Entrez l’URL de votre page.
2. Allez à l’onglet « Opportunités ».
3. Cherchez « Reporter des images en dimension très inférieure » ou « Diffuser les images aux formats modernes ».
4. Google vous liste les images mal optimisées avec les gains potentiels.

Outil : Screaming Frog (version gratuite)

1. Téléchargez Screaming Frog.
2. Scannez votre site.
3. Allez à l’onglet « Images ».
4. Vous voyez toutes les images, leurs poids, et celles sans alt.

Commencez par optimiser les images des pages qui reçoivent le plus de trafic. Résultat visible vite.

Étape 7 : Lazy Loading (chargement différé)

Si votre page a 20 images et l’utilisateur n’en voit que 5 au démarrage, pourquoi charger les 15 autres tout de suite ?

Le lazy loading charge les images seulement quand l’utilisateur les approche du viseur (scroll).

En HTML5 (natif) :

<img src="image.jpg" alt="Description" loading="lazy" />

Voilà. Une ligne. Supporté par 95 % des navigateurs modernes.

Sous WordPress :

Beaucoup de thèmes et plugins (Smush, Imagify) l’activent automatiquement. Vérifiez dans les réglages de performance.

Gain : réduction du temps de chargement initial de 30–50 % sur les pages avec beaucoup d’images.

Étape 8 : Images responsives (mobile et desktop)

Une image de 1 200 px sur mobile est trop lourde. Vous servez la même résolution à tout le monde. Inefficace.

Utilisez l’attribut « srcset » :

<img 
  src="image-600.jpg" 
  srcset="image-400.jpg 400w, image-600.jpg 600w, image-1200.jpg 1200w" 
  alt="Description" 
/>

Le navigateur choisit automatiquement la version la plus adaptée à l’écran de l’utilisateur.

Sous WordPress :

WordPress crée automatiquement plusieurs versions d’une image au téléchargement. Il génère le srcset. Pas besoin de l’écrire manuellement.

Conseil : activez la compressibilité des images dans votre hébergement (ou un plugin de cache comme WP Rocket).

Les erreurs à ne pas faire

• Ne mettez pas d’alt vide sur les images décoratives. Mais : ne bourrez pas l’alt de mots-clés. Google détecte la manipulation.
• Ne compressez pas avec perte si l’image est un produit critique ou un graphique. Utilisez PNG sans perte ou WebP.
• Ne laissez pas des images de très haute résolution « juste au cas où ». Redimensionnez à la taille réelle d’affichage.
• Ne nommez pas les fichiers images « image1.jpg » ou « photo.jpg ». Utilisez des noms explicites : « chaussures-running-femme-bleu.jpg » (c’est un léger signal SEO).
• Ne désactivez pas le lazy loading par défaut. C’est une petite victoire de performance gratuite.

Checklist rapide : optimisation d’une image

1. Redimensionnez à la taille d’affichage réelle (TinyPNG ou GIMP).
2. Compressez (TinyPNG, Squoosh, ou ImageOptim).
3. Convertissez en JPEG si c’est une photo, PNG/SVG si c’est un graphique.
4. Nommez