# Seo Images

> Image SEO and optimization rules for Next.js. Use when adding images, product photos, icons, banners, or working with the next/image component. Covers alt text, sizing, formats, lazy loading, and LCP optimization.

- **Type:** Skill
- **Install:** `agentstack add skill-mvstepanek-nextjs-ecommerce-seo-skills-seo-images`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mvstepanek](https://agentstack.voostack.com/s/mvstepanek)
- **Installs:** 0
- **Category:** [Developer Tools](https://agentstack.voostack.com/c/developer-tools)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mvstepanek](https://github.com/mvstepanek)
- **Source:** https://github.com/mvstepanek/nextjs-ecommerce-seo-skills/tree/main/skills/seo-images

## Install

```sh
agentstack add skill-mvstepanek-nextjs-ecommerce-seo-skills-seo-images
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Image SEO & Optimization Guidelines

Technical rules for image implementation in a Next.js e-commerce site.

## Always Use next/image

- **Never use raw `` tags** — always use `` from `next/image`
- next/image provides automatic: WebP/AVIF conversion, lazy loading, responsive sizing, blur placeholders
- Missing these optimizations directly hurts Core Web Vitals (LCP and CLS), which are ranking factors

```typescript
// GOOD
import Image from 'next/image';

// BAD - never do this

```

## Alt Text Technical Requirements

The `alt` prop is required on every `` component. Search engines use alt text for image indexing and accessibility tools depend on it.

### Rules

- **`alt` prop must always be present** — never omit it
- **Must not be empty on meaningful images** — product photos, category heroes, and informational images must have descriptive alt text
- **Only use `alt=""`** on purely decorative images (background patterns, visual separators)
- **Pass alt text from data** — pull from CMS/PIM `altText` field when available, fall back to product name + context

### Examples by Image Type

| Image Type | Alt Pattern | Example |
|-----------|------------|---------|
| Product main | `{Name} - {Key Spec or View}` | "Blue Widget Pro 3000 - front view" |
| Product gallery | `{Name} - {Angle/Detail}` | "Blue Widget Pro 3000 - control panel detail" |
| Category hero | `{Description of content}` | "Range of wireless headphones from 20Hz to 40kHz" |
| Icon/decorative | `""` (empty) | `alt=""` |
| Logo | `{Company} logo` | "Acme Corp logo" |

```typescript
// GOOD — descriptive, from data
alt={`${product.name} - ${image.viewLabel}`}

// BAD
alt="product image"
alt="image_0"
alt=""  // on a meaningful product image
alt={product.sku}  // Not human-readable
```

## Sizing & Layout Stability

- **Always specify `width` and `height`** — or use `fill` with a sized container
- Missing dimensions cause CLS (Cumulative Layout Shift) — content jumps around as images load
- Use the image's intrinsic dimensions, not display dimensions

```typescript
// GOOD - explicit dimensions

// GOOD - fill mode with container

  

// BAD - no dimensions, causes CLS

```

## Priority & LCP Optimization

- **Use `priority` on the LCP image** — the largest above-the-fold image (usually the hero product photo)
- Only 1-2 images per page should have `priority` — it disables lazy loading and triggers preload
- On product pages, the main product image is almost always the LCP element

```typescript
// Product page hero image — this is the LCP element

// Gallery thumbnails — NOT priority, they're below fold or secondary

```

## Image Formats

Configure next.config.js for optimal format delivery:

```javascript
// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    // If using an external image CDN:
    remotePatterns: [
      { protocol: 'https', hostname: '*.your-cdn.com' },
    ],
  },
};
```

- AVIF can be up to ~50% smaller than JPEG, WebP typically ~30% smaller (varies by image content and quality settings)
- next/image automatically serves the best format the browser supports
- If the image source is external, add the domain to `remotePatterns`

## Lazy Loading

- **Default behavior is lazy loading** — do not add `loading="lazy"` manually (it's redundant)
- Only override with `priority` for above-the-fold images
- Lazy loading prevents offscreen images from blocking initial page load

## Blur Placeholder

Use blur placeholders for product images to reduce perceived loading time and CLS:

```typescript

```

Generate `blurDataURL` at build time or from the CMS/PIM system.

## Common Technical Anti-Patterns

1. **Raw `` tags** — always use next/image
2. **Missing `alt` prop** — every `` must have `alt`; use empty string only for decorative images
3. **Empty alt on product images** — only use `alt=""` for purely decorative images
4. **Missing dimensions** — causes CLS, hurts Core Web Vitals
5. **Priority on every image** — only the LCP image (1-2 per page) should have priority
6. **Enormous source images** — if displaying at 800px wide, don't serve a 4000px source; use `sizes` prop
7. **Missing remote patterns** — external images fail silently without `remotePatterns` config

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mvstepanek](https://github.com/mvstepanek)
- **Source:** [mvstepanek/nextjs-ecommerce-seo-skills](https://github.com/mvstepanek/nextjs-ecommerce-seo-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mvstepanek-nextjs-ecommerce-seo-skills-seo-images
- Seller: https://agentstack.voostack.com/s/mvstepanek
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.