Art direction

Picture

Picture wraps source elements and the same fade/placeholder behavior around a fallback image.

Modern formats

Use sources for AVIF/WebP or media-specific art direction.

tsx

<Picture
  src="/images/home/feature1.jpg"
  alt="Wide landscape"
  width={1200}
  height={800}
  placeholder="blur"
  fadeType="soft-reveal"
  sources={[
    { srcSet: '/images/home/feature2.jpg?wide=1', media: '(min-width: 900px)' },
    { srcSet: '/images/home/feature1.jpg', type: 'image/webp' }
  ]}
/>

Try the full demo

Open the focused Picture stack playground for the wider controls and live output.

Picture stack

See Picture render format fallbacks with the same fade treatment.