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,
  },
});