vite-plugin-image-oretimaizer

vite-plugin-image-oretimaizer は、ビルド時にsharp を利用して画像アセットを最適化する俺流の Vite 用プラグイン。

特徴

画像アセットを圧縮し、.jpg/.jpegと.png形式の画像は、.webp や.avif ファイルも生成します。

サポートするファイル形式

.jpg/.jpeg
.png
.gif
.webp
.avif

インストール

■ npm の場合

  npm i @hilosiva/vite-plugin-image-oretimaizer -D

■ yarn の場合

  yarn add @hilosiva/vite-plugin-image-oretimaizer -D

■ pnpm の場合

  pnpm i @hilosiva/vite-plugin-image-oretimaizer -D

警告

vite-plugin-image-oretimaizer は内部でsharp を利用しています。自動でインストールはされませんので、予めご自身で開発依存関係として追加して下さい。
npm i sharp -D

使用方法

「vite.config.js」でインポートし、プラグインに追加してください。

import { defineConfig } from "vite";
import { ViteImageOretimaizer } from "@hilosiva/vite-plugin-image-oretimaizer"; // 追加

export default defineConfig({
  plugins: [
    // 追加
    ViteImageOretimaizer({
      /* オプション */
    }),
  ],
});

下記のコマンドでビルドを行うことで圧縮が実行されます。

npm run build

注意

vite-plugin-image-oretimaizer は「public」フォルダ内の静的アセットには実行されません。

また、Vite は、build.assetsInlineLimitの設定値より小さなサイズ（デフォルト：4KB）の画像は base64 URL としてインライン化されるため、この設定値より大きなサイズの画像にのみ vite-plugin-image-oretimaizer が実行されます。

インライン化を無効にするには、、build.assetsInlineLimitの設定値を「0」にして下さい。

「vite.config.js」
export default defineConfig({
 plugins: [
   ViteImageOretimaizer({
     /* オプション */
   }),
 ],

 ...

 build: {
   assetsInlineLimit: 0, // base64 URL としてのインライン化を無効
 },
});

オプション

`supportedExts`

タイプ： Array
デフォルト： [".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif"]

サポートする画像ファイルの形式。

これらの画像形式の画像が圧縮の対象となります。

`generate.inputExts`

タイプ： Array
デフォルト： [".jpg", ".jpeg", ".png"]

generate.outputExts に指定した形式の画像を生成する対象となる画像形式。

`generate.outputExts`

タイプ： Array
デフォルト： [".webp", ".avif"]

新たに生成する画像形式。

`generate.preserveExt`

タイプ： Bool
デフォルト： false

自動生成する際、元の拡張子を保持するかどうか

trueにすると、元の拡張子を保持し、後ろに新しい拡張子を追加します。例： sample.jpg.webp

falseにすると、元の拡張子を新しい拡張子に置き換えます。例： sample.webp

`jpg`

タイプ： Object
デフォルト： sharp の「jpeg」オプションのデフォルト値

.jpg の圧縮設定。

sharp の「jpeg」オプションと同じ設定が使えます。

`jpeg`

タイプ： Object
デフォルト： sharp の「jpeg」オプションのデフォルト値

.jpeg の圧縮設定。

sharp の「jpeg」オプションと同じ設定が使えます。

`png`

タイプ： Object
デフォルト： sharp の「png」オプションのデフォルト値

.png の圧縮設定。

sharp の「png」オプションと同じ設定が使えます。

`.gif`

タイプ： Object
デフォルト： sharp の「gif」オプションのデフォルト値

.gif の圧縮設定。

sharp の「gif」オプションと同じ設定が使えます。

`webp`

タイプ： Object
デフォルト： sharp の「webp」オプションのデフォルト値

.webp の圧縮設定。

sharp の「webp」オプションと同じ設定が使えます。

`avif`

タイプ： Object
デフォルト： sharp の「avif」オプションのデフォルト値

.avif の圧縮設定。

sharp の「avif」オプションと同じ設定が使えます。

例：vite.config.js

import { defineConfig } from "vite";
import { ViteImageOretimaizer } from "@hilosiva/vite-plugin-image-oretimaizer";

export default defineConfig({
  plugins: [
    ViteImageOretimaizer({
      generate: {
        preserveExt: true,
      },
      jpg: {
        quality: 70,
        mozjpeg: true,
      },
      jpeg: {
        quality: 70,
        mozjpeg: true,
      },
      png: {
        quality: 70,
      },
      webp: {
        quality: 50,
        lossless: true,
      },
      avif: {
        lossless: true,
      },
    }),
  ],
  build: {
    assetsInlineLimit: 0,
  },
});