Automatic Alt Text Generation for Product Images (AI)

Implementing Automatic Alt Text Generation for Product Images (AI)

Alt text in an image serves two functions: it helps search engines understand page content and makes the site accessible to blind users. In most online stores, alt tags are either empty or contain only the filename like IMG_4821.jpg. This is a lost SEO signal and accessibility violation.

With thousands of product images, the task is solved automatically—either based on product metadata or through multimodal analysis of the image itself.

Two Approaches

Approach 1: generation from product metadata—fast, cheap, doesn't require uploading images to the model. Works when photos are standard (white background, single angle).

Approach 2: multimodal image analysis—the model sees the photo and describes what's in it. Needed for lifestyle photos, multi-object images, or when visual details matter.

Approach 1: From Metadata

function buildAltFromMetadata(
  product: Product,
  imageIndex: number,
  imageType: "main" | "detail" | "lifestyle"
): string {
  const base = `${product.brand} ${product.name}`;

  if (imageType === "main") {
    return `${base} — photo ${imageIndex + 1}`;
  }

  if (imageType === "detail") {
    const feature = product.attributes.detailFeatures?.[imageIndex] ?? "detail";
    return `${base}: ${feature}`;
  }

  return `${base} in use`;
}

Simple, deterministic variant. Requires no API calls, works instantly on product import.

Approach 2: Multimodal (GPT-4o Vision)

import { openai } from "../lib/openai";

async function generateAltFromImage(
  imageUrl: string,
  product: Product
): Promise<string> {
  const response = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "user",
        content: [
          {
            type: "image_url",
            image_url: { url: imageUrl, detail: "low" }, // low—cheaper, enough for alt
          },
          {
            type: "text",
            text: `Write a concise alt text for this product image in English.
Product: ${product.name}, brand: ${product.brand}, category: ${product.category}.
Rules:
- 60–120 characters
- Describe what is visible in the image, not the product in general
- Start with product name only if it's clearly identifiable in the photo
- No "photo", "image", "picture" at the start
- No markdown, just plain text`,
          },
        ],
      },
    ],
    max_tokens: 80,
    temperature: 0.3,
  });

  return response.choices[0].message.content?.trim() ?? "";
}

detail: "low" reduces cost from ~$0.002 to ~$0.0003 per image—enough for alt generation, no high resolution needed.

Batch Image Processing

import { Queue, Worker } from "bullmq";

const altQueue = new Queue("alt-generation");

export async function queueImagesForAltGeneration(
  productIds: string[]
) {
  const products = await db.products.findMany({
    where: { id: { in: productIds } },
    include: { images: true },
  });

  const jobs = products.flatMap((product) =>
    product.images
      .filter((img) => !img.altText || img.altText === "")
      .map((img) => ({
        name: "generate-alt",
        data: { imageId: img.id, productId: product.id, imageUrl: img.url },
      }))
  );

  await altQueue.addBulk(jobs);
}

const altWorker = new Worker(
  "alt-generation",
  async (job) => {
    const { imageId, productId, imageUrl } = job.data;
    const product = await db.products.findById(productId);

    // Determine if multimodal analysis is needed
    const useVision = product.imageType === "lifestyle" || product.useVisionForAlt;

    let altText: string;

    if (useVision) {
      altText = await generateAltFromImage(imageUrl, product);
    } else {
      const imageIndex = product.images.findIndex((i: any) => i.id === imageId);
      altText = buildAltFromMetadata(product, imageIndex, "main");
    }

    await db.productImages.update({
      where: { id: imageId },
      data: { altText, altGeneratedAt: new Date() },
    });
  },
  { connection: redisConnection, concurrency: 20 }
);

CMS Integration

After generation, alt text is saved in the images table and rendered in the template:

<img
  src="{{ image.url }}"
  alt="{{ image.altText }}"
  loading="lazy"
  width="{{ image.width }}"
  height="{{ image.height }}"
/>

If alt is empty (generation not yet done or failed)—fallback to product name, but not an empty string:

const alt = image.altText || `${product.brand} ${product.name}`;

Existing Catalog Audit

Before launching generation, it's useful to understand the problem scale:

SELECT
  COUNT(*) FILTER (WHERE alt_text IS NULL OR alt_text = '') AS missing_alt,
  COUNT(*) FILTER (WHERE alt_text = file_name) AS filename_as_alt,
  COUNT(*) total
FROM product_images;

This shows how many images need processing and lets you plan API load. 50,000 images with multimodal generation—about $15, with metadata generation—free.