What problem does it solve? Serving the same image to all devices wastes bandwidth and breaks layouts when mobile and desktop need completely different crops, compositions, or assets. This Skill guides you through implementing true art direction in Next.js so each viewport receives the correct image. ## Core Features & Use Cases - Art Direction with getImageProps(): Generate separate srcSet values for desktop, tablet, and mobile images and combine them with <picture> and <source> media queries. - Breakpoint Strategy Guidance: Learn correct source ordering (first match wins), shared alt/sizes props, and how to avoid pitfalls like preload, loading="eager", and unsupported placeholder props. - CSS Background Images: Convert srcSet output into image-set() for optimized responsive background images. - Use Case: A homepage hero carousel needs a wide landscape banner on desktop and a portrait crop on mobile. Use this Skill to build a picture element that serves each asset only to matching viewports while keeping LCP fast with fetchPriority="high". ## Quick Start Implement art direction for my Next.js hero section with different desktop and mobile images using getImageProps.
