GIFアニメを90%圧縮

ちょっとした動きを記事に載せたいとき、GIFアニメという選択肢があります。

音声がいらず、短い動画であれば、ユーザーがクリック、タップ不要なGIFアニメが有効な場合が多いです。

特にループ再生の動画には、もってこいです。

ただ、思った以上に容量が重く、質を落とさず圧縮するのに試行錯誤しました。

動画をGIFアニメへ変換

2秒の動画（mp4形式）をGIFアニメに変換します。

変換は手軽にできるオンラインツールを使います。

3つのオンラインツールを試したのですが、なぜかうまく変換できたのはGirafというツールだけでした。

Girafは日本語の上、丁寧なUIなので、迷わず使えます。

GIFアニメの出力設定は

サイズ：480×270ピクセル
フレーム数：25
フレームレート：12fps

動きを見せたいので、フレームレートは高く設定しています。

これで出力されたGIFアニメの容量は・・・2.12Mバイト。

重いです。

GIFアニメを圧縮

GIFアニメの軽量化のため、圧縮ツールを探していると、ezgif.comが提供しているオンラインツールに出会いました。

英語だったのでGoogleサイト翻訳の力を借ります。

重複するフレームを削除する（Remove duplicate frames）

画像変化のほぼないフレームがあるので、削除しましょう。
度合いは 50％としています。

ファイルサイズ：1.02M（-51.79％）

これだけで半減します。

透明性を最適化する（Optimize Transparency）

アニメーションしていないところは透明にして、前のフレームの画像を表示させる軽量化です。
度合いは4%としています。

ファイルサイズ：413.77K（-60.49％)

これも効果絶大で、一気に軽量化しました。

カラーリダクション＋ディザ（Color Reduction + dithe）

色数を減らします。
256色から128色に半減させつつ、色の境界をぼかすディザを使います。

ファイルサイズ：326.65K（-21.06％）

色数を半減してましたが、思ったより軽くなりませんでした。

もっと色数を減らしても良いですが、別のことを試しましょう。

損失のあるGIF（Lossy GIF compression）

直訳で「損失のあるGIF」でしたが、劣化だと思います。
思い切って150％の度合いで適用します。

ファイルサイズ：218.62K（-33.07％）

ガサガサした感じになりました。

ここまでで、90%カットの圧縮となりました。

動画の取り直しで質の高い圧縮

• 重複するフレームを削除する
• 透明性を最適化する

この２つで、相当な削減効果がありました。

なので、必要な場所以外は動かないよう、しっかり三脚で固定しで動画をとることが、GIFアニメ変換時の軽量化につながります。

 

撮りなおして、重複するフレーム削除と、透明性の最適化をすると・・・

ファイルサイズ：146.15K

画質の低下もほとんどなく、重さを93％削減できたようです。