nextjs-image-art-direction_skill

Overview

This skill implements art direction for Next.js images using getImageProps(). It shows entirely different image assets or crops per breakpoint rather than just scaling one file. Use it to deliver the right composition and optimized asset for each viewport while preserving accessibility and browser-native selection.

How this skill works

getImageProps() generates the srcSet and image props for each version without triggering React state, so you can build a <picture> with multiple <source> elements. Create one getImageProps() call per breakpoint (desktop, tablet, mobile), share common props like alt and sizes, then render <source media=... srcSet=.../> entries and a final <img> fallback. Avoid preload/loading="eager" and placeholder with this approach.

When to use it

• Homepage carousels that require distinct mobile and desktop assets
• Switching from landscape composition on desktop to portrait on mobile
• Different focal points or crops per breakpoint
• When mobile and desktop images are entirely different files
• When content hierarchy or visual emphasis changes between viewports

Best practices

• Share alt and sizes across all versions so accessibility and layout hints remain consistent
• Order <source> elements so the browser evaluates the intended breakpoint first (desktop-first or mobile-first depending on strategy)
• Use fetchPriority='high' for the LCP image instead of preload or loading='eager'
• Test on real devices and in devtools responsive mode to verify each breakpoint loads the correct asset
• Ensure every defined breakpoint has a valid image to avoid broken fallbacks

Example use cases

• Hero section: wide office scene on desktop, focused team shot on tablet, portrait subject on mobile
• Homepage carousel: high-res banner for desktop, square crop for mobile slides
• Product photography: full product shot on desktop, cropped detail on mobile
• Background images via CSS image-set() built from getImageProps() srcSet for responsive backgrounds