✍️blog

技術系のこととか

FFmpegでアニメーションWebPを作りたい

GitHubのプロフィールにアニメーション画像を載せたいなと思いFFmpegで動画を変換しました。

ブラウザで表示できるアニメーション画像だと次の3種類ぐらいかなと思います。(ほかにもありそうだけど。)

アニメーションGIF

3つの中で一番古くから使われているであろうフォーマット。
超シンプルにパラパラ漫画の要領でアニメーションさせる。

アニメーションPNG

Mozillaが頑張って普及させようとして頑張ったけど結局普及しなかったフォーマット。
PNGを拡張して作られてるとのこと。
扱ったことないからあんまり知らない。。

アニメーションWebP

JpegPNGよりもファイルサイズが小さくなるらしい画像フォーマット。
この中では一番最近出てきたフォーマットなのでこれから普及していく?のではないでしょうか。

本題

今回変換する画像はこの動画です。

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で出力解像度を指定します。

結果はこんな感じです。 https://raw.githubusercontent.com/sabiz/webp-test/main/out.webp

フレームレート指定

ファイルサイズを落とすためにフレームレートを落としてみます。

ffmpeg.exe -i wolf-27400.mp4 -s 426x240  -r 15  out_frame.webp

-rでフレームレートを指定します。

https://raw.githubusercontent.com/sabiz/webp-test/main/out_frame.webp

この動画の場合 4.2MB > 2.9MB まで小さくなりました。

ループ再生

ffmpeg.exe -i wolf-27400.mp4 -s 426x240  -r 15 -loop 0  out_loop.webp

-loop 0の指定でループ再生になります。

https://raw.githubusercontent.com/sabiz/webp-test/main/out_loop.webp

まとめ

はてなってWebPのアップロードできないんですね。。。

まぁ、ブログに張り付けるのはカメラとかスマホで撮った写真(Jpeg)が一般的ですよね。

via GIPHY