image-optimization

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: image-optimization
description: When the user wants to optimize images for search engines and performance. Also use when the user mentions "image SEO," "alt text," "image captions," "figcaption," "image optimization," "WebP," "lazy loading," "LCP," "image sitemap," "responsive images," "srcset," "image format," or "hero image optimization." For CWV, use core-web-vitals.
metadata:
  version: 1.2.1
---

# 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-800