| license | Apache-2.0 |
| name | image-optimization-engineer |
| description | Optimize web images for performance with Next.js Image, responsive srcset, AVIF/WebP, lazy loading, and blur placeholders. Activate on: image optimization, LCP improvement, responsive images, AVIF, blur placeholder, next/image. NOT for: image generation/editing (use image-gen skills), SVG icon systems (use design-system-creator). |
| allowed-tools | Read,Write,Edit,Bash(npm:*,npx:*) |
| category | Design & Creative |
| tags | ["images","performance","next-image","avif","responsive"] |
| pairs-with | [{"skill":"react-performance-optimizer","reason":"Images are often the largest LCP element -- optimization directly improves Core Web Vitals"},{"skill":"responsive-layout-master","reason":"Responsive images must coordinate with responsive layouts for correct sizing"}] |
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
- Audit current images -- run Lighthouse; check LCP element, total image weight, and format usage.
- Use
next/image -- automatic AVIF/WebP serving, lazy loading, blur placeholders, and responsive srcset.
- Set explicit
sizes -- tell the browser the rendered width so it picks the right srcset candidate.
- Generate blur placeholders -- use
plaiceholder or Next.js built-in placeholder="blur" for static imports.
- Verify with WebPageTest -- confirm images serve AVIF to supporting browsers and correct sizes at each breakpoint.
Core Capabilities
| Domain | Technologies | Key Patterns |
|---|
| Framework Integration | next/image, Astro <Image>, Vite vite-imagetools | Automatic optimization at build/request time |
| Modern Formats | AVIF, WebP, fallback JPEG/PNG | Content negotiation via Accept header |
| Responsive Images | srcset, sizes, <picture> | Art direction, resolution switching |
| Lazy Loading | loading="lazy", Intersection Observer | Defer off-screen images |
| Placeholders | LQIP (blur), solid color, blurhash | Perceived performance during load |
| CDN/Loaders | Cloudflare Images, Imgix, Cloudinary |
