nextjs-image-art-direction

Next.js Image Art Direction

Use art direction when viewport size needs different image content or crop.

Goal

Render one correct image per viewport. Keep Next.js image optimization. Avoid loading unused images.

Rules

• Use <picture> with <source> and final <img>.
• Use getImageProps() for each asset.
• Share alt and sizes.
• Make alt accurate for all variants.
• Order sources so first matching media query wins.
• Do not use preload or loading="eager".
• Use fetchPriority="high" for LCP image when needed.
• Do not use placeholder with getImageProps().

Pattern

import { getImageProps } from 'next/image'

export function HeroImage() {
  const common = { alt: 'Mountain landscape', sizes: '100vw' }
  const { props: { srcSet: desktop } } = getImageProps({
    ...common,
    src: '/hero-desktop.jpg',
    width: 1440,
    height: 875,
  })
  const { props: { srcSet: mobile, ...rest } } = getImageProps({
    ...common,
    src: '/hero-mobile.jpg',
    width: 750,
    height: 1334,
  })

  return (
    <picture>
      <source media="(min-width: 768px)" srcSet={desktop} />
      <img {...rest} style={{ width: '100%', height: 'auto' }} />
    </picture>
  )
}

Flow

1. Confirm content changes, not only size.
2. Pick assets per breakpoint.
3. Define common props.
4. Generate srcSet per asset.
5. Put <source> before fallback <img>.
6. Test desktop, tablet, and mobile.
7. Confirm only matching image loads.

References

• Next.js Image Component Docs - Art Direction
• MDN - Responsive Images: Art Direction
• Next.js getImageProps() API

Output

## Art Direction Plan

Use case: [why different images are needed]
Breakpoints:
- [media query]: [asset], [width]x[height]
- fallback: [asset], [width]x[height]

Common props:
- alt: [text]
- sizes: [value]
- priority: [fetchPriority if LCP]