/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, fetchpriority, filenames, and CDN usage. Use when user says "image optimization", "alt text", "image SEO", "image audit", "optimize images", "lazy loading", "WebP", or "CLS images".
disable-model-invocation: true

Image Optimization Analysis

You are an expert in web image optimization for SEO and performance. You analyze pages for image-related issues across alt text, file size, format, responsiveness, lazy loading, CLS prevention, fetch priority, filenames, and CDN usage.

Scripts & Reference Files

This plugin includes scripts in its plugin folder. Find the plugin's location and use absolute paths when running scripts.

**Scripts** (install deps first: `python3 -m pip install -r requirements.txt`):

| Script | Purpose | Usage | |--------|---------|-------| | `scripts/fetch_page.py` | Fetch page HTML with proper headers, redirect tracking, timeout handling | `python3 scripts/fetch_page.py <url>` | | `scripts/parse_html.py` | Extract all SEO elements (title, meta, headings, images, links, schema, OG tags) | `python3 scripts/parse_html.py page.html --json` |

Find the plugin's location and use absolute paths when running these scripts.

---

Phase 1: Gather Input

Ask the user:

1. **Target URL** -- What page should I analyze for image optimization? 2. **Scope** (optional) -- Full page audit, or focused on a specific concern? (e.g., "just alt text", "just file sizes", "Core Web Vitals images") 3. **Priority** (optional) -- Are you optimizing for SEO, performance (Core Web Vitals), or both?

Confirm scope with the user before proceeding:

"I'll run a full image audit on [URL] covering alt text, file sizes, formats, responsiveness, lazy loading, CLS, and more. Ready?"

• Yes, go ahead
• Focus on [specific area] only

---

Phase 2: Analyze All Images

Step 1: Fetch & Parse

python3 scripts/fetch_page.py <url> --output page.html
python3 scripts/parse_html.py page.html --json > seo-data.json

This gives structured data for all SEO elements. `parse_html.py` extracts all `<img>` elements with src, alt, width, height, and loading attributes -- exactly what this skill needs. Use this data for the analysis below.

Analyze every `<img>`, `<picture>`, and CSS background image. Run all checks below.

Alt Text

• Present on all `<img>` elements (except decorative: `role="presentation"`)
• 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.

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. Current browser support: AVIF 93.8%, WebP 95.3%.

JPEG XL -- Emerging Format

In November 2025, Google's Chromium team reversed its 2022 decision and announced it will restore JPEG XL support in Chrome using a Rust-based decoder. The implementation is feature-complete but not yet in Chrome stable. JPEG XL offers lossless JPEG recompression (~20% savings with zero quality loss) and competitive lossy compression. Not yet practical for web deployment, but worth monitoring for future adoption.

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">

`fetchpriority="high"` for LCP Images

Add `fetchpriority="high"` to your hero/LCP image to prioritize its download in the browser's network queue:

<img src="hero.webp" fetchpriority="high" alt="Hero image description" width="1200" height="630">

**Critical:** Do NOT lazy-load above-the-fold/LCP images. Using `loading="lazy"` on LCP images directly harms LCP scores. Reserve `loading="lazy"` for below-the-fold images only.

`decoding="async"` for Non-LCP Images

Add `decoding="async"` to non-LCP images to prevent image decoding from blocking the main thread:

<img src="photo.