🐈

github用のアニメーションgifまわりあれこれ

2 min read

githubにアニメーションgifを貼り付けたい場合どうしてますか?
Googleで「github gif animation」と検索するとそれぞれ違う方法が出てくるのですが自分的にあまりしっくり来ませんでした。
ここではFFmpegとImageMagickを使った方法をご紹介します。
demo

結論

mp4ファイルからアニメーションgif作成
$ ffmpeg -i ***.mp4 -an -r 10 %04d.png
$ mogrify -resize 600x *.png
$ convert *.png demo2.gif

# Optional
$ pngquant *.png
$ convert *fs8.png demo_fs8.gif

実行環境

$ uname -a
Linux *** 5.4.0-89-generic #100~18.04.1-Ubuntu SMP Wed Sep 29 10:59:42 UTC 2021 x86_64 x86_64 x86_64 GNU/Linux

FFmpegとImageMagickの準備

なければインストールして下さい。

$ sudo apt update
$ sudo apt upgrade -y
$ sudo apt install ffmpeg imagemagick

専用のフォルダと動画ファイルを用意する

$ mkdir movie2gif
$ cd movie2gif
$ mv ../test.mp4 ./

注意すること

出来上がる予定のanimation gifファイルは25MB未満と10MB未満にしていく必要があります。

コードの一部としてpushする場合

25MB未満にします。

issueからURLをコピペする場合

10MB未満にします。

おすすめ

コードの一部としてpushする方をおすすめします。README.mdと同じ階層にimgディレクトリを作り、その中にanimation gifファイルや画像ファイルを格納します。こうしておくとREADME.mdを修正した時に画像配置や変更履歴を残せておけます。
25MBと書きましたがpushする場合にはもっと大きくて大丈夫です。大丈夫ですがあまり大きいファイルにするのは読み込み速度に影響しますしREADME.mdが読みにくくなるのでお勧めしません。animation gifファイルの大きさはfpsと一枚あたりのgifファイルの大きさに深く関係します。成果物のファイルサイズを小さくするには以下に注意して下さい。

  • FFmpegでの変換時にfpsを5〜10に落とす(フレームドロップさせる)
  • ImageMagicで全ての画像ファイルを小さくリサイズする

FFmpegでの変換

10fpsでpngファイルへ変換
$ ffmpeg -i test.mp4 -an -r 10 %04d.png

オプション

  • -i
    • 入力動画を指定
  • -an
    • 音声データを削除
  • -r
    • fpsを指定

使わないオプション

  • -s
    • 縦横サイズを指定。アスペクト比を固定したいので次のImageMagickで処理を行う
  • -b
    • ビットレート指定。これを指定して画像を汚くするより画像の縦横サイズを小さくしたりfpsを小さくしたほうが良いと思っています

ImageMagickでの変換

リサイズ
$ mogrify -resize 600x *.png

横幅だけ指定すればアスペクト比が固定されます。横より縦が長い場合はx400とか指定すればOK。

結合
$ convert *.png demo.gif

結合には時間がかかります。あまりにも時間がかかる場合画像ファイルが壊れている可能性もありますのでCnt+Cで中断してやり直して下さい。

出来上がったanimation gifファイルを確認

出来上がりのサイズを確認して大きすぎるようなら

一括削除
$ rm *.png

としてからFFmpegでの変換からやり直して下さい。

README.mdへの貼付け

pushした後、README.mdに以下の様に記載します。

![demo](img/demo.gif)

Zennへの貼付け

おまけです。Zennには以下の様にして貼り付けます。

![demo](https://github.com/yKesamaru/disaster/blob/main/img/demo.gif?raw=true) 

追記

出来上がるアニメーションgifファイルを少しでもサイズダウンさせたい場合。

pngquantをインストール
$ sudo apt install pngquant
圧縮してからgifファイルにまとめる
$ pngquant *.png
$ convert *fs8.png demo_fs8.gif

9.9MiBから8.4MiBにサイズダウンしました。
FFmpegとImageMagickでの過程で十分ファイルサイズを小さくすることが重要です。

以上です。最後までお読み頂きありがとうございました。

Discussion

ログインするとコメントできます