GIPHYとgifsicleでgifアニメーション作成&最適化


qiitaを見ているとgifアニメーションを使った表現を見かけます。
文字に起こすより画像や動画での表現がわかりやすい場面もあると思うので、gif作成アプリの紹介と作成したファイルサイズが大きかったので最適化を行ってみます。

環境はmacOSX。

GIPHY Capture

https://itunes.apple.com/jp/app/giphy-capture-the-gif-maker/id668208984?mt=12
デスクトップのキャプチャアプリ。
キャプチャー後に開始と終了のトリムや画像の品質の指定が手軽に行える。

ストアからインストールできるのでちゃちゃっと。
アプリは直感で使えたので説明は省略。

気になったのは中間地点で不要な部分の切り取りができない。
手間取ってるとはじめから撮り直しなのでドキドキしちゃう。

冒頭のgifでも品質をLowに設定しているが、1.9MBもあるので最適化を行ってみる。

gifsicle

https://www.lcdf.org/gifsicle/
コマンドラインでgifファイルの編集ができる。
ループの設定やコマ送りの速度なんかを変えられるもの。
このツールでgifの最適化を行う。

homebrewでインストールできるのでちゃちゃっと。

$ brew install gifsicle

最適化

オプション--optimize[=LEVEL]の指定で最適化が行える。
man gifsicleでオプション内容をみると、1から3の指定ができる。

-O1  Stores only the changed portion of each image. This is the default.
-O2  Also uses transparency to shrink the file further.
-O3  Try several optimization methods (usually slower, sometimes better results).

余程問題がでない限り、3で問題なさそう。

$ gifsicle --optimize=3 input.gif > output.gif
  • 圧縮前 1.9MB:
  • 圧縮後 848KB:

コード程度なら違いは分からないです。
サイズは半分になるのでやっておくと取扱いも楽になりそうですね。