30x Seo Images

Image Optimization Analysis

Checks

Alt Text

• Present on all ` 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 | 100KB | > 200KB | | Content images | 200KB | > 500KB | | Hero/banner images | 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 `` element with format fallbacks.

Recommended `` Element Pattern

Use progressive enhancement with the most efficient format first:

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

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

fetchpriority="high" for LCP Images

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

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:

CLS Prevention

• width and height attributes set on all `` elements
• aspect-ratio CSS as alternative
• Flag images without dimensions

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

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

[PROTOCOL]: Update this header on changes, then check CLAUDE.md

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: norahe0304-art
• Source: norahe0304-art/30x-seo
• License: MIT

Install and usage instructions live in the source repository linked above.