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", "optimize images", "image performance", or "image audit".

Image Optimization Analysis

CRITICAL: Data Extraction Method

Correct approach:

# Get all <img> tags with their attributes
curl -sL [URL] | grep -oP '<img[^>]+>' | head -20

# Check for <picture> elements and srcset
curl -sL [URL] | grep -i -E '(<picture|srcset|<source.*type=)'

# Check for lazy loading
curl -sL [URL] | grep -i 'loading=' | head -10

Input

• URL to analyze (fetches and parses HTML)
• HTML file or content
• List of image URLs to audit

Analysis Checklist

1. Alt Text Quality

• Describes image content, not filename
• Natural keyword inclusion (no stuffing)
• Length: 10-125 characters
• Context-appropriate

<img src="divider.png" role="presentation" alt="">

2. File Size Optimization

3. Modern Format Usage

<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="Modern living room with minimalist furniture" 
       width="1200" height="675" loading="lazy" decoding="async">
</picture>

• JPEGs/PNGs that should be WebP/AVIF
• Missing fallback formats in <picture> elements
• Estimate conversion savings

4. Responsive Images Implementation

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, 
          product-800.webp 800w, 
          product-1200.webp 1200w,
          product-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  alt="Wireless noise-cancelling headphones in matte black"
  width="800"
  height="600"
  loading="lazy"
>

• srcset for images > 400px wide
• sizes attribute matching layout breakpoints
• Device pixel ratio variants (1x, 2x for retina)

5. Lazy Loading Strategy

• ✅ loading="lazy" on below-fold images
• ❌ NEVER lazy-load LCP (Largest Contentful Paint) images
• ❌ NEVER lazy-load above-fold images
• ✅ Native lazy loading preferred over JavaScript libraries

<!-- ❌ BAD - Lazy loading hero image hurts LCP -->
<img src="hero.webp" loading="lazy" alt="...">

<!-- ✅ GOOD - Hero image loads immediately -->
<img src="hero.webp" fetchpriority="high" alt="..." width="1200" height="630">

<!-- ✅ GOOD - Below-fold image lazy loads -->
<img src="testimonial.webp" loading="lazy" decoding="async" alt="..." width="400" height="400">

• Hero/above-fold images with loading="lazy" (critical error)
• Below-fold images without loading="lazy" (missed optimization)

6. LCP Image Optimization

<img src="hero-banner.webp" 
     fetchpriority="high" 
     alt="Professional kitchen remodeling services in Seattle"
     width="1920" 
     height="1080">

• Add fetchpriority="high" to LCP image
• NO loading="lazy" on LCP image
• Use optimal format (WebP/AVIF with JPEG fallback)
• Include explicit dimensions

7. Async Decoding for Non-Critical Images

<img src="gallery-item-3.webp" 
     alt="Finished basement renovation with home theater setup" 
     width="600" 
     height="400" 
     loading="lazy" 
     decoding="async">

8. CLS Prevention

<!-- ✅ GOOD - Explicit dimensions -->
<img src="author-photo.webp" width="80" height="80" alt="Sarah Chen, Content Director">

<!-- ✅ GOOD - CSS aspect ratio -->
<img src="featured-image.webp" style="aspect-ratio: 16/9" alt="...">

<!-- ✅ GOOD - Responsive with intrinsic aspect ratio -->
<img src="hero.webp" 
     width="1200" 
     height="675" 
     style="width: 100%; height: auto;" 
     alt="...">

<!-- ❌ BAD - No dimensions -->
<img src="blog-image.webp" alt="...">

• width and height attributes, OR
• CSS aspect-ratio property

9. SEO-Friendly File Naming

• Descriptive, hyphenated, lowercase
• Include relevant keywords
• No special characters or spaces
• Extension matches actual format

• Generic names (IMG_, DSC_, image_, photo_)
• Uppercase extensions
• Dates or version numbers in filenames
• Spaces or special characters

10. CDN and Delivery Optimization

• Images served from CDN (different domain)
• Cache headers (Cache-Control, Expires)
• Compression headers (Content-Encoding: gzip)
• Geographic distribution

<!-- ✅ Served from CDN -->
<img src="https://cdn.example.com/images/product-photo.webp" alt="...">

<!-- ❌ Served from origin -->
<img src="https://www.example.com/uploads/product-photo.jpg" alt="...">

Output Format

Executive Summary

Image Audit Summary for: [URL/Page Name]
Analyzed: [XX] total images
Scan Date: [Date]

Critical Issues: X
Warnings: X
Estimated Savings: XXX KB (XX%)

Metrics Dashboard

Priority Optimization List

Detailed Recommendations

<img src="hero-banner.jpg" loading="lazy" alt="Kitchen remodeling">

<picture>
  <source srcset="hero-banner.avif" type="image/avif">
  <source srcset="hero-banner.webp" type="image/webp">
  <img src="hero-banner.jpg" 
       fetchpriority="high" 
       alt="Modern kitchen renovation with quartz countertops and stainless appliances"
       width="1920" 
       height="1080">
</picture>

• Convert XX JPEG images to WebP: ~XX% savings (~XXX KB)
• Convert XX PNG images to WebP: ~XX% savings (~XXX KB)
• Total estimated savings: XXX KB

• Prevents mobile users from downloading desktop-sized images
• Estimated mobile data savings: XXX KB per page load

<!-- Add to images below fold -->
loading="lazy" decoding="async"

<!-- Add explicit dimensions -->
width="800" height="600"

• IMG_2847.jpg → customer-testimonial-sarah-chen.webp
• Screen-Shot-2024.png → quarterly-revenue-growth-chart.webp

Estimated Performance Impact

• Total image weight: XXX KB
• LCP: X.X seconds
• CLS: 0.XX

• Total image weight: XXX KB (XX% reduction)
• Estimated LCP improvement: -X.X seconds
• Estimated CLS improvement: -0.XX

• Mobile: XX% faster
• Desktop: XX% faster
• First Contentful Paint: -XX ms
• Total Blocking Time: -XX ms

Implementation Checklist

• Convert hero/LCP image to WebP/AVIF with fetchpriority="high"
• Remove loading="lazy" from above-fold images
• Convert remaining JPEGs/PNGs to WebP
• Add dimensions (width/height) to all images
• Implement srcset for images > 400px wide
• Add loading="lazy" to below-fold images
• Add decoding="async" to non-LCP images
• Fix all missing/poor alt text
• Rename files with descriptive names
• Configure CDN if not already in use
• Set up automated image optimization pipeline

Tools & Resources

• Compression: Squoosh.app, TinyPNG, ImageOptim
• Format conversion: cwebp (WebP), avifenc (AVIF)
• Responsive images: Cloudinary, Imgix, sharp (Node.js)
• Testing: Lighthouse, WebPageTest, Chrome DevTools
• Bulk processing: ImageMagick, sharp, Squoosh CLI

• Set up build pipeline to auto-convert images
• Implement CDN with automatic format optimization
• Use responsive image generation in CMS