WindowsでアニメーションWebPを作成する

はじめに

Googleが定めた画像フォーマット「WebP」のアニメーション版をWindowsで作成する方法のメモ。

コマンドの使い方自体はMacでもLinuxでも同じはず。

公式ライブラリのダウンロード

下記の記事にまとめてある。

madachugakusei.hatenablog.com

ライブラリ

解凍したらbinフォルダの中に必要な実行ファイルが入っている。

アニメーションWebPを作成するファイルは「webpmux.exe」

変換してみる

binフォルダの中に変換したい画像を入れる。

Shiftキー押しながら右クリック→「コマンドウィンドウをここで開く」でコマンドプロンプトを立ち上げて、次のように使う。

使い方

$ webpmux.exe -frame FRAME_OPTIONS [ -frame ... ] [ -loop LOOP_COUNT ] [ -bgcolor BACKGROUND_COLOR ] -o OUTPUT

例

$ webpmux.exe -frame 1.webp +500+0+0+0+b -frame 2.webp +500+256+0+0+b -frame 3.webp +500+0+256+0+b -loop 0 -bgcolor 255,255,255,255 -o anim_container.webp

frameパラメータ

-frameパラメータでアニメーションの1コマとなる画像を指定する。画像フォーマットはアニメーションでないWebP画像とする。

2枚の画像をアニメーションする場合は、-frameを2つ指定する。上記例の場合は3枚の画像をアニメーションさせている。

FRAME_OPTIONS

FRAME_OPTIONSは少々ややこしい。

フォーマットとしては、

+x+y+m+b

x
- 指定した画像をx軸方向へオフセットするピクセル(左右の方向で右がプラス)
- +100+0+0+b → 右に100ピクセルオフセットする
- デフォルトは0
y
- 指定した画像をx軸方向へオフセットするピクセル(上下の方向で下がプラス)
- +0+100+0+b → 下に100ピクセルオフセットする
- デフォルトは0
m
- 指定した画像をどう破棄するか
  - 0: そのまま残す
  - 1: 破棄する
- 例1) +0+0+0+b → この画像を残したまま次の画像を表示する
- 例2) +0+0+1+b → この画像を破棄して次の画像を表示する
- 0の"そのまま残す"を指定しても、次に表示する画像が透過画像でないと意味がないので注意。
- デフォルトは0
b
- 指定した画像をブレンドするか(私が理解できていない、挙動がよくわからなかった)
  - +b: ブレンドする
  - -b: ブレンドしない
- 例1) +0+0+0+b → この画像をブレンドする
- 例2) +0+0+0-b → この画像をブレンドしない
- デフォルトは「+b」