FFmpegでアニメーションWebPを作りたい
GitHubのプロフィールにアニメーション画像を載せたいなと思いFFmpegで動画を変換しました。
ブラウザで表示できるアニメーション画像だと次の3種類ぐらいかなと思います。(ほかにもありそうだけど。)
アニメーションGIF
3つの中で一番古くから使われているであろうフォーマット。
超シンプルにパラパラ漫画の要領でアニメーションさせる。
アニメーションPNG
Mozillaが頑張って普及させようとして頑張ったけど結局普及しなかったフォーマット。
PNGを拡張して作られてるとのこと。
扱ったことないからあんまり知らない。。
アニメーションWebP
JpegやPNGよりもファイルサイズが小さくなるらしい画像フォーマット。
この中では一番最近出てきたフォーマットなのでこれから普及していく?のではないでしょうか。
本題
今回変換する画像はこの動画です。
https://pixabay.com/videos/id-27400/pixabay.com
「2560×1440」でダウンロードしました。
最小限コマンド
ffmpeg.exe -i wolf-27400.mp4 out.webp
-i
で動画ファイルを指定して、出力先の画像ファイル名を指定しているだけです。
ffmpegは拡張子で判断してくれるので楽ですよね。
サイズ指定
さすがに「2560×1440」は大きいのでリサイズします。
ffmpeg.exe -i wolf-27400.mp4 -s 426x240 out.webp
-s
で出力解像度を指定します。
フレームレート指定
ファイルサイズを落とすためにフレームレートを落としてみます。
ffmpeg.exe -i wolf-27400.mp4 -s 426x240 -r 15 out_frame.webp
-r
でフレームレートを指定します。
この動画の場合 4.2MB > 2.9MB まで小さくなりました。
ループ再生
ffmpeg.exe -i wolf-27400.mp4 -s 426x240 -r 15 -loop 0 out_loop.webp
-loop 0
の指定でループ再生になります。
まとめ
はてなってWebPのアップロードできないんですね。。。