image-optimization

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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

**Project context:** Read root `contextus.md` when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.

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.

From kostja94/marketing-skills, MIT.

More from kostja94/marketing-skills