# [libSquoosh] で [WebP] 化 [libSquoosh]: https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh [WebP]: https://developers.google.com/speed/webp [libSquoosh] は [**Project no longer maintained**](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#project-no-longer-maintained) のようです。 --- [ウェブアプリ](https://squoosh.app)もありますが、まとめて変換(圧縮)するスクリプトを書きました。 ```js 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`][ImagePool] [ImagePool]: https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#installation 画像プールが作成できます。 ```js import {cpus} from "os"; const imagePool = new ImagePool(cpus().length); ``` ### [**Make sure to only create 1 `ImagePool` when performing parallel image processing**][ImagePool] さもなくば数々のエラーに見舞われます。 ## [`ImagePool.ingestImage`](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#ingesting-images) 画像が取得できます。[**画像プールは画像ごとに用意するべきです。**][ImagePool] ```js import {readFile} from "fs/promises"; const image = imagePool.ingestImage(await readFile("path/to/image.png")); ``` ### [SVG](https://www.w3.org/Graphics/SVG) SVG は取得できなかったので、[sharp](https://sharp.pixelplumbing.com) を使っています。 ```js import sharp from "sharp"; const image = imagePool.ingestImage( await sharp("path/to/image.svg") .resize({width: 333}) .webp({lossless: true, quality: 100}) .toBuffer() ); ``` #### [`sharp`](https://sharp.pixelplumbing.com/api-constructor#sharp) `sharp` オブジェクトが作成できます。 #### [`Sharp.resize`](https://sharp.pixelplumbing.com/api-resize#resize) 寸法が変更できます。 ここでは縦横比を維持したまま幅を 333 px に拡大(縮小)しています。 #### [`Sharp.webp`](https://sharp.pixelplumbing.com/api-output#webp) 出力形式を [WebP] に設定できます。 ここではロスレスでの圧縮と、品質を指定しています。 #### [`Sharp.toBuffer`](https://sharp.pixelplumbing.com/api-output#tobuffer) 出力をバッファに書き込めます。 ## [`Image.preprocess`](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#preprocessing-and-encoding-images) 寸法が変更できます。 ```js await image.preprocess({resize: { width: 333, // height: 333, }}); ``` ### `resize` 寸法が指定できます。 ここでは縦横比を維持したまま幅を 333 px に拡大(縮小)しています。 ## [`Image.encode`](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#preprocessing-and-encoding-images) エンコードできます。 ```js await image.encode({webp: {lossless: 1}}); ``` ### [`webp`](https://github.com/GoogleChromeLabs/squoosh/blob/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh/src/codecs.ts#L331) #### `lossless` ロスレスでの圧縮について指定できます。 ここではロスレスで圧縮しています。 ## [`Image.encodedWith.webp.binary`](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#writing-encoded-images-to-the-file-system) [WebP] でエンコードされた画像のバイナリが取得できます。 ```js import {writeFile} from "fs/promises"; await writeFile("path/to/outputFile.webp", image.encodedWith.webp.binary); ``` ## [`ImagePool.close`](https://github.com/GoogleChromeLabs/squoosh/tree/918c596cba36a46ff3d7aa8ffd69580bd22528e2/libsquoosh#closing-the-imagepool) プロセスが終了できます。[**次の画像プールを作成する前にプロセスを終了するべきです。**][ImagePool]