wasm-vipsを使ってみる

画像変換ライブラリであるlibvipsを、WebAssemblyにしたライブラリ。

npm i wasm-vips

Node.jsで画像変換するサンプルコード

例えば、PNGをJPEGに変換するコードです。

import Vips from 'wasm-vips';

Vips().then((vips) => {
    const image = vips.Image.newFromFile('sample.png');
    image.jpegsave('sample.jpg');
}).catch(console.error);

Sharpとの違い

同じく画像変換ライブラリであるSharpは、libvipsのコードをNode.jsのネイティブアドオンとして読み込んでいます。
そのため、Node.js以外で使う事ができません。
一方でwasm-vipsは、ブラウザ上ですら画像変換が出来るポテンシャルを秘めています。

Node.js（v22）上で速度比較

Windows 11のWSL2（Ubuntu 22）上で、適当な4K画像をWebPとAVIFに変換してみました。

Format	Tool	Time (ms)
webp	wasm-vips	4567
webp	sharp	871
avif	wasm-vips	58099
avif	sharp	4148

ちなみにJPEG XLに変換した際は以下の通りでした。
（Sharpは上手くいかず･･･）

Format	Tool	Time (ms)
jxl	wasm-vips	7760

結果

Sharpの方が5倍ほど速く変換が出来ました。
WebAssemblyによる速度低下は、まだまだ影響が大きそうです。

結果

wasm-vipsをElectronで採用しようかなと思いましたが、特にAVIFのエンコード速度に関してはまだ実用的ではないかなと思いました。
今後の改善に期待です。