ffmpegで動画を綺麗なgifに変換するコツ
先日、gifで動くモックアップ動画を作ってツイッターに投稿した。
ブログ用にApple Motionで画面はめ込みのスクリーンキャストを作ってみた。gif変換はffmpeg pic.twitter.com/oWlkp67ooA
— TAKUYA🐾個人開発で食うノウハウを書く (@craftzdog) July 12, 2018
英語でも同様のツイートをしたら以下のような質問が来た。
That looks very smooth. What parameters are you using for ffmpeg? I've tried (and failed) to cook a good gif from a video before.
— Jamie Birch (@LinguaBrowse) July 12, 2018
意訳： 「まじヌルヌル動くやん、どうやってんの？俺も前試してんけど無理やってんわー」
という訳でこちらにもティップスをシェアしたい。彼には既に伝えたので安心してほしい。
無料ツールのffmpegを使う
ffmpegというのは有名なフリーの動画変換CLIツール。一度知ったら手放せない。 macだったらhomebrewでインストールできる：
brew install ffmpeg
もっとも基本的な使い方は以下の通り：
ffmpeg -i input.mp4 output.gif
input.mp4をoutput.gif に変換している。簡単や。
パラメータの調整が必要
しかし問題は、適切なパラメータを指定してやらないと綺麗に変換されないということだ。
以下は特に何も最適化せずに動画を変換した場合のアウトプット：
ffmpeg -i input.mov -lavfi "fps=12,scale=900:-1:flags=lanczos" -t 5 -y output.gif
- fps=12, width=900, length=5s, size=445KB
なんかブツブツのパターンが見える。使えないこともないけどなんか違和感がある。
パレットを最適化する
gifは256色しか表示できない。なので、動画内で使われている色をあらかじめ計算してパレットを生成する。
ffmpeg -i input.mov -vf "palettegen" -y palette.png
これで palette.png というファイルが出来た。
このパレットファイルを使用して生成してみると・・
ffmpeg -i input.mov -i palette.png -lavfi "fps=12,scale=900:-1:flags=lanczos [x]; [x][1:v] paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -y output.gif
- fps=12, width=900, length=5s, size=1.3MB
スムース！ あとはお好みのfps(フレームレート)やサイズを指定すればOK。 なぜファイルサイズが倍以上に増えたのかは、gifの仕様に詳しくないので分からない。
コマンド内で指定している謎の各パラメータはおまじないなので気にしなくてもOK。もしもっと凝った事がしたいなら、以下で紹介している参考元記事をどうぞ。
