imagemin-webpでWebPを生成する

imagemin-webpを使って画像のWebPへの変換処理を試してみます。

設定方法

まずはpackage.jsonを用意して、必要なパッケージをインストールします。

npm install imagemin imagemin-webp --save-dev

ただ最初はNode.js のバージョン12系で試していたのですが、imagemin-webpのインストール時に以下のようなエラーが出てインストールできませんでした。

npm WARN ws@8.2.3 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@8.2.3 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.

最終的にNode.js のバージョンを16系にするか、以下のようにimagemin-webpのバージョンを7.0.0から1つ前で固定することでインストールできました。

npm install imagemin-webp@6.0.0 --save-dev

プロジェクトルートにwebp.mjsを作成して、内容を以下のようにします。

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

(async () => {
	await imagemin(['images/*.{jpg,png}'], {
		destination: 'build/images',
		plugins: [
			imageminWebp({quality: 50})
		]
	});
})();

今回の例ではimagesディレクトリ直下にあるjpgとpngファイルをwebpに変換して、build/imagesディレクトリに生成されます。
下記コマンドを実行します。

node webp.mjs

build/images ディレクトリ が生成され、その中にwebpに変換された画像が入っていればOKです。