**TL;DR.** L'ottimizzazione SEO delle immagini è fondamentale per l'ecommerce. La Ricerca Immagini è una vera fonte di traffico (15–25% nella moda/arredamento). Fai quattro cose giuste: formato moderno (AVIF), dimensioni reattive, testo alternativo accurato per locale e una mappa delle immagini. La visione AI rende ora banale la generazione in massa del testo alternativo.

## Perché l'ottimizzazione SEO delle immagini è più importante per l'ecommerce

Traffico della Ricerca Immagini per categoria (stime del settore 2025–2026):

| Categoria               | Quota Ricerca Immagini |
| ---------------------- | ------------------ |
| Moda / Abbigliamento       | 20–35%             |
| Arredamento              | 15–25%             |
| Bellezza                  | 10–20%             |
| Cibo                    | 10–15%             |
| Elettronica             | 5–10%              |
| B2B / Industriale         | < 5%               |

Oltre alla classica Ricerca Immagini, Google Lens, Pinterest e la Ricerca Immagini Shopping utilizzano le stesse immagini e metadati. Una forte SEO delle immagini si accumula.

## Passo 1: Formato file

| Formato       | Compressione vs JPEG | Supporto browser (2026)                       | Caso d'uso                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% a -50%        | 95%+ a livello globale                                | Nuove immagini, immagini principali           |
| WebP         | -25% a -35%        | 99%+ a livello globale                                | Fallback per Safari/IE più vecchi      |
| JPEG         | baseline            | Universale                                    | Fallback finale                    |
| PNG          | baseline + lossless | Universale                                    | Trasparenza, loghi               |
| SVG          | vettoriale              | Universale                                    | Icone, loghi, grafiche semplici     |

Il default del 2026: AVIF con fallback WebP. Next.js `<Image>` fa questo automaticamente.

```tsx
<Image
  src="/products/leather-bag.jpg"  // la sorgente è JPEG; Next converte
  width={800}
  height={800}
  alt="Borsa a tracolla in pelle marrone, pelle pieno fiore, hardware in ottone"
  formats={['image/avif', 'image/webp']}
/>
```

## Passo 2: Dimensioni reattive

Genera più risoluzioni e lascia che il browser scelga. La coppia `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="Borsa a tracolla in pelle marrone, pelle pieno fiore, hardware in ottone"
  width="800"
  height="800"
/>
```

Next.js `<Image>` gestisce `srcset` + `sizes` automaticamente quando fornisci la prop `sizes`.

## Passo 3: Testo alternativo

Regole per il testo alternativo:

1. Descrivi cosa c'è nell'immagine, nel contesto.
2. Salta "Immagine di..." (l'alt è implicitamente un'immagine).
3. Sii specifico. "Borsa a tracolla in pelle marrone, pelle pieno fiore, hardware in ottone" è meglio di "borsa in pelle".
4. Abbina il contesto della pagina prodotto. L'alt della prima immagine del prodotto dovrebbe concentrarsi sull'attributo principale del prodotto.
5. Varia l'alt tra le immagini dei prodotti (l'alt dell'immagine 1 ≠ l'alt dell'immagine 2).
6. ≤ 125 caratteri tipicamente (i lettori di schermo tagliano quelli più lunghi).
7. Traduci per locale.

Schemi per l'ecommerce:

| Tipo di immagine                    | Schema alt                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Immagine principale del prodotto          | `[Nome prodotto], [attributo principale (materiale/colore/dimensione)]`            |
| Dettaglio prodotto / primo piano       | `[Nome prodotto] — [dettaglio] (es. cuciture, hardware, etichetta)`          |
| Lifestyle / modello              | `[Nome prodotto] indossato da un modello in [ambientazione]`                            |
| Variante (colore/dimensione)            | `[Nome prodotto] in [variante]`                                          |
| Miniatura galleria              | Stesso dell'immagine principale che rappresenta                                    |
| Decorativa                     | `alt=""` (alt vuoto — esplicitamente decorativa)                            |
| Logo del marchio                     | `[Nome marchio]` o `[Nome marchio] logo`                                  |
| Immagine principale della categoria              | `[Nome categoria] collezione`                                            |

Schemi alt sbagliati:

- ❌ `bag.jpg` (nome file, non descrizione)
- ❌ `Immagine di una borsa` (dice "immagine")
- ❌ `Compra ora! La migliore borsa in pelle!` (promozionale)
- ❌ `borsa borsa borsa pelle marrone` (keyword stuffing)
- ❌ Alt vuoto su un'immagine significativa (fallimento di accessibilità)

