Seo Images
Audit and fix image alt text, formats, lazy loading, and CLS risks so pages rank in image SERPs and load fast.
Overview
SEO Images is an agent skill for the Launch phase that analyzes and optimizes on-page images for search rankings, accessibility alt text, and performance formats.
Install
npx skills add https://github.com/agricidaniel/claude-seo --skill seo-imagesWhat is this skill?
- Alt-text rules with good vs bad examples and 10–125 character guidance
- Tiered file-size thresholds by image category with warning and critical bands
- Checks decorative images via role=presentation and keyword-stuffing anti-patterns
- Covers lazy loading, responsive srcset, and CLS prevention for Core Web Vitals
- Optional DataForSEO image SERP context plus WebP/AVIF conversion and IPTC/XMP metadata injection
- Alt text length guidance: 10–125 characters
Adoption & trust: 2.1k installs on skills.sh; 8.5k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your site ships heavy JPEGs, missing or stuffed alt text, and layout-shifting images that hurt image search visibility and Core Web Vitals.
Who is it for?
Solo builders launching or refreshing a public marketing site, blog, or ecommerce catalog who need a systematic image audit from a single URL or codebase pass.
Skip if: Pre-validate wireframes with no real assets, pure backend APIs with no HTML surface, or teams that only need brand photography briefs without technical SEO.
When should I use this skill?
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.
What do I get? / Deliverables
You receive a categorized image SEO report with alt, size, format, and CLS fixes plus optional WebP/AVIF and metadata steps ready for implementation in your framework.
- Image SEO audit report
- Alt-text and format remediation list
- Conversion and metadata action steps
Recommended Skills
Journey fit
Image SEO is a launch visibility task tied to publishing and indexing public URLs, not pre-build prototyping. The skill explicitly targets alt text, responsive images, WebP/AVIF, metadata, and image SERP checks—core on-page SEO subphase work.
How it compares
On-page image checker and optimizer—not a full-site crawl skill or SUCCESs copy framework.
Common Questions / FAQ
Who is seo-images for?
Indie developers and marketers using Claude-style agents who maintain content-heavy sites and want image SERP and performance fixes aligned with claude-seo workflows.
When should I use seo-images?
At launch when pages go live or before a major SEO push; re-run after CMS uploads, hero image swaps, or when Search Console flags LCP/CLS on image-heavy URLs.
Is seo-images safe to install?
It may call external SEO and optimization services per SKILL.md; review the Security Audits panel on this Prism page and scope network permissions before production repos.
SKILL.md
READMESKILL.md - Seo Images
MIT License - see repository root LICENSE file for complete terms. Copyright (c) 2026 AgriciDaniel https://github.com/AgriciDaniel/claude-seo --- 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-invokable: true argument-hint: "[url]" license: MIT metadata: author: AgriciDaniel version: "1.9.9" category: seo --- # Image Optimization Analysis ## Checks ### 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: ```html <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 ```html <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 ```html <!-- 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) `scripts/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 |