🔥

libSquooshでWebP化

2022/07/15に公開

JavaScript

tech

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`

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

resize

lossless

Discussion

`resize`

`lossless`