Seo images

Skill lionkiii/claude-seo-skills/skills/seo-images

42 SEO commands for Claude Code — site audits, Ahrefs backlinks, GSC analytics, SERP research, content briefs, technical SEO, schema validation, and more

Install

npx -y skills add lionkiii/claude-seo-skills --skill seo-images

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats (WebP, AVIF), responsive images, lazy loading, CLS prevention, and Core Web Vitals image impact. Use when user says "image optimization", "alt text", "image SEO", "image size", "image audit", "WebP", "AVIF", "lazy loading", "CLS", "responsive images", or "Core Web Vitals images".

SKILL.md

6.0 KB, ~1.4k tokens by cl100k_base, as published. Nobody here has run it

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
Place images near relevant text on pages relevant to the image subject — Google uses alt text along with surrounding page content to understand the image (per Google Images best practices)

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	Universal (~100%)	Default recommendation
AVIF	~95%+	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 ~95%+, WebP universal.

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.

LCP Image Subparts

LCP time for an image breaks down into four subparts: TTFB → resource load delay → resource load time → element render delay. <link rel="preload"> plus fetchpriority="high" attack the resource load delay — they get the LCP image discovered and queued at top priority as early as possible.

`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.webp" alt="Description" width="600" height="400" loading="lazy" decoding="async">

CLS Prevention

width and height attributes set on all <img> elements
aspect-ratio CSS as alternative
Flag images without dimensions

<!-- Good - dimensions set -->
<img src="photo.jpg" width="800" height="600" alt="Description">

<!-- Good - CSS aspect ratio -->
<img src="photo.jpg" style="aspect-ratio: 4/3" alt="Description">

<!-- Bad - no dimensions -->
<img src="photo.jpg" alt="Description">

File Names

Descriptive: blue-running-shoes.webp not IMG_1234.jpg
Hyphenated, lowercase, no special characters
Include relevant keywords

CDN Usage

Check if images served from CDN (different domain, CDN headers)
Recommend CDN for image-heavy sites
Check for edge caching headers

Output

Image Audit Summary

Metric	Status	Count
Total Images	-	XX
Missing Alt Text	❌	XX
Oversized (>200KB)	⚠️	XX
Wrong Format	⚠️	XX
No Dimensions	⚠️	XX
Not Lazy Loaded	⚠️	XX

Prioritized Optimization List

Sorted by file size impact (largest savings first):

Image	Current Size	Format	Issues	Est. Savings
...	...	...	...	...

Recommendations

Convert X images to WebP format (est. XX KB savings)
Add alt text to X images
Add dimensions to X images
Enable lazy loading on X below-fold images
Compress X oversized images

Gives 0 of the 12 instructions most performance cost skills give in ~1.4k tokens

Counted across 803 of the 1,058 authors here whose files we hold, read 2026-08-06

keep skill files under 500 linesin 82 of 803, across 17 files
use imperative form in instructionsin 81 of 803, across 10 files
draft assertions while test runs are in progressin 75 of 803, across 9 files
create two to three realistic test promptsin 74 of 803, across 8 files
write skill descriptions to be pushyin 72 of 803, across 7 files
save test cases to evals jsonin 72 of 803, across 6 files
ask questions about edge cases and input formatsin 71 of 803, across 6 files
save timing data immediately when runs completein 70 of 803, across 5 files
include all trigger conditions in the skill descriptionin 69 of 803, across 3 files
launch all test runs in a single turnin 69 of 803, across 3 files
capture intent before writing a skillin 67 of 803, across 1 file
import directly instead of barrel filesin 52 of 803, across 15 files

Said here and by no other author read

enforce specific file size thresholds by image category
recommend WebP or AVIF over JPEG or PNG
check for responsive srcset and sizes attributes
verify file names are descriptive and hyphenated
recommend a CDN for image-heavy sites
output a prioritized optimization list sorted by savings

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.