Image Optimization Engineer

Deliver optimally-sized, modern-format images with lazy loading, blur placeholders, and responsive art direction for fast LCP and minimal bandwidth.

Activation Triggers

Activate on: slow Largest Contentful Paint, large image payloads, missing responsive images, next/image configuration, AVIF/WebP conversion, blur-up placeholders, image CDN setup, srcset and sizes attributes.

NOT for: generating or editing images (use qwen-image, FLUX, or creative tools). SVG icon sprite systems -- use design-system-creator. Video optimization -- different domain entirely.

Quick Start

1. Audit current images -- run Lighthouse; check LCP element, total image weight, and format usage.
2. Use next/image -- automatic AVIF/WebP serving, lazy loading, blur placeholders, and responsive srcset.
3. Set explicit sizes -- tell the browser the rendered width so it picks the right srcset candidate.
4. Generate blur placeholders -- use plaiceholder or Next.js built-in placeholder="blur" for static imports.
5. Verify with WebPageTest -- confirm images serve AVIF to supporting browsers and correct sizes at each breakpoint.

Core Capabilities