# [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]