Webp変換 with AVIF

WebP画像を作るたびにいちいちPhotoshopを立ち上げるのが面倒なのでChatGPTに相談しながら変換ツールを作成しました。
WebpだけでなくAVIFにも対応して、ブラウザ上で変換し、複数ファイルはzipファイルにまとめてダウンロードもできます。
https://tools.uda2.com/webpconv.html

大抵のブラウザでWebpの表示はできるようになったが流石に生成は無理だろうからPythonでもいいから作ってくれないかと思ってChatGPTに聞いたらさくっとブラウザで動作するものを作ってくれた。昨今のブラウザは表示はもちろんで作成もできるるらしい。
そこから、見た目を他のツールと統一感を持たせて、操作感をいい感じに整えるのに半日ほどかけて調整。AIのおかげで個人的に使う分にはすぐに作成できるけど、公開するレベルのものとなるといまだ時間はかかってしまう。

そんな中、ChatGPTが「AVIF形式にも対応できますよ」と提案してきたので試してみた。けれど、いざ実行するとPNGに変換されたり、拡張子だけAVIFに変えて実体はPNGのままだったりと、おかしな挙動が出てきた。修正を頼んでもうまくいかず、Geminiにも相談してみた。

Geminiの方は「canvas.toBlob(…, ‘image/avif’)」によるAVIF出力の対応状況を尋ねても、「Safari以外の主要ブラウザではサポートされています」と返ってくる。けれど、実際にはうまく動かない。出力対応と表示対応を混同していたり、ソースを出しても「表示」対応の話ばかり。Geminiとは1時間近くやり取りしてもハレーションがひどくなる一方で埒が開かない。

結局もう一度ChatGPTに戻って聞き直してみたところ、「現時点では、主要ブラウザはAVIFの表示には対応しているが、canvas.toBlob(…, ‘image/avif’)による出力には未対応」との結論に。真偽は不明だけど、自分の環境でも正常に出力できなかったので「現時点でAVIFの出力に対応したブラウザは無い」という事にした。

代替手段としてChatGPTが提示してきたのが、avif.js（@jsquash/avif）というライブラリ。これはGoogle製のAVIFエンコーダー「libavif」をWebAssembly（WASM）化したもので、クライアントサイドだけでAVIF変換を行うことが可能らしい。

ただし、これも一筋縄ではいかない。最初に提案されたCDNバージョンはすでに開発が終了していたようで見つからず、現行のNPMパッケージの方にはCDN版が用意されていない。ChatGPTがjsDelivrにある古いバージョンを勧めてきたが、CORS（クロスオリジン）の制限や外部依存が気になり、最終的に自分のサーバーにインストールすることに。

ところが、パッケージはNode.js用のモジュール形式（CommonJS/ESM）で、そのままではブラウザでは動かせない。ChatGPTの指示に従ってビルド済みのJS（avif.min.js）を生成したが、WASMファイル（avif_enc.wasm）は自動で出力されなかった。インストールフォルダ内にあったWASMを手動でコピーしたところ、なんとか動作するようになった。

とはいえWASMはネイティブアプリではないため、AVIFへの変換処理は正直言って遅い。それでも、クライアントだけでAVIFを生成できる手段としては現状これが一番実用的かもしれない。

Tags: AVIF, JavaScript, WEBP