動画ファイルを用いるほどではないけど動きのあるものを表現したいとき、多分ありますよね。私はあまりありませんが前回の記事で「妛」の入力方法を説明した時はその気持ちになりました。
そうした場合選択肢としてアニメーションGIFが上がるかと思います。しかしながらGIF規格はとても古いもので、現代ではより良い圧縮アルゴリズムを採用した画像フォーマットを用いることが出来ます。みんな大好きFFmpegでこのアニメーションWebPを生成することが出来るとのことなので作ってみました。というわけでどのように生成したのかを簡単に説明しておこうと思います。
結論
- 動画を撮る
- いい感じにクロップ
libwebpを用いて変換
アニメーションWebP
WebPはGoogleが提唱している画像フォーマットの1つで、「ウェッピー」という初見殺しの読み方を持っています。基本的にVP8コーデックという動画コーデックの技術を活用しているフォーマットです。JPEG画像がそれなりに古い規格であることもあり、後発であるWebPは導入するだけで容量を大きく削減できるとされています。まあmozjpegを用いて圧縮されたJPEG画像と大差ない可能性は大いにありますが。
このWebPは画像フォーマットで、当然ながらどのように画像を圧縮するかについて定めているのですが、アニメーションも規格の中に含まれています。こうしたアニメーションを規格の中に含めている規格はGIFとPNG（APNG）が知られているのですが、GIFは極めて古いためアニメーションでも圧縮効率がそこまで高くないという問題点が、PNGは可逆圧縮フォーマットなのでただでさえ圧縮効率が低いのに、アニメーションにしたらばさらに容量が大きくなってしまうという問題点がありました。
WebPは圧縮効率がそれなりに高い上、動画コーデックを元にしているというメリットがあります。アニメーションGIFを置き換える物として優れている可能性があり、知名度がやたら低くWeb以外で使い道に困ることを除けば便利なものであるかもしれません。というわけでアニメーションWebPを生成してみましょう。
コマンド
実例として下の画像を生成したコマンドを紹介したいと思います。
元の動画は面倒だったので、OBSを用いてウィンドウ全体をそのままキャプチャすることで生成したものです。そのため余計なコマンドが入っていますがお許しください。
さてアニメーションWebPを作る前にそのソースとなる動画を作っていきましょう。まずはcropを用いて画面をそのまま撮影した動画（input.mkv）の中で余計なものが映りこんでいる部分を見せないようにします。
- 生成される動画の横サイズ
- 生成される動画の縦サイズ
- クロップし始める左上のX座標
- クロップし始める左上のY座標
の順番で数字を決め、それぞれをコロンで繋ぎます。あとはいい感じに画質などのチューニングを行います。その結果以下のコマンドが出来上がりました。
ffmpeg -i "input.mkv" -an \
-ss 00:00:04 -to 00:00:10 \
-vf crop=160:90:300:250 \
-c:v h264_qsv -tune animation \
-qmin 18 -q 22 -preset slower 599b.mp4
ここから生成された「599b.mp4」をもう一度FFmpegに放り込みます。ちなみにこんなことせずに元の動画から直にアニメーションWebPを生成することが出来るのは内緒です。
ffmpeg -i 599b.mp4 -vf fps=5 \
-c:v libwebp -loop 0 -lossless 0 -quality 75 \
-preset 5 -an -vsync 0 599b.webp
-r 10のようにしてFPSを決めてしまいがちかと思いますが、そうすると元の動画のコマ全てがきちんとエンコードされた上で秒速10コマで動くという（大抵の場合）ねっとりしたアニメーションが出来るだけなので、-vf fps=10のようにして作成するようにしてください。なぜなら私が実際にねっとりアニメーションを生んでしまったからです。
また-loop 0のようにしなければ、1回アニメーションしただけで終わってしまう上にクリックしても最初から始まらないという最悪なUXを与える画像を作り出してしまいます。恐らくloopの既定値が1になっているためであるかと思われます。基本的に一度ループさせるか無限ループさせるかのどちらかなのであまりに気にならないかと思いますが、-loop 10のようにすれば10回だけループするようなアニメーションWebPを生成することが出来ます。
このようにすることでFFmpegだけを用いてアニメーションWebPを生成することが出来ました。WebPは多くの標準に依拠する気持ちのあるブラウザで読み込むことが出来るので、そのようなブラウザを使用している人がほとんどだと思われるWebサイトにおいて使っていきましょう。
参考文献
- 「FFMPEGでアニメーションWEBP（ANIMATED WEBP）を作る」ニコラボ、2015年1月7日。
- まだ中学生「ffmpegでアニメーションWebPを作るコマンドオプションメモ」2016年10月8日。
最後に
- 前回のFFmpeg関連の記事: 藤棚を4K24fpsで撮影しHDRにすればいい感じになる説
- 次回のFFmpeg関連の記事: 動画をアップコンバートしてちょっと綺麗にする
完全に前回の記事の副産物をネットの海に放流しただけですが、 アニメーションWebPの人気が無さすぎるので 簡単なループアニメーションを作るコマンドを探すのにすら時間がかかったことから記事にしてみました。アニメーションGIFよりも明らかに容量を削減出来ていると思うので、もしよろしければ参考にしてみてください。
