読者です 読者をやめる 読者になる 読者になる

まだ中学生のブログ

スマホ関連、Google関連のことを書いてます。IT系勤務、既婚、精神年齢:中学生。

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

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」

x、y、m、bは省略可能だが、省略したパラメータ以降のパラメータ全てを省略すること。
→yを省略するならmもbも省略すること。

オプションについて公式サイトはココ

結果の確認

出力されたWebPファイルはGoogle Chromeで再生できる。

ダブルクリックでChromeが開かない場合はChromeへDrag & Dropすると開ける。


以上。