Picture

<Picture> は <picture> に <source> <img> タグを内包する詳細な最適化画像の配信方法です。PC とスマホで元画像を切り替えるなど Image よりも複雑なアートディレクティブが可能です。

INFO

自動で画像の幅と高さを取得して width height を付与します
リモート画像を渡した場合はダウンロードします
画面幅によって元画像を変更するアートディレクティブが可能
出力画像フォーマット（拡張子）を複数設定してフォールバックできます

import { Image } from "minista"

export default function () {
  return <Picture src="/src/assets/image.png" formats={["webp", "inherit"]} />
}

<picture>
  <source
    srcset="
      /assets/images/image-320x157.webp    320w,
      /assets/images/image-400x196.webp    400w,
      /assets/images/image-640x314.webp    640w,
      /assets/images/image-800x392.webp    800w,
      /assets/images/image-1024x502.webp  1024w,
      /assets/images/image-1280x627.webp  1280w,
      /assets/images/image-1440x706.webp  1440w,
      /assets/images/image-1920x941.webp  1920w,
      /assets/images/image-2208x1080.webp 2208w
    "
    sizes="(min-width: 2208px) 2208px, 100vw"
    width="2208"
    height="1080"
    type="image/webp"
  />
  <img
    srcset="
      /assets/images/image-320x157.png    320w,
      /assets/images/image-400x196.png    400w,
      /assets/images/image-640x314.png    640w,
      /assets/images/image-800x392.png    800w,
      /assets/images/image-1024x502.png  1024w,
      /assets/images/image-1280x627.png  1280w,
      /assets/images/image-1440x706.png  1440w,
      /assets/images/image-1920x941.png  1920w,
      /assets/images/image-2208x1080.png 2208w
    "
    src="/assets/images/image-2208x1080.png"
    sizes="(min-width: 2208px) 2208px, 100vw"
    width="2208"
    height="1080"
    alt=""
    decoding="async"
    loading="lazy"
  />
</picture>

PictureProps

type PictureProps = {
  src: string
  outName?: string
  sizes?: string
  width?: number | string
  height?: number | string
  alt?: string
  decoding?: HTMLImageElement["decoding"]
  loading?: HTMLImageElement["loading"]
  artDirectives?: ArtDirective[]
} & Partial<ImagesOptimize> &
  React.HTMLAttributes<HTMLImageElement>

type ArtDirective = {
  media: string
  src: string
  sizes?: string
  width?: number | string
  height?: number | string
} & Partial<ImagesOptimize>

type ImagesOptimize = {
  formats: ImageFormat[]
} & Omit<ImageOptimize, "format">

import type {
  JpegOptions,
  PngOptions,
  WebpOptions,
  AvifOptions,
  ResizeOptions,
} from "sharp"

type ImageOptimize = {
  layout: "constrained" | "fixed"
  breakpoints:
    | number[]
    | {
        count?: number
        minWidth?: number
        maxWidth?: number
      }
  resolution: number[]
  format: ImageFormat
  formatOptions: {
    jpg?: JpegOptions
    png?: PngOptions
    webp?: WebpOptions
    avif?: AvifOptions
  }
  quality?: number
  aspect?: string
  background?: ResizeOptions["background"]
  fit: ResizeOptions["fit"]
  position: ResizeOptions["position"]
}

type ImageFormat = "inherit" | "jpg" | "png" | "webp" | "avif"