**TL;DR.** El SEO de imágenes es crucial para el comercio electrónico. La búsqueda de imágenes es una fuente de tráfico real (15–25% en moda/decoración). Asegúrate de cuatro cosas: formato moderno (AVIF), tamaños responsivos, texto alternativo preciso por localidad y un mapa del sitio de imágenes. La visión AI ahora hace que la generación masiva de texto alternativo sea trivial.

## Por qué el SEO de imágenes es más importante para el comercio electrónico

Tráfico de búsqueda de imágenes por categoría (estimaciones de la industria 2025–2026):

| Categoría               | Participación de búsqueda de imágenes |
| ---------------------- | ------------------ |
| Moda / Ropa           | 20–35%             |
| Decoración del hogar   | 15–25%             |
| Belleza                | 10–20%             |
| Comida                 | 10–15%             |
| Electrónica            | 5–10%              |
| B2B / Industrial       | < 5%               |

Más allá de la búsqueda clásica de imágenes, Google Lens, Pinterest y la búsqueda de imágenes de compras utilizan las mismas imágenes y metadatos. Un fuerte SEO de imágenes se multiplica.

## Paso 1: Formato de archivo

| Formato       | Compresión vs JPEG | Soporte de navegador (2026)                       | Caso de uso                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% a -50%        | 95%+ a nivel global                                | Nuevas imágenes, imágenes principales           |
| WebP         | -25% a -35%        | 99%+ a nivel global                                | Respaldo para Safari/IE más antiguos      |
| JPEG         | base               | Universal                                    | Respaldo final                    |
| PNG          | base + sin pérdida | Universal                                    | Transparencia, logotipos               |
| SVG          | vector             | Universal                                    | Iconos, logotipos, gráficos simples     |

El predeterminado para 2026: AVIF con respaldo de WebP. Next.js `<Image>` hace esto automáticamente.

```tsx
<Image
  src="/products/leather-bag.jpg"  // la fuente es JPEG; Next convierte
  width={800}
  height={800}
  alt="Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón"
  formats={['image/avif', 'image/webp']}
/>
```

## Paso 2: Tamaños responsivos

Genera múltiples resoluciones y deja que el navegador elija. El par `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="Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón"
  width="800"
  height="800"
/>
```

Next.js `<Image>` maneja `srcset` + `sizes` automáticamente cuando proporcionas la propiedad `sizes`.

## Paso 3: Texto alternativo

Reglas para el texto alternativo:

1. Describe lo que hay en la imagen, en contexto.
2. Omite "Imagen de..." (el alt es implícitamente una imagen).
3. Sé específico. "Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón" es mejor que "bolso de cuero".
4. Coincide con el contexto de la página del producto. El alt de la primera imagen del producto debe centrarse en el atributo principal del producto.
5. Varía el alt entre las imágenes del producto (el alt de la imagen 1 ≠ el alt de la imagen 2).
6. ≤ 125 caracteres típicamente (los lectores de pantalla cortan los más largos).
7. Traduce por localidad.

Patrones para el comercio electrónico:

| Tipo de imagen                    | Patrón de alt                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Imagen principal del producto          | `[Nombre del producto], [atributo principal (material/color/tamaño)]`            |
| Detalle del producto / primer plano       | `[Nombre del producto] — [detalle] (por ejemplo, costura, herrajes, etiqueta)`          |
| Estilo de vida / modelo              | `[Nombre del producto] usado por modelo en [entorno]`                            |
| Variante (color/tamaño)            | `[Nombre del producto] en [variante]`                                          |
| Miniatura de galería              | Igual que la imagen principal que representa                                    |
| Decorativa                     | `alt=""` (alt vacío — explícitamente decorativa)                            |
| Logotipo de marca                     | `[Nombre de la marca]` o `[Logotipo de la marca]`                                  |
| Imagen principal de la página de categoría              | `[Nombre de la categoría] colección`                                            |

Malos patrones de alt:

- ❌ `bag.jpg` (nombre de archivo, no descripción)
- ❌ `Imagen de un bolso` (dice "imagen")
- ❌ `¡Compra ahora! ¡El mejor bolso de cuero!` (promocional)
- ❌ `bag bag bag leather brown` (relleno de palabras clave)
- ❌ Alt vacío en una imagen significativa (fallo de accesibilidad)

## Paso 4: Alt consciente de la localidad

