Picture

pnpx @frend-digital/cli add Picture

Anatomy

import { Picture } from "@/components/ui/Picture";

export default function PicturePreview() {
  return (
    <>
      {/* NORMAL */}
      <Picture
        src="https://unsplash.it/400/300"
        sizes="100vw"
        alt="Picture"
        width={400}
        height={300}
      />

      {/* ART DIRECTION - Desktop first via maxWidth */}

      <Picture
        media={{
          "(max-width: 1023px)": "https://unsplash.it/600/400",
        }}
        src="https://unsplash.it/1200/600"
        sizes="100vw"
        alt="Picture"
        width={400}
        height={300}
      />

      {/* ART DIRECTION - Mobile first - only from media */}
      <Picture
        media={{
          "(max-width: 1023px)": "https://unsplash.it/600/400",
          "(min-width: 1024px)": "https://unsplash.it/1200/600",
        }}
        sizes="100vw"
        alt="Picture"
        width={400}
        height={300}
      />

      {/* ART DIRECTION - Mobile first - only from media */}
      <Picture
        media={{
          "(min-width: 1024px)": "https://unsplash.it/1200/600",
        }}
        src="https://unsplash.it/600/400"
        sizes="100vw"
        alt="Picture"
        width={400}
        height={300}
      />

      {/* ART DIRECTION - Mobile first - landscape devices should load custom image */}
      <Picture
        media={{
          "(orientation: landscape)": "https://unsplash.it/1200/600",
        }}
        src="https://unsplash.it/600/400"
        sizes="100vw"
        alt="Picture"
        width={400}
        height={300}
      />
    </>
  );
}