**TL;DR.** Le SEO des images est crucial pour le commerce électronique. La recherche d'images est une véritable source de trafic (15–25 % dans la mode/décoration). Assurez-vous de quatre éléments : format moderne (AVIF), tailles réactives, texte alternatif précis par région, et un plan de site d'images. La vision AI rend désormais la génération de texte alternatif en masse triviale.

## Pourquoi le SEO des images est plus important pour le commerce électronique

Trafic de recherche d'images par catégorie (estimations de l'industrie 2025–2026) :

| Catégorie               | Part de recherche d'images |
| ---------------------- | -------------------------- |
| Mode / Vêtements       | 20–35%                     |
| Décoration intérieure   | 15–25%                     |
| Beauté                 | 10–20%                     |
| Alimentation           | 10–15%                     |
| Électronique           | 5–10%                      |
| B2B / Industriel       | < 5%                       |

Au-delà de la recherche d'images classique, Google Lens, Pinterest et la recherche d'images Shopping utilisent les mêmes images et métadonnées. Un bon SEO d'image s'accumule.

## Étape 1 : Format de fichier

| Format       | Compression par rapport à JPEG | Support des navigateurs (2026) | Cas d'utilisation                  |
| ------------ | ------------------------------- | -------------------------------- | ---------------------------------- |
| AVIF         | -40 % à -50 %                  | 95 %+ dans le monde              | Nouvelles images, images héro     |
| WebP         | -25 % à -35 %                  | 99 %+ dans le monde              | Solution de secours pour les anciens Safari/IE |
| JPEG         | de base                        | Universel                        | Solution de secours finale         |
| PNG          | de base + sans perte           | Universel                        | Transparence, logos                |
| SVG          | vecteur                        | Universel                        | Icônes, logos, graphiques simples  |

Le défaut de 2026 : AVIF avec WebP en solution de secours. Next.js `<Image>` fait cela automatiquement.

```tsx
<Image
  src="/products/leather-bag.jpg"  // la source est JPEG ; Next convertit
  width={800}
  height={800}
  alt="Sac messager en cuir marron, cuir pleine fleur, quincaillerie en laiton"
  formats={['image/avif', 'image/webp']}
/>
```

## Étape 2 : Tailles réactives

Générez plusieurs résolutions et laissez le navigateur choisir. Le couple `srcset` + `sizes` :

```html
<img
  src="/products/leather-bag-800.avif"
  srcset="
    /products/leather-bag-400.avif 400w,
    /products/leather-bag-800.avif 800w,
    /products/leather-bag-1200.avif 1200w,
    /products/leather-bag-1600.avif 1600w
  "
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Sac messager en cuir marron, cuir pleine fleur, quincaillerie en laiton"
  width="800"
  height="800"
/>
```

Next.js `<Image>` gère `srcset` + `sizes` automatiquement lorsque vous fournissez la prop `sizes`.

## Étape 3 : Texte alternatif

Règles pour le texte alternatif :

