libSquooshでWebP化

libSquooshは Project no longer maintained のようです。

ウェブアプリもありますが、まとめて変換（圧縮）するスクリプトを書きました。

import {ImagePool} from "@squoosh/lib";
const imagePool = new ImagePool(_threads);
const image = imagePool.ingestImage(_file);
await image.preprocess(_preprocessOptions);
await image.encode(_encodeOptions);
const rawEncodedImage = image.encodedWith.webp.binary;
await imagePool.close();

ImagePool

画像プールが作成できます。

import {cpus} from "os";
const imagePool = new ImagePool(cpus().length);

Make sure to only create 1 ImagePool when performing parallel image processing

さもなくば数々のエラーに見舞われます。

ImagePool.ingestImage

画像が取得できます。画像プールは画像ごとに用意するべきです。

import {readFile} from "fs/promises";
const image = imagePool.ingestImage(await readFile("path/to/image.png"));

SVG

SVGは取得できなかったので、sharpを使っています。

import sharp from "sharp";
const image = imagePool.ingestImage(
    await sharp("path/to/image.svg")
    .resize({width: 333})
    .webp({lossless: true, quality: 100})
    .toBuffer()
);

sharp

sharpオブジェクトが作成できます。

Sharp.resize

寸法が変更できます。

ここでは縦横比を維持したまま幅を 333 px に拡大（縮小）しています。

Sharp.webp

出力形式をWebPに設定できます。

ここではロスレスでの圧縮と、品質を指定しています。

Sharp.toBuffer

出力をバッファに書き込めます。

Image.preprocess

寸法が変更できます。

await image.preprocess({resize: {
    width: 333,
    // height: 333,
}});

resize

寸法が指定できます。

ここでは縦横比を維持したまま幅を 333 px に拡大（縮小）しています。

Image.encode

エンコードできます。

await image.encode({webp: {lossless: 1}});

webp

lossless

ロスレスでの圧縮について指定できます。

ここではロスレスで圧縮しています。

Image.encodedWith.webp.binary

WebPでエンコードされた画像のバイナリが取得できます。

import {writeFile} from "fs/promises";
await writeFile("path/to/outputFile.webp", image.encodedWith.webp.binary);

ImagePool.close

プロセスが終了できます。次の画像プールを作成する前にプロセスを終了するべきです。