nextjs-image-art-direction
Next.js Image: Art Direction
Art direction means showing completely different images based on viewport size — not just resizing the same image. Common use cases include homepage carousels with different assets for mobile vs desktop, switching from landscape (desktop) to portrait (mobile), or showing cropped vs full compositions.
Art Direction vs Responsive Images
| Approach | Purpose | Implementation |
|---|---|---|
| Art Direction | Different image content/composition | <picture> with multiple <source> elements |
| Responsive Images | Same image, different sizes | sizes prop with srcset |
Use Art Direction When:
- Homepage carousels with different images for mobile and desktop (e.g., square images on mobile, wide banner on desktop)
- Mobile shows portrait crop, desktop shows landscape
- Different focal points for different screen sizes
- Completely different compositions are needed
- Content hierarchy changes between breakpoints
- Different image assets optimized for each viewport (e.g., mobile-optimized JPEGs vs desktop quality)
More from flpbalada/fb-skills
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
10discuss-task
Clarify ambiguous tasks before action. Use when goal, scope, success criteria, constraints, or risks are unclear.
7react-useeffect-avoid
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.
6discuss-code
Critically discuss code issues with compact findings. Use when code needs review for logic, simplicity, structure, naming, or maintainability.
6react-key-prop
Guides proper usage of the key prop in React lists. Use this skill when rendering lists, mapping arrays to components, or troubleshooting list-related state bugs.
5cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
5