Copy/agileflow:seo:images https://example.com                    # Image audit for homepage
/agileflow:seo:images https://example.com/products/item       # Product page images

Copy<!-- Good: Responsive with srcset and sizes -->
<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: 900px) 800px, 1200px"
  width="800"
  height="600"
  alt="Descriptive alt text"
  loading="lazy"
>
 
<!-- Better: Format alternatives with <picture> -->
<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Descriptive alt text" width="800" height="600">
</picture>

Copy<!-- Good: LCP image gets priority -->
<img
  src="hero.jpg"
  alt="Hero section describing main benefit"
  width="1200"
  height="600"
  fetchpriority="high"
  loading="eager"
/>
 
<!-- With preload for extra speed -->
<link rel="preload" as="image" href="hero.jpg">
<img src="hero.jpg" alt="..." width="1200" height="600">

Copy# Image Optimization Report: https://example.com
 
## Images Found: 12
 
### Summary
 
| Metric | Count | Status |
|--------|-------|--------|
| Total images | 12 | |
| Missing alt text | 2 | High severity |
| Poor alt text | 1 | Medium |
| Missing width/height | 3 | High severity (CLS risk) |
| Legacy format only | 7 | Medium |
| Missing lazy loading | 4 | Medium |
| No LCP priority | 1 | High severity |
 
**Image Optimization Score: 68/100 (Needs Work)**
 
---
 
## Critical Issues
 
### 1. Missing alt text on hero image
- Image: `/img/hero.jpg`
- Position: Above-fold
- Severity: CRITICAL
- Fix: Add alt="Main benefit statement"
 
### 2. Three images missing width/height
- Risk: Cumulative Layout Shift (CLS)
- Severity: HIGH
- Fix: Add width and height attributes
 
### 3. Hero image missing fetchpriority
- Impact: Slower Largest Contentful Paint (LCP)
- Severity: HIGH
- Fix: Add fetchpriority="high"
 
---
 
## High Priority
 
### 4. All product images legacy format only
- Current: All JPEG
- Better: Offer WebP/AVIF
- Impact: 30-40% smaller file size
- Fix: Generate WebP versions and use `<picture>` element
 
### 5. Below-fold images not lazy loading
- Images: /img/testimonial-1.jpg, /img/testimonial-2.jpg
- Impact: Delays page load
- Fix: Add loading="lazy" to `<img>` tags
 
---
 
## Medium Priority
 
### 6. Alt text on product image generic
- Current: "product"
- Better: "Blue wireless headphones with noise canceling - side view"
- Impact: Image search visibility
- Fix: Improve alt text
 
---
 
## Image-by-Image Audit
 
| Image | Alt Text | Size | Format | Lazy | LCP | Issues |
|-------|----------|------|--------|------|-----|--------|
| hero.jpg | Missing | Y | JPEG | N | Yes | 2 issues |
| product-1.jpg | Generic | Y | JPEG | N | N | Format |
| product-2.jpg | Good | Missing | JPEG | Y | N | Size + Format |
| testimonial-1.jpg | Good | Y | JPEG | Missing | N | Format |
| testimonial-2.jpg | Good | Y | JPEG | Missing | N | Format |
| icon-1.svg | N/A | Y | SVG | N | N | OK |
| icon-2.svg | N/A | Y | SVG | N | N | OK |
 
---
 
## Remediation Examples
 
### Fix Missing Alt Text
```html
<!-- Before -->
<img src="hero.jpg">
 
<!-- After -->
<img src="hero.jpg" alt="Team collaborating on project strategy in modern office">

Copy<!-- Before (CLS risk) -->
<img src="photo.jpg" alt="...">
 
<!-- After (prevents shift) -->
<img src="photo.jpg" alt="..." width="800" height="600">

Copy<!-- Before -->
<img src="below-fold.jpg" alt="...">
 
<!-- After -->
<img src="below-fold.jpg" alt="..." loading="lazy">

Copy<!-- Before -->
<img src="image.jpg" alt="..." width="800" height="600">
 
<!-- After (40% smaller on modern browsers) -->
<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="..." width="800" height="600">
</picture>

Copy<!-- Before -->
<img src="hero.jpg" alt="..." width="1200" height="600">
 
<!-- After (faster paint) -->
<img src="hero.jpg" alt="..." width="1200" height="600" fetchpriority="high">