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"