198 lines
6.6 KiB
Markdown
198 lines
6.6 KiB
Markdown
---
|
|
name: seo-images
|
|
description: >
|
|
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".
|
|
risk: safe
|
|
source: "https://github.com/AgriciDaniel/claude-seo"
|
|
date_added: "2026-03-21"
|
|
user-invokable: true
|
|
argument-hint: "[url]"
|
|
allowed-tools:
|
|
- Read
|
|
- Grep
|
|
- Glob
|
|
- Bash
|
|
- WebFetch
|
|
---
|
|
|
|
# Image Optimization Analysis
|
|
|
|
## When to Use
|
|
- Use when auditing image SEO, alt text, file sizes, formats, or lazy loading.
|
|
- Use when the user wants image-specific performance recommendations.
|
|
- Use when checking media quality signals that affect both SEO and Core Web Vitals.
|
|
|
|
## 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
|
|
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
|
|
|
|
## Error Handling
|
|
|
|
| Scenario | Action |
|
|
|----------|--------|
|
|
| URL unreachable | Report connection error with status code. Suggest verifying URL and checking if site requires authentication. |
|
|
| No images found on page | Report that no `<img>` elements were detected. Suggest checking if images are loaded via JavaScript or CSS background-image. |
|
|
| Images behind CDN or authentication | Note that image files could not be directly accessed for size analysis. Report available metadata (alt text, dimensions, format from markup) and flag inaccessible resources. |
|
|
|
|
## Limitations
|
|
- Use this skill only when the task clearly matches the scope described above.
|
|
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
|
|
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
|