Image

ビルトインコンポーネントの <Image> で画像の最適化ができます。<img> タグに srcset 属性のみで最適化画像を配信する設計で、Picture よりも機能は少ないですがシンプルなタグが出力されます。

INFO

自動で画像の幅と高さを取得して width height を付与します
リモート画像を渡した場合はダウンロードします
元にする画像は 1 枚のみ（アートディレクティブなし）
出力画像フォーマット（拡張子）は 1 種類のみ

import { Image } from "minista"

export default function () {
  return <Image src="/src/assets/image.png" />
}

<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"
/>

ImageProps

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

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"