seo-images

Original：🇺🇸 English

Translated

Image optimization analysis for SEO and performance. Checks alt text, file sizes, formats, responsive images, lazy loading, and CLS prevention. Use when user says "image optimization", "alt text", "image SEO", "image size", or "image audit".

4installs

Sourceagricidaniel/claude-seo

Added on2026-02-24

NPX Install

npx skill4agent add agricidaniel/claude-seo seo-images

SKILL.md Content

View Translation Comparison →

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

fetchpriority="high"

for LCP Images

Add

fetchpriority="high"

to your hero/LCP image to prioritize its download in the browser's network queue:

html

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

html

<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

html

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

seo-images

NPX Install

Tags

SKILL.md Content

Image Optimization Analysis

Checks

Alt Text

File Size

Format

Recommended
`<picture>`
Element Pattern

JPEG XL — Emerging Format

Responsive Images

Lazy Loading

`fetchpriority="high"`
for LCP Images

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

CLS Prevention

File Names

CDN Usage

Output

Image Audit Summary

Prioritized Optimization List

Recommendations