/seo-images

name: seo-images
description: >
  Image optimization analysis for SEO and performance. Checks alt text, file
  sizes, formats, responsive images, lazy loading, CLS prevention, image SERP
  rankings (via DataForSEO), and image file optimization (WebP/AVIF conversion,
  IPTC/XMP metadata injection). Use when user says "image optimization",
  "alt text", "image SEO", "image size", "image audit", "optimize images",
  "image metadata", "image SERP", "convert to webp", or "image file optimize".
user-invocable: true
argument-hint: "[url]"
license: MIT
metadata:
  author: AgriciDaniel
  version: "2.6.0"
  category: seo

Image Optimization Analysis

Checks

Alt Text

• Present on all `<img>` elements (except decorative: `role="presentation"`). `parse_html.py` marks these with `decorative: true`; do not flag them for missing alt text.
• Descriptive: describes the image content, not "image.jpg" or "photo"
• Includes relevant keywords where natural, not keyword-stuffed
• Length: 10-125 characters

**Good examples:**

• "Professional plumber repairing kitchen sink faucet"
• "Red 2024 Toyota Camry sedan front view"
• "Team meeting in modern office conference room"

**Bad examples:**

• "image.jpg" (filename, not description)
• "plumber plumbing plumber services" (keyword stuffing)
• "Click here" (not descriptive)

File Size

**Tiered thresholds by image category:**

| Image Category | Target | Warning | Critical | |----------------|--------|---------|----------| | Thumbnails | < 50KB | > 100KB | > 200KB | | Content images | < 100KB | > 200KB | > 500KB | | Hero/banner images | < 200KB | > 300KB | > 700KB |

Recommend compression to target thresholds where possible without quality loss.

Format

| Format | Browser Support | Use Case | |--------|-----------------|----------| | WebP | 97%+ | Default recommendation | | AVIF | 92%+ | Best compression, newer | | JPEG | 100% | Fallback for photos | | PNG | 100% | Graphics with transparency | | SVG | 100% | Icons, logos, illustrations |

Recommend WebP/AVIF over JPEG/PNG. Check for `<picture>` element with format fallbacks.

Judge the served format, not the URL extension

Many sites serve WebP or AVIF from a `.jpg`/`.png` URL when the browser asks for it (WordPress WebP plugins such as EWWW, ShortPixel, WebP Express and Imagify, Cloudflare Polish, image CDNs). The extension is not the format visitors receive. Run `"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py --url <url> --probe-images --json`, which fetches each image with a browser `Accept` header and adds to every image entry (for a lazy-loaded image it probes `resolved_src`, the real source, because `src` is then a placeholder):

| Field | Meaning | |---|---| | `served_format` | Format actually served (`webp`, `avif`, `jpeg`, `png`, `gif`, `svg`, `jxl`), from the magic bytes, else `null` | | `served_bytes` | Size actually served (Content-Length), or `null` when the server omits it | | `negotiated` | `true` when the response has `Vary: Accept`, so the format depends on the browser | | `probe_error` | Why the image could not be checked (fetch failed, malformed URL, or the response is not a recognized image, such as an HTML error or hotlink-protection page), else `null` |

• Flag "Wrong Format" and size savings only from `served_format` / `served_bytes`. A `.jpg` URL with

`served_format: webp` is already optimized: do not recommend converting it.

• If `probe_error` is set, report the format as unverified. Never infer it from the extension.
• Never suggest a replacement image URL (e.g. `photo.webp`) without confirming it returns HTTP 200.

Recommended `<picture>` Element Pattern

Use progressive enhancement with the most efficient format first:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600" loading="lazy" decoding="async">
</picture>

The browser will use the first supported format. Global browser support (caniuse.com, checked 2026-09-28): AVIF about 95.4%, WebP about 96.8%. Re-check caniuse before quoting.

JPEG XL: Emerging Format

Third-party reporting and Wikipedia describe a Rust-based JPEG XL decoder as shipped in Chrome 145 stable (2026-02-10) behind the `chrome://flags/#enable-jxl-image-format` flag, not enabled by default; no Google-owned confirmation was retrieved in the fact pack. Because default support is not confirmed, it is not yet practical for production web delivery. Keep serving AVIF/WebP with JPEG fallback and monitor.

Responsive Images

• `srcset` attribute for multiple sizes
• `sizes` attribute matching layout breakpoints
• Appropriate resolution for device pixel ratios

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Description"
>

Lazy Loading

• `loading="lazy"` on below-fold images
• Do NOT lazy-load above-fold/hero images (hurts LCP)
• Check for native vs JavaScript-based lazy loading

<!-- Below fold - lazy load -->
<img src="photo.jpg" loading="lazy" alt="Description">

<!-- Above fold - eager load (default) -->
<img src="hero.jpg" alt="Hero image">

Detected lazy-loader methods (`lazy_method` field)

`"${CLAUDE_PLUGIN_ROOT}/scripts/claude-seo" run parse_html.py` classifies each image's lazy-loading mechanism via the `lazy_method` field on every image entry. Five values:

| `lazy_method` | Signal detected | Common stack | |---|---|---| | `native` | `loading="lazy"` HTML attribute | Modern browsers, plain HTML | | `perfmatters` | `data-perfmatters-src`/`-srcset` OR class `perfmatters-lazy` | WordPress + Perfmatters plugin | | `ewww` | `data-ewww-src` / `data-eio` OR class `lazyload-eio` | WordPress + EWWW Image Optimizer | | `js-generic` | `data-src` / `data-lazy-src` / `data-original` / `data-srcset` OR class `lazyload`/`