1. Décrivez ce qu'il y a dans l'image, dans le contexte.
2. Évitez "Image de..." (l'alt est implicitement une image).
3. Soyez spécifique. "Sac messager en cuir marron, cuir pleine fleur, quincaillerie en laiton" est meilleur que "sac en cuir".
4. Adaptez le contexte de la page produit. L'alt de la première image produit doit se concentrer sur l'attribut principal du produit.
5. Variez l'alt entre les images de produits (l'alt de l'image 1 ≠ l'alt de l'image 2).
6. ≤ 125 caractères typiquement (les lecteurs d'écran coupent les plus longs).
7. Traduisez par région.

Modèles pour le commerce électronique :

| Type d'image                    | Modèle d'alt                                                            |
| ------------------------------- | ----------------------------------------------------------------------- |
| Image principale du produit      | `[Nom du produit], [attribut principal (matériau/couleur/taille)]`      |
| Détail du produit / gros plan    | `[Nom du produit] — [détail] (par exemple, couture, quincaillerie, étiquette)` |
| Style de vie / modèle            | `[Nom du produit] porté par un modèle dans [cadre]`                    |
| Variante (couleur/taille)        | `[Nom du produit] en [variante]`                                      |
| Vignette de galerie              | Identique à l'image principale qu'elle représente                       |
| Décoratif                       | `alt=""` (alt vide — explicitement décoratif)                          |
| Logo de marque                  | `[Nom de la marque]` ou `[Logo de la marque]`                          |
| Héros de page de catégorie       | `[Nom de la catégorie] collection`                                      |

Mauvais modèles d'alt :

- ❌ `bag.jpg` (nom de fichier, pas description)
- ❌ `Image d'un sac` (dit "image")
- ❌ `Achetez maintenant ! Meilleur sac en cuir !` (promotionnel)
- ❌ `sac sac sac cuir marron` (bourrage de mots-clés)
- ❌ Alt vide sur une image significative (échec d'accessibilité)

## Étape 4 : Alt conscient de la région

Une vitrine française a besoin d'un texte alternatif en français. Un produit anglais importé dans la région française sans alt traduit a un alt qui dit "Brown leather messenger bag" sur une page française — mauvais pour les utilisateurs avec des lecteurs d'écran français et mauvais pour la recherche d'images française.

Modèle de données :

```ts
interface MediaAsset {
  id: string;
  url: string;
  alt: {
    en?: string;
    de?: string;
    fr?: string;
    es?: string;
    // ...
  };
}
```

Rendez l'alt approprié à la région :

```tsx
<Image src={asset.url} alt={asset.alt[locale] ?? asset.alt[defaultLocale]} ... />
```

## Étape 5 : Vision AI pour génération en masse

Écrire manuellement le texte alternatif pour 10 000 images de produits n'est pas réaliste. La vision GPT-4o (ou équivalent) génère un texte alternatif précis à partir d'images de produits pour environ 0,001–0,005 $ par image.

Modèle de prompt :

```
Vous écrivez un texte alternatif pour une image de produit de commerce électronique. Décrivez le produit clairement et spécifiquement.

Contexte :
- Nom du produit : "{product.name}"
- Catégorie : "{product.category}"
- Marque : "{product.brand}"
- Région : "{locale}"

Image :
{image_url}

Contraintes :
- Maximum 125 caractères.
- Décrivez le produit, la couleur, le matériau si visible.
- Langue appropriée à la région.
- Pas de préfixe "Image de...".
- Pas de langage promotionnel.

Sortie uniquement le texte alternatif. Pas d'explication.
```

Exemple de coût : 10 000 images × 0,002 $ chacune = 20 $.

Toujours faire un échantillon de révision (10–20 %) avant de publier le texte alternatif généré par l'IA.

## Étape 6 : Cibles de compression

| Type d'image                | Taille de fichier cible  |
| --------------------------- | ----------------------- |
| Image héro / grande image produit (1600px) | ≤ 200 Ko AVIF   |
| Image principale du produit (800px) | ≤ 100 Ko AVIF      |
| Vignette de galerie (200px)  | ≤ 20 Ko AVIF       |
| Carte de catégorie (400px)      | ≤ 50 Ko AVIF       |
| Logo                       | ≤ 10 Ko SVG ou PNG |

Outils :

- [Squoosh](https://squoosh.app) pour une optimisation ponctuelle.
- Bibliothèque `sharp` dans Node.js pour un traitement par lot programmatique.
- Next.js Image gère cela automatiquement.

## Étape 7 : Plan de site d'images

Le plan de site d'images signale à Google quelles images de votre site sont des images de produits commerciaux. Format :

```xml
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/products/leather-bag</loc>
    <image:image>
      <image:loc>https://example.com/.../leather-bag-main.avif</image:loc>
      <image:title>Sac messager en cuir marron</image:title>
      <image:caption>Sac messager en cuir pleine fleur avec quincaillerie en laiton</image:caption>
      <image:license>https://example.com/license</image:license>
    </image:image>
    <image:image>
      <image:loc>https://example.com/.../leather-bag-detail.avif</image:loc>
      <image:title>Sac en cuir marron — détail de la quincaillerie</image:title>
    </image:image>
  </url>
</urlset>
```

Soumettez le plan de site d'images séparément dans Google Search Console.

## Comment Ordiko gère le SEO des images

- AVIF + WebP en solution de secours via Next.js Image automatiquement.
- Tailles réactives générées au moment du téléchargement.
- Texte alternatif par région sur chaque actif média.
- Génération de texte alternatif AI en masse sur le tableau de bord `/seo/images`.
- Plan de site d'images à `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` sur l'image héro LCP par page.

## FAQ

**Le texte alternatif affecte-t-il directement les classements ?**
Indirectement. Le texte alternatif ne classe pas les pages ; il classe les images dans Google Image Search. Pour le commerce électronique, c'est commercialement pertinent — la recherche d'images génère 15–25 % du trafic de recherche dans certaines catégories (mode, décoration).

**Le texte alternatif généré par l'IA est-il acceptable pour Google ?**
Oui, s'il est précis et utile. Les directives de Google sont basées sur la qualité du contenu, pas sur la source de création. Le texte alternatif généré par l'IA est acceptable ; le texte alternatif généré par l'IA de mauvaise qualité ne l'est pas. Faites toujours un échantillon de révision de la sortie de l'IA.

**Quelle est la différence entre le texte alternatif et l'attribut title ?**
L'alt est destiné aux lecteurs d'écran et à la solution de secours en cas de défaillance d'image (et au SEO). Le title est l'info-bulle au survol. Utilisez toujours l'alt ; évitez le title pour les images de produits à moins d'avoir une raison UX spécifique.

**Comment Ordiko gère-t-il la génération de texte alternatif en masse ?**
Le tableau de bord /seo/images d'Ordiko répertorie chaque image associée à son propriétaire d'entité et à son statut d'alt par région. Sélectionnez en masse + 'Générer avec l'IA' appelle gpt-4o-mini vision via une file d'attente Trigger.dev avec estimation des coûts. Le drapeau media.aiGeneratedAlt distingue l'IA du manuel.