## Passo 4: Alt consapevole del locale

Un negozio francese ha bisogno di testo alternativo francese. Un prodotto inglese importato nel locale francese senza alt tradotto ha un alt che dice "Brown leather messenger bag" su una pagina francese — male per gli utenti con lettori di schermo francesi e male per la Ricerca Immagini francese.

Modello dati:

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

Renderizza l'alt appropriato per il locale:

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

## Passo 5: Visione AI per generazione in massa

Scrivere manualmente il testo alternativo per 10.000 immagini di prodotto non è realistico. La visione GPT-4o (o equivalente) genera testo alternativo accurato da immagini di prodotto per circa $0.001–0.005 per immagine.

Modello di prompt:

```
Stai scrivendo il testo alternativo per un'immagine di prodotto ecommerce. Descrivi chiaramente e specificamente il prodotto.

Contesto:
- Nome prodotto: "{product.name}"
- Categoria: "{product.category}"
- Marchio: "{product.brand}"
- Locale: "{locale}"

Immagine:
{image_url}

Vincoli:
- Massimo 125 caratteri.
- Descrivi il prodotto, colore, materiale se visibile.
- Lingua appropriata per il locale.
- Nessun prefisso "Immagine di...".
- Nessun linguaggio promozionale.

Output solo il testo alternativo. Nessuna spiegazione.
```

Esempio di costo: 10.000 immagini × $0.002 ciascuna = $20.

Fai sempre una revisione del campione (10–20%) prima di pubblicare l'alt generato dall'AI.

## Passo 6: Obiettivi di compressione

| Tipo di immagine                | Dimensione file target  |
| ------------------------- | ----------------- |
| Immagine principale / grande prodotto (1600px) | ≤ 200KB AVIF   |
| Immagine principale del prodotto (800px) | ≤ 100KB AVIF      |
| Miniatura galleria (200px)  | ≤ 20KB AVIF       |
| Scheda categoria (400px)      | ≤ 50KB AVIF       |
| Logo                       | ≤ 10KB SVG o PNG |

Strumenti:

- [Squoosh](https://squoosh.app) per ottimizzazione una tantum.
- Libreria `sharp` in Node.js per batch programmatico.
- Next.js Image gestisce questo automaticamente.

## Passo 7: Mappa delle immagini

La mappa delle immagini segnala a Google quali immagini sul tuo sito sono immagini di prodotto commerciali. Formato:

```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>Borsa a tracolla in pelle marrone</image:title>
      <image:caption>Borsa a tracolla in pelle pieno fiore con hardware in ottone</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>Borsa in pelle marrone — dettaglio hardware</image:title>
    </image:image>
  </url>
</urlset>
```

Invia la mappa delle immagini separatamente nella Google Search Console.

## Come Ordiko gestisce l'ottimizzazione SEO delle immagini

- AVIF + fallback WebP tramite Next.js Image automaticamente.
- Dimensioni reattive generate al momento del caricamento.
- Testo alternativo per locale su ogni asset multimediale.
- Generazione in massa del testo alternativo AI nel dashboard `/seo/images`.
- Mappa delle immagini su `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` sull'immagine principale LCP per pagina.

## FAQ

**Il testo alternativo influisce direttamente sui ranking?**
Indirettamente. Il testo alternativo non classifica le pagine; classifica le immagini nella Ricerca Immagini di Google. Per l'ecommerce, questo è commercialmente rilevante — la Ricerca Immagini guida il 15–25% del traffico di ricerca in alcune categorie (moda, arredamento).

**Il testo alternativo generato dall'AI è accettabile per Google?**
Sì, se è accurato e utile. Le linee guida di Google si basano sulla qualità del contenuto, non sulla fonte di creazione. L'alt generato dall'AI va bene; l'alt spazzatura generato dall'AI non va bene. Fai sempre una revisione del campione dell'output dell'AI.

**Qual è la differenza tra testo alternativo e attributo title?**
L'alt è per i lettori di schermo e il fallback in caso di errore dell'immagine (e SEO). Il title è il tooltip al passaggio del mouse. Usa sempre l'alt; salta il title per le immagini dei prodotti a meno che tu non abbia un motivo specifico per l'UX.

**Come gestisce Ordiko la generazione in massa del testo alternativo?**
Il dashboard `/seo/images` di Ordiko elenca ogni immagine associata al suo proprietario dell'entità e allo stato dell'alt per locale. Selezione in massa + 'Genera con AI' chiama la visione gpt-4o-mini tramite una coda Trigger.dev con stima dei costi. Il flag media.aiGeneratedAlt distingue l'AI dal manuale.