image-optimization

What this skill does

# SEO On-Page: Image Optimization

Guides image optimization for Google Search (text results, Image Pack, Google Images, Discover), Core Web Vitals (LCP), and accessibility. Consolidates image-related best practices from components (hero, trust-badges) and pages (landing-page). References: [Google Image SEO](https://developers.google.com/search/docs/appearance/google-images), [Semrush Image SEO](https://www.semrush.com/blog/image-seo/).

**When invoking**: On **first use**, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.

## Scope

- **Discovery & indexing**: HTML img elements, image sitemap
- **Format & performance**: WebP, responsive images, lazy loading, LCP; full CWV optimization in **core-web-vitals**
- **Metadata**: Alt text, file names, captions
- **Preferred image**: primaryImageOfPage, og:image; thumbnail next to title/description in search results
- **Structured data**: ImageObject, image in Article/Product/etc.

## Initial Assessment

**Check for project context first:** If `.claude/project-context.md` or `.cursor/project-context.md` exists, read it for brand and page context.

Identify:
1. **Context**: Hero, content page, product, trust badge, social preview
2. **Above vs below fold**: LCP candidate (hero) vs lazy-loadable
3. **Image count**: Single hero vs gallery, programmatic pages

---

## 1. Discovery & Indexing

### Use HTML Image Elements

Google finds images in the `src` attribute of `<img>` (including inside `<picture>`). **CSS background images are not indexed.**

| Do | Don't |
|----|-------|
| `<img src="puppy.jpg" alt="Golden retriever puppy" />` | `<div style="background-image:url(puppy.jpg)">` |

### Image Sitemap

Submit an [image sitemap](https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps) to help Google discover images it might otherwise miss. Image sitemaps can include URLs from CDNs (other domains); verify CDN domain in Search Console for crawl error reporting.

**Structure** (from Google):

```xml
<?xml version="1.0" encoding="UTF-8"?>
<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/page</loc>
    <image:image>
      <image:loc>https://example.com/image.jpg</image:loc>
    </image:image>
  </url>
</urlset>
```

See **xml-sitemap** for sitemap index and submission. Image sitemap is an extension; can be standalone or combined with page sitemap.

---

## 2. Format & Performance

### Supported Formats

Google supports: **BMP, GIF, JPEG, PNG, WebP, SVG, AVIF**. Match filename extension to format.

| Format | Best for | Notes |
|--------|----------|-------|
| **WebP** | Photos, graphics | Smaller files, faster load; lossy + lossless; transparency, animation |
| **AVIF** | Modern browsers | Even smaller than WebP; check support |
| **JPEG** | Standard photos | Fallback; widely supported |
| **PNG** | Transparency, detail | Larger; use when needed |
| **SVG** | Icons, logos | Scalable; use `<title>` for inline SVG alt |
| **GIF** | Simple animation | First frame only for preview |

### Responsive Images

Use `<picture>` or `srcset` for different screen sizes. **Always provide fallback `src`**—some crawlers don't understand srcset.

```html
<img
  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="image-800w.jpg"
  alt="Descriptive alt text">
```

**Picture element** (format fallback, e.g. WebP → PNG):

```html
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.png" alt="Descriptive alt text">
</picture>
```

### Data URI (Inline Images)

Base64 data URIs (`data:image/...;base64,...`) reduce HTTP requests but increase HTML size. Use sparingly for small icons; avoid for large images. See [web.dev](https://web.dev/articles/embedding-images-and-video#data_uris).

### Resize & Compress

- **Max width**: Generally ≤2,500px; match container max-width
- **Compression**: WebP preferred; quality 75–85 for lossy; 72dpi for web
- **LCP**: Hero/above-fold images are LCP candidates; optimize aggressively

### Lazy Loading

Use `loading="lazy"` **only for below-fold images**. Above-fold images (hero) must load immediately—lazy loading them hurts LCP.

```html
<img src="hero.jpg" alt="..." loading="eager">
<img src="below-fold.jpg" alt="..." loading="lazy">
```

---

## 3. Alt Text

Alt text improves **accessibility** (screen readers, low bandwidth) and **SEO** (Google uses it with computer vision to understand images). It also serves as anchor text if the image is a link.

### Best Practices

| Do | Don't |
|----|-------|
| Useful, information-rich description | Keyword stuffing |
| Context of page content | "image of" or "photo of" (redundant) |
| Max ~125 characters (some assistive tech truncates) | Empty alt on meaningful images |
| Descriptive for functional images | Alt on purely decorative images (use `alt=""`) |

**Examples** (from Google):

- ❌ Missing: `<img src="puppy.jpg"/>`
- ❌ Stuffing: `alt="puppy dog baby dog pup pups puppies..."`
- ✅ Better: `alt="puppy"`
- ✅ Best: `alt="Dalmatian puppy playing fetch"`

### Captions

Google extracts image context from captions and nearby text. Use `<figcaption>` or descriptive text near the image.

| Use | Purpose |
|-----|---------|
| **Topic relevance** | Caption describes image subject; supports indexing |
| **Featured Snippets** | Images near answers with captions can capture thumbnail slots; see **featured-snippet** |
| **Image Pack** | Alt + caption + file name help Image Pack display; see **serp-features** |

### Inline SVG

Use `<title>` inside SVG for accessibility:

```html
<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Descriptive text for the SVG</title>
</svg>
```

---

## 4. File Names

Descriptive filenames give Google light clues about subject matter.

| Do | Don't |
|----|-------|
| `apple-iphone-15-pink-side-view.jpg` | `IMG00353.jpg` |
| Short, hyphen-separated | Generic: `image1.jpg`, `pic.gif` |
| Localize filenames for translated pages | Overly long filenames |

---

## 5. Preferred Image (SERP Thumbnail & Discover)

When users search for keywords, optimized images can appear as **thumbnails next to the page title and description** in search results—enhancing visibility and CTR. Google also uses these images for Google Discover. [Search Engine Land](https://searchengineland.com/google-uses-both-schema-org-markup-and-ogimage-meta-tag-for-thumbnails-in-google-search-and-discover-470598)

Google selects thumbnails automatically from multiple sources. Influence selection via:

### Schema: primaryImageOfPage

```json
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://example.com/page",
  "primaryImageOfPage": "https://example.com/images/cat.png"
}
```

Or attach `image` to main entity (e.g. BlogPosting, Article) via `mainEntity` or `mainEntityOfPage`.

### Open Graph

```html
<meta property="og:image" content="https://example.com/images/cat.png">
```

**Preferred image rules**: Relevant, representative; avoid generic (e.g. logo) or text-heavy images; avoid extreme aspect ratios; high resolution. See **open-graph**, **twitter-cards** for social specs.

**Google Discover** (if targeting Discover): ≥1200px wide; ≥300KB; 16:9 aspect ratio preferred; important content visible in landscape crop.

---

## 6. Page Context

- **Title & meta description**: Google uses page title and meta for image result snippets. See **title-tag**, **meta-description**.
- **Placement**: Put images near relevant text; page subject matter influences image indexing.
- **Same URL**: Reference the same image with the same URL across pages for cache efficiency and crawl budget.

---

## 7. Structured Data

Add structured data for rich results in Googl