GitHubのREADME上で粗くならないGIFアニメーションをffmpegで作成する方法

詳しい理由はよくわかっていませんが*1、スクリーンレコードした動画をffmpegでGIFアニメーションに変換してGitHubのREADMEに貼り付けたとき、変換方法次第ではで画像が粗くなってしまう場合があります。

以下の画像のように等間隔ににじみ（？）のようなものがあります。スクリーンショットをとった環境はWindows 10のChromeです。UbuntuやmacOSのChromeでも同じでした。

ffmpegのよいパラメータを見つけたのでメモしておきます。

以下のページを参考にして一部変えました。

qiita.com

使用したffmpegのバージョンは下記のとおりです。

$ ffmpeg -version
ffmpeg version 3.4.6-0ubuntu0.18.04.1 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 7 (Ubuntu 7.3.0-16ubuntu3)
configuration: --prefix=/usr --extra-version=0ubuntu0.18.04.1 --toolchain=hardened --libdir=/usr/lib/x86_64-linux-gnu --incdir=/usr/include/x86_64-linux-gnu --enable-gpl --disable-stripping --enable-avresample --enable-avisynth --enable-gnutls --enable-ladspa --enable-libass --enable-libbluray --enable-libbs2b --enable-libcaca --enable-libcdio --enable-libflite --enable-libfontconfig --enable-libfreetype --enable-libfribidi --enable-libgme --enable-libgsm --enable-libmp3lame --enable-libmysofa --enable-libopenjpeg --enable-libopenmpt --enable-libopus --enable-libpulse --enable-librubberband --enable-librsvg --enable-libshine --enable-libsnappy --enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libtwolame --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx265 --enable-libxml2 --enable-libxvid --enable-libzmq --enable-libzvbi --enable-omx --enable-openal --enable-opengl --enable-sdl2 --enable-libdc1394 --enable-libdrm --enable-libiec61883 --enable-chromaprint --enable-frei0r --enable-libopencv --enable-libx264 --enable-shared
libavutil      55. 78.100 / 55. 78.100
libavcodec     57.107.100 / 57.107.100
libavformat    57. 83.100 / 57. 83.100
libavdevice    57. 10.100 / 57. 10.100
libavfilter     6.107.100 /  6.107.100
libavresample   3.  7.  0 /  3.  7.  0
libswscale      4.  8.100 /  4.  8.100
libswresample   2.  9.100 /  2.  9.100
libpostproc    54.  7.100 / 54.  7.100

粗くならない例

変換コマンド

ffmpeg -i Rec-2020-03-11_00.26.30.mp4 -filter_complex "[0:v] fps=10,split [a][b];[a] palettegen [p];[b][p] paletteuse=dither=none" Rec-2020-03-11_00.26.30.gif

変換したあとのGIFアニメーション

粗い例

変換コマンド

ffmpeg -i Rec-2020-03-11_00.26.30.mp4 -r 10 Rec-2020-03-11_00.26.30.gif

変換したあとのGIFアニメーション

*1:詳しい方教えてください🙇