**TL;DR.** Image SEO matters most for ecommerce. Image Search is a real traffic source (15–25% in fashion/decor). Get four things right: modern format (AVIF), responsive sizes, accurate alt text per locale, and an image sitemap. AI vision now makes bulk alt-text generation trivial.

## Why image SEO matters more for ecommerce

Image Search traffic by category (industry estimates 2025–2026):

| Category               | Image Search share |
| ---------------------- | ------------------ |
| Fashion / Apparel       | 20–35%             |
| Home decor              | 15–25%             |
| Beauty                  | 10–20%             |
| Food                    | 10–15%             |
| Electronics             | 5–10%              |
| B2B / Industrial         | < 5%               |

Beyond classic Image Search, Google Lens, Pinterest, and Image Search Shopping use the same images and metadata. Strong image SEO compounds.

## Step 1: File format

| Format       | Compression vs JPEG | Browser support (2026)                       | Use case                          |
| ------------ | ------------------- | -------------------------------------------- | --------------------------------- |
| AVIF         | -40% to -50%        | 95%+ globally                                | New images, hero images           |
| WebP         | -25% to -35%        | 99%+ globally                                | Fallback for older Safari/IE      |
| JPEG         | baseline            | Universal                                    | Final fallback                    |
| PNG          | baseline + lossless | Universal                                    | Transparency, logos               |
| SVG          | vector              | Universal                                    | Icons, logos, simple graphics     |

The 2026 default: AVIF with WebP fallback. Next.js `<Image>` does this automatically.

```tsx
<Image
  src="/products/leather-bag.jpg"  // source is JPEG; Next converts
  width={800}
  height={800}
  alt="Brown leather messenger bag, full-grain, brass hardware"
  formats={['image/avif', 'image/webp']}
/>
```

## Step 2: Responsive sizes

Generate multiple resolutions and let the browser pick. The `srcset` + `sizes` pair:

```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="Brown leather messenger bag, full-grain, brass hardware"
  width="800"
  height="800"
/>
```

Next.js `<Image>` handles `srcset` + `sizes` automatically when you provide `sizes` prop.

## Step 3: Alt text

Alt text rules:

1. Describe what's in the image, in context.
2. Skip "Image of..." (alt is implicitly an image).
3. Be specific. "Brown leather messenger bag, full-grain, brass hardware" beats "leather bag".
4. Match the product page context. The first product image's alt should focus on the primary product attribute.
5. Vary alt across product images (alt of image 1 ≠ alt of image 2).
6. ≤ 125 characters typically (screen readers cut off longer).
7. Translate per locale.

Patterns for ecommerce:

| Image type                    | Alt pattern                                                            |
| ----------------------------- | ---------------------------------------------------------------------- |
| Primary product image          | `[Product name], [primary attribute (material/color/size)]`            |
| Product detail / closeup       | `[Product name] — [detail] (e.g., stitching, hardware, label)`          |
| Lifestyle / model              | `[Product name] worn by model in [setting]`                            |
| Variant (color/size)            | `[Product name] in [variant]`                                          |
| Gallery thumbnail              | Same as the main image it represents                                    |
| Decorative                     | `alt=""` (empty alt — explicitly decorative)                            |
| Brand logo                     | `[Brand name]` or `[Brand name] logo`                                  |
| Category page hero              | `[Category name] collection`                                            |

Bad alt patterns:

- ❌ `bag.jpg` (filename, not description)
- ❌ `Image of a bag` (says "image")
- ❌ `Buy now! Best leather bag!` (promotional)
- ❌ `bag bag bag leather brown` (keyword stuffing)
- ❌ Empty alt on a meaningful image (accessibility failure)

## Step 4: Locale-aware alt

A French storefront needs French alt text. An English product imported into the French locale without translated alt has alt that says "Brown leather messenger bag" on a French page — bad for users with French screen readers and bad for French Image Search.

Data model:

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

Render the locale-appropriate alt:

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

## Step 5: AI vision for bulk generation

Manually writing alt text for 10,000 product images is not realistic. GPT-4o vision (or equivalent) generates accurate alt text from product images for roughly $0.001–0.005 per image.

Prompt template:

```
You are writing alt text for an ecommerce product image. Describe the product clearly and specifically.

Context:
- Product name: "{product.name}"
- Category: "{product.category}"
- Brand: "{product.brand}"
- Locale: "{locale}"

Image:
{image_url}

Constraints:
- Maximum 125 characters.
- Describe the product, color, material if visible.
- Locale-appropriate language.
- No "Image of..." prefix.
- No promotional language.

Output only the alt text. No explanation.
```

Cost example: 10,000 images × $0.002 each = $20.

Always sample-review (10–20%) before publishing AI-generated alt.

## Step 6: Compression targets

| Image type                | Target file size  |
| ------------------------- | ----------------- |
| Hero / large product image (1600px) | ≤ 200KB AVIF   |
| Main product image (800px) | ≤ 100KB AVIF      |
| Gallery thumbnail (200px)  | ≤ 20KB AVIF       |
| Category card (400px)      | ≤ 50KB AVIF       |
| Logo                       | ≤ 10KB SVG or PNG |

Tools:

- [Squoosh](https://squoosh.app) for one-off optimization.
- `sharp` library in Node.js for programmatic batch.
- Next.js Image handles this automatically.

## Step 7: Image sitemap

Image sitemap signals to Google which images on your site are commercial product images. 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>Brown leather messenger bag</image:title>
      <image:caption>Full-grain leather messenger bag with brass hardware</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>Brown leather bag — hardware detail</image:title>
    </image:image>
  </url>
</urlset>
```

Submit the image sitemap separately in Google Search Console.

## How Ordiko handles image SEO

- AVIF + WebP fallback via Next.js Image automatically.
- Responsive sizes generated at upload time.
- Per-locale alt text on every media asset.
- Bulk AI alt-text generation at `/seo/images` dashboard.
- Image sitemap at `/sitemaps/images/route.ts`.
- `<link rel="preload" as="image" fetchpriority="high">` on LCP hero image per page.

## FAQ

**Does alt text directly affect rankings?**
Indirectly. Alt text doesn't rank pages; it ranks images in Google Image Search. For ecommerce, that's commercially relevant — Image Search drives 15–25% of search traffic in some categories (fashion, decor).

**Is AI-generated alt text acceptable to Google?**
Yes if it's accurate and helpful. Google's guidance is content-quality based, not source-of-creation. AI-generated alt is fine; AI-generated junk alt is not. Always do a sampling review of AI output.

**What's the difference between alt text and title attribute?**
Alt is for screen readers and image-failure fallback (and SEO). Title is the hover tooltip. Use alt always; skip title for product images unless you have a specific UX reason.

**How does Ordiko handle bulk alt generation?**
Ordiko's /seo/images dashboard lists every image joined with its entity owner and alt status per locale. Bulk select + 'Generate with AI' calls gpt-4o-mini vision via a Trigger.dev queue with cost estimation. The media.aiGeneratedAlt flag distinguishes AI from manual.