Responsive Image Strategy Planner

Develop a responsive image strategy for [WEBSITE/APPLICATION].

Project Context:
- Site type: [E-COMMERCE/BLOG/PORTFOLIO/APP]
- Traffic profile: [MOBILE %/DESKTOP %]
- Performance target: [LCP TARGET]
- CMS/platform: [PLATFORM]
- CDN: [CDN PROVIDER OR NONE]

Create a comprehensive image strategy:

**1. Image Audit Categories**
| Category | Examples | Typical Sizes | Format Priority |
|----------|----------|---------------|----------------|
| Hero images | | | |
| Product images | | | |
| Thumbnails | | | |
| Icons | | | |
| User content | | | |
| Backgrounds | | | |

**2. Format Strategy**

*Primary Formats:*
- WebP: Browser support, when to use
- AVIF: Browser support, when to use
- JPEG: Fallback scenarios
- PNG: When required (transparency)
- SVG: Icon and illustration usage

*Format Selection Matrix:*
| Image Type | Primary | Fallback | Reasoning |
|------------|---------|----------|------------|

**3. Responsive Breakpoints**

*Viewport-based srcset:*
```html
<img srcset="
  image-320.webp 320w,
  image-640.webp 640w,
  image-1024.webp 1024w,
  image-1920.webp 1920w"
  sizes="...">
```

*Sizes Attribute Patterns:*
| Layout Type | Sizes Value | Explanation |
|-------------|-------------|-------------|
| Full width | | |
| Container width | | |
| Grid item | | |

**4. Art Direction Strategy**
When to use `<picture>` element:
- Aspect ratio changes
- Crop variations
- Content-aware cropping

**5. Lazy Loading Strategy**
- Above-the-fold: eager loading
- Below-the-fold: lazy loading
- Native lazy loading implementation
- Placeholder strategies (blur, LQIP, solid color)

**6. Performance Optimization**

*Compression Targets:*
| Image Type | Quality Setting | Target File Size |
|------------|-----------------|------------------|

*Loading Priority:*
- fetchpriority usage
- Preload critical images
- Defer non-critical images

**7. Implementation Patterns**

*Hero Image:*
```html
[Code pattern]
```

*Product Grid:*
```html
[Code pattern]
```

*Background Image:*
```css
[Code pattern]
```

**8. CMS/Workflow Integration**
- Upload guidelines for content editors
- Automated processing pipeline
- Naming conventions
- Alt text requirements

**9. CDN Configuration**
- Image transformation parameters
- Cache policies
- On-the-fly optimization settings

**10. Monitoring & Validation**
- LCP tracking
- CLS prevention
- Testing checklist

Develop a responsive image strategy for [WEBSITE/APPLICATION].

Project Context:
- Site type: [E-COMMERCE/BLOG/PORTFOLIO/APP]
- Traffic profile: [MOBILE %/DESKTOP %]
- Performance target: [LCP TARGET]
- CMS/platform: [PLATFORM]
- CDN: [CDN PROVIDER OR NONE]

Create a comprehensive image strategy:

**1. Image Audit Categories**
| Category | Examples | Typical Sizes | Format Priority |
|----------|----------|---------------|----------------|
| Hero images | | | |
| Product images | | | |
| Thumbnails | | | |
| Icons | | | |
| User content | | | |
| Backgrounds | | | |

**2. Format Strategy**

*Primary Formats:*
- WebP: Browser support, when to use
- AVIF: Browser support, when to use
- JPEG: Fallback scenarios
- PNG: When required (transparency)
- SVG: Icon and illustration usage

*Format Selection Matrix:*
| Image Type | Primary | Fallback | Reasoning |
|------------|---------|----------|------------|

**3. Responsive Breakpoints**

*Viewport-based srcset:*
```html
<img srcset="
  image-320.webp 320w,
  image-640.webp 640w,
  image-1024.webp 1024w,
  image-1920.webp 1920w"
  sizes="...">
```

*Sizes Attribute Patterns:*
| Layout Type | Sizes Value | Explanation |
|-------------|-------------|-------------|
| Full width | | |
| Container width | | |
| Grid item | | |

**4. Art Direction Strategy**
When to use `<picture>` element:
- Aspect ratio changes
- Crop variations
- Content-aware cropping

**5. Lazy Loading Strategy**
- Above-the-fold: eager loading
- Below-the-fold: lazy loading
- Native lazy loading implementation
- Placeholder strategies (blur, LQIP, solid color)

**6. Performance Optimization**

*Compression Targets:*
| Image Type | Quality Setting | Target File Size |
|------------|-----------------|------------------|

*Loading Priority:*
- fetchpriority usage
- Preload critical images
- Defer non-critical images

**7. Implementation Patterns**

*Hero Image:*
```html
[Code pattern]
```

*Product Grid:*
```html
[Code pattern]
```

*Background Image:*
```css
[Code pattern]
```

**8. CMS/Workflow Integration**
- Upload guidelines for content editors
- Automated processing pipeline
- Naming conventions
- Alt text requirements

**9. CDN Configuration**
- Image transformation parameters
- Cache policies
- On-the-fly optimization settings

**10. Monitoring & Validation**
- LCP tracking
- CLS prevention
- Testing checklist