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

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

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

粗くなったGIFの例
等間隔のにじみが見られる粗いGIFの例

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

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

使用した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

粗くならない例

粗くならないGIFのスクリーンショット
粗くならないGIFのプレビュー

変換コマンド

Terminal window
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アニメーション

粗くならないGIFアニメーションの結果
palettegen/paletteuse=dither=noneで変換した結果

粗い例

粗いGIFの例
等間隔のにじみが見られる粗いGIFの例

変換コマンド

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

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

粗いGIFアニメーションの結果
-r 10のみで変換した粗い結果
Share — X · Bluesky · はてブ ·