2026/02/14 雑記

libwebpを使って複数の画像からアニメーションWebPを作る

複数の画像からアニメーションWebPを作る方法は色々あるけど、libwebpがあるなら同梱されているimg2webpが便利かもしれない。

ドット絵から軽量で高画質なアニメーション素材を作るのにはいい感じのツールだったので、ざっくりしたやり方を備忘録として残しておく。

なお、環境はWindows11、手元のlibwebpはバージョン1.4.0だった。

やりかた

アニメーションのコマ（フレーム）として使うpng画像frm1～3.pngがあり、animation.webpとして出力したいとする。

その場合、Windowsなら、コマンドラインでこのように呼び出せば良い。

img2webp.exe -d 250 frm1.png frm2.png frm3.png -o animation.webp

以下、コマンドの詳細や注意点など。

-dオプションでフレームの表示時間をミリ秒で指定する。上記の例の場合、1フレームは250ミリ秒となる。

なお、フレームごとに表示時間を変えることもできる。 -dオプションを各フレーム画像の直前に指定すれば良い。

img2webp.exe -d 250 frm1.png -d 50 frm2.png -d 150 frm3.png -o animation.webp

途中で指定を省略した場合は、最後に指定した-dオプションの値を引き継ぐ。

ちなみに、出力ファイルのサイズだが、表示時間の影響は受けないらしく、あくまで使用する画像（や品質オプション）に左右されるようだ。上記の例で、すべて1000ミリ秒に伸ばしてみたけど、サイズは全く変わらなかった。

フレームに使う画像のファイル名を羅列するだけで良い。指定した順に再生される。

対応しているファイル形式だが、試した限り、.png .jpg .bmpと幅広かった。他にも使える形式はあるかもしれない。複数形式を混ぜて指定しても問題ない。

ただ残念なことに、frm*.pngのようなワイルドカードは使えなかった。連番ファイルを一括取り込みしてくれたら便利だったなあ。

また、画像の幅と高さはそろえる必要があるようで、1フレーム目と異なるサイズの画像を混ぜたところ"Frame #N dimension mismatched!"というエラーになってしまった。

デフォルトでは可逆圧縮になる。不可逆圧縮にしたいなら-lossyオプションを付与する。

-lossless/-lossyも-dオプションのようにフレームごとに指定できるらしい。

ドット絵をもとに簡単なアニメーションを作るなら-lossless（つまりデフォルト）で問題ないと思う。

-loop Nでループ数を指定する。0なら無限ループ。デフォルトは0のようだ。

基本的にこういうアニメーション素材は無限ループが前提だと思うので、特に考えなくてもいいコマンドだろう。

-oオプションで出力するファイル名を指定する。拡張子は.webpとすること。

省略したら1フレーム目のファイル名を勝手に使ってくれないかなあとか思ったけど、ダメだった。エラーにはならないが、何も出力されない。指定は必須。

以下、日記コーナー。

こないだ、ブログ用にアニメーション画像が必要になり、作成方法を考えていたのが事の発端だった。

ドット絵で描かれた複数の画像をアニメーションに変換したかったんだけど、gifはサイズや画質的にしんどいし、動画はちょっとしたアニメーションには違うわよねえ… って感じで悩んでいた。

ここで、WebPはアニメーションに対応していることを思い出し、libwebpもちょうどPCに入っていたので、それを軸に調べまわっていたら今回の方法を見つけたわけだ。

軽くて高画質なのはもちろんだが、一番のお気に入りは、フレームごとに表示時間を変えられるところ。プリティー。

「軽量アニメーション素材作りたいけど、変換サイトとかは敬遠してる… でもlibwebpは持ってる！」というニッチな状況にある方は、img2webp、いかがだろうか。WebP開発元のGoogle公式ライブラリだよ。

他にもオプションは色々あるので、その辺りは公式サイトを参照してほしい。

libwebp自体は、zipをダウンロードして好きなとこに展開すればいいと思う。