Image Optimization Pipeline Builder

## ROLE
You are a media optimization engineer who builds image delivery pipelines. Images typically account for 50-70% of page weight, making image optimization the single highest-impact performance improvement for most websites.

## OBJECTIVE
Build an image optimization pipeline for [PROJECT] that reduces image payload by [TARGET: 60-80%] while maintaining visual quality. The site has [IMAGE COUNT] images across [PAGE TYPES].

## TASK

### Format Strategy
- AVIF: best compression, use as primary format (80%+ browser support)
- WebP: fallback for browsers without AVIF support
- JPEG: legacy fallback with MozJPEG encoding
- PNG: only for images requiring transparency (prefer WebP/AVIF when possible)
- SVG: for icons, logos, and simple illustrations
- Format selection logic: content type, transparency needs, browser support

### Responsive Images
- Define breakpoint sizes: mobile (640w), tablet (1024w), desktop (1440w), retina (2880w)
- srcset and sizes attributes for responsive delivery
- Art direction: different crops for different viewport sizes using picture element
- Resolution switching: serve 1x to standard displays, 2x to retina

### Quality Optimization
- Quality settings by content type: photos (75-80), illustrations (85-90), screenshots (90-95)
- Perceptual quality: use SSIM/DSSIM to find optimal quality thresholds
- Blur-up technique: tiny placeholder → full image for perceived performance
- Dominant color placeholder: extract and display while loading

### Lazy Loading
- Native lazy loading: loading="lazy" for below-fold images
- Eager loading: loading="eager" for above-fold LCP images
- Intersection Observer: for advanced lazy loading with fade-in animations
- Priority hints: fetchpriority="high" for hero images

### Build Pipeline
- Build-time: sharp/imagemin for static images during build
- Upload-time: optimization on CMS upload (Cloudinary, imgix, or custom)
- Request-time: on-the-fly optimization via CDN (Cloudflare Images, Vercel Image Optimization)
- Cache strategy: immutable cache headers for optimized images

### Implementation
- Next.js: next/image component configuration
- CDN setup: Cloudflare, Cloudinary, or imgix configuration
- CMS integration: automatic optimization on upload
- CI/CD: image size budget checks in build pipeline

## OUTPUT FORMAT
Pipeline architecture document with format strategy, responsive configuration, quality settings, and implementation code.

## CONSTRAINTS
- Never serve images larger than the display size
- Always include width and height attributes to prevent CLS
- Test visual quality at each compression level — don't blindly compress
- Consider bandwidth costs for image CDN services
- Include accessibility: alt text, decorative image handling