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/my-opencode-config
progressive-disclosure
Reduce complexity by revealing information progressively. Use when designing
56social-proof-psychology
Leverage social proof principles to build trust and influence user behavior.
39react-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.
38trust-psychology
Build trust signals that reduce perceived risk and enable user action. Use
37five-whys
Conduct root cause analysis using the Five Whys technique. Use when
34cognitive-fluency-psychology
Apply cognitive fluency principles to improve clarity, trust, and conversion.
32