Una tienda francesa necesita texto alternativo en francés. Un producto en inglés importado a la localidad francesa sin alt traducido tiene un alt que dice "Bolso mensajero de cuero marrón" en una página francesa — malo para los usuarios con lectores de pantalla en francés y malo para la búsqueda de imágenes en francés.

Modelo de datos:

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

Renderiza el alt apropiado para la localidad:

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

## Paso 5: Visión AI para generación masiva

Es poco realista escribir manualmente texto alternativo para 10,000 imágenes de productos. La visión GPT-4o (o equivalente) genera texto alternativo preciso a partir de imágenes de productos por aproximadamente $0.001–0.005 por imagen.

Plantilla de solicitud:

```
Estás escribiendo texto alternativo para una imagen de producto de comercio electrónico. Describe el producto de manera clara y específica.

Contexto:
- Nombre del producto: "{product.name}"
- Categoría: "{product.category}"
- Marca: "{product.brand}"
- Localidad: "{locale}"

Imagen:
{image_url}

Restricciones:
- Máximo 125 caracteres.
- Describe el producto, color, material si es visible.
- Lenguaje apropiado para la localidad.
- Sin prefijo "Imagen de...".
- Sin lenguaje promocional.

Salida solo el texto alternativo. Sin explicación.
```

Ejemplo de costo: 10,000 imágenes × $0.002 cada una = $20.

Siempre revisa una muestra (10–20%) antes de publicar el alt generado por AI.

## Paso 6: Objetivos de compresión

| Tipo de imagen                | Tamaño de archivo objetivo  |
| ------------------------- | ----------------- |
| Imagen principal / grande del producto (1600px) | ≤ 200KB AVIF   |
| Imagen principal del producto (800px) | ≤ 100KB AVIF      |
| Miniatura de galería (200px)  | ≤ 20KB AVIF       |
| Tarjeta de categoría (400px)      | ≤ 50KB AVIF       |
| Logotipo                       | ≤ 10KB SVG o PNG |

Herramientas:

- [Squoosh](https://squoosh.app) para optimización única.
- Biblioteca `sharp` en Node.js para procesamiento por lotes programático.
- Next.js Image maneja esto automáticamente.

## Paso 7: Mapa del sitio de imágenes

El mapa del sitio de imágenes indica a Google qué imágenes en tu sitio son imágenes de productos comerciales. 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>Bolso mensajero de cuero marrón</image:title>
      <image:caption>Bolso mensajero de cuero de grano completo con herrajes de latón</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>Bolso de cuero marrón — detalle de herrajes</image:title>
    </image:image>
  </url>
</urlset>
```

Envía el mapa del sitio de imágenes por separado en Google Search Console.

## Cómo Ordiko maneja el SEO de imágenes

- AVIF + respaldo de WebP a través de Next.js Image automáticamente.
- Tamaños responsivos generados en el momento de la carga.
- Texto alternativo por localidad en cada activo multimedia.
- Generación masiva de texto alternativo AI en el panel de control `/seo/images`.
- Mapa del sitio de imágenes en `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` en la imagen principal LCP por página.

## FAQ

**¿El texto alternativo afecta directamente las clasificaciones?**
Indirectamente. El texto alternativo no clasifica páginas; clasifica imágenes en Google Image Search. Para el comercio electrónico, eso es comercialmente relevante: la búsqueda de imágenes impulsa el 15–25% del tráfico de búsqueda en algunas categorías (moda, decoración).

**¿Es aceptable el texto alternativo generado por AI para Google?**
Sí, si es preciso y útil. La guía de Google se basa en la calidad del contenido, no en la fuente de creación. El alt generado por AI está bien; el alt basura generado por AI no lo está. Siempre haz una revisión de muestreo de la salida de AI.

**¿Cuál es la diferencia entre el texto alternativo y el atributo title?**
El alt es para lectores de pantalla y respaldo en caso de fallo de imagen (y SEO). El title es la herramienta emergente al pasar el cursor. Usa siempre el alt; omite el title para imágenes de productos a menos que tengas una razón específica de UX.

**¿Cómo maneja Ordiko la generación masiva de alt?**
El panel de control /seo/images de Ordiko lista cada imagen unida a su propietario de entidad y estado de alt por localidad. Selección masiva + 'Generar con AI' llama a gpt-4o-mini vision a través de una cola de Trigger.dev con estimación de costos. La bandera media.aiGeneratedAlt distingue AI de manual.