What problem does it solve? Renovation websites built with static Next.js export lose Next.js automatic image optimization, so images must be manually converted, resized, and correctly implemented to stay fast, on-brand, and accessible. ## Core Features & Use Cases - Image Sourcing & Art Direction: A sourcing hierarchy from real project photos to licensed stock, with explicit on-brand and off-brand rules for renovation photography. - WebP Optimization Workflow: Ready-to-run cwebp and ImageMagick commands for resizing and batch-converting images into /public/ with per-use-case dimension and file-size specs. - Component Implementation & Alt Text: next/image and <img> patterns with unoptimized, priority, and sizes props, plus a formula for WCAG-compliant alt text. - Use Case: You need a hero image for a renovation landing page. The Skill guides you to source a 2400x1600 photo, convert it to WebP under 400 KB, implement it with fill, priority, and unoptimized, and write descriptive alt text. ## Quick Start Ask the agent to choose, optimize, and implement a hero image for the renovation homepage using next/image with static export settings.
