画像最適化
pluginImage()は画像をリサイズ・形式変換し、表示幅に合わせて選べる画像とsrcsetを生成します。画像のバンドルで配置した写真を、最適化する構成へ変更します。
Table of Contents
プラグインを追加する
import { defineConfig, pluginSsg, pluginImage } from "minista"
export default defineConfig({
plugins: [pluginSsg(), pluginImage()],
})静的HTML出力に必要なpluginSsg()に加え、pluginImage()を追加してください。既存のプラグインも引き続き使用できます。以降の設定例は、そのページで必要な最小構成を示します。
Imageで画像を出力する
Imageへ元画像のパスを渡します。ここでは1200×800ピクセルの写真を使い、WebPへ変換します。
import { Image } from "minista/assets"
export default function Page() {
return (
<>
<h1>My Site</h1>
<Image
src="/src/assets/photo.jpg"
alt="制作スタジオの風景"
format="webp"
breakpoints={[400, 800, 1200]}
/>
</>
)
}srcはプロジェクトルートを基準とするパスです。width heightやsrcsetなどが自動生成され、ブラウザが表示に適した画像を選びます。
入力と出力を確認する
src/
├── assets/
│ └── photo.jpg
└── pages/
└── index.tsxdist/
├── index.html
└── assets/
├── photo-400x267-[hash].webp
├── photo-800x533-[hash].webp
└── photo-1200x800-[hash].webp画像の出力先とハッシュはViteの命名設定に従います。生成される大きさは元画像、表示サイズ、指定した比率などによって変わります。元画像より大きい候補は、そのまま拡大して生成するものではありません。
サイズと比率を調整する
幅が固定の画像にはlayout="fixed"を使います。例えば幅200ピクセルのサムネイルを、通常用と高解像度用に生成できます。
<Image
src="/src/assets/photo.jpg"
alt="制作スタジオ"
layout="fixed"
width={200}
resolutions={[1, 2]}
aspect="1:1"
fit="cover"
/>aspectで比率、fitで収め方、positionで切り抜きの基準を指定できます。全画像に共通する設定はpluginImage({ optimize: { ... } })へ置き、個別のpropsで上書きします。
Pictureで複数形式を用意する
WebPと元の形式を併せて出力する場合はPictureを使います。
import { Picture } from "minista/assets"
<Picture
src="/src/assets/photo.jpg"
alt="制作スタジオの風景"
formats={["webp", "inherit"]}
loading="lazy"
/>sourceとimgを含むpictureが生成されます。画面幅によって元画像も変える場合は、artDirectivesを指定します。
<Picture
src="/src/assets/photo.jpg"
alt="制作スタジオの風景"
formats={["webp", "inherit"]}
artDirectives={[
{ media: "(max-width: 640px)", src: "/src/assets/photo-mobile.jpg" },
]}
/>この例ではphoto-mobile.jpgも用意します。最初に見える主要画像はすぐに読み込み、画面外の画像にはloading="lazy"を使います。
リモート画像とキャッシュ
srcにはHTTPSの画像URLも指定できます。開発・ビルド時にダウンロードして最適化するため、公開サイトから元URLへ画像を取りに行く構成にはなりません。
既定では同じURLの画像をキャッシュ削除まで再取得しません。URLを変えずに更新する画像には、有効期間をミリ秒で指定できます。
pluginImage({ remoteCache: { maxAge: 60 * 60 * 1000 } })出力画像にはEXIF・XMP・IPTCなどのメタデータやICCプロファイルを保持しません。EXIF Orientationによる向き補正は行います。
すべての設定値とコンポーネントのpropsはpluginImageに記録しています。
次はSVG最適化で、SVGをHTMLへ展開します。