ブロックワークス

 

GIFアニメーションの画質を保ったまま軽量化する方法

当サイトの現在のデザインには、要所にGIFアニメーションを使用しています。画質を保ったまま軽量化する方法をまとめておきます。

環境

  • MacOSX 10.12
  • ターミナル、Homebrew、ffmpegを使用

1.Homebrewのインストール

ターミナルを起動します。その後、Homebrewをインストールします。インストール方法は、他サイトを参考にインストールしてください。

2.ffmpegをインストール

Homebrewにffmpegをインストールします。ffmpegの他、関連パッケージも合わせてインストールされます。

brew install ffmpeg

3.ffmpegでパレットファイルを生成

GIFは、256色しか使用できません。そのため、パレットファイルを生成し、使われている色を抽出します。

ffmpeg -i input.mov -vf "palettegen" -y palette.png

ポイントをいくつか記載します。

  • input.mov…変換元の動画ファイル名
  • palette.png…生成したいパレットファイル名

4.ffmpegでパレットファイルを使って変換

ffmpeg -i input.mov -i palette.png -lavfi "fps=★,scale=●:-1:flags=lanczos [x]; [x][1:v] paletteuse=dither=bayer:bayer_scale=5:diff_mode=rectangle" -y output.gif

ポイントをいくつか記載します。

  • input.mov……変換元の動画ファイル名
  • palette.png……手順3で生成したパレットファイル名
  • ★……フレームレートを数字で入力します。30くらいでいいでしょう。
  • ●……書き出す動画サイズです。横幅を指定します。
  • output.gif……書き出されたGIFアニメのファイル名です。

さいごに

当サイトでは、単色のアニメーションを使っていますが、一般的な動画も変換可能です。ただし、一般的な動画は容量が大きくなりがちなので、数秒にして見てもらえるように使うといいと思います。