動きを表現できて便利なGIFアニメーションですが、どうしても通常の画像より容量がかさんでしまいます。下記で紹介しているアプリなどでGIFアニメのフレーム数を削って容量を減らすことはできても、同時に動きの滑らかさも損なわれるわけです。
GIFアニメーションの変換や編集ができるフリーのMacアプリ「PicGif Lite」をご紹介します。色んなGIFアニメ編集ツールを使ってみて、実用的な機能が盛り沢山でしたので、よろしければ使ってみてください。 PicGif Liteは、GIFアニメーションでも減色しにくい（画質が粗くなりすぎ...
また、オンラインで簡易的にGIFを圧縮できるサービスも存在しますが、コンテンツに合わせた細かい調整ができなかったりします。
というわけで今回は、オフラインで操作可能で、様々な切り口から圧縮できるPhotoShopを使った編集方法をご紹介いたします。上手く活用すれば、できるだけ美しさを損なわずに、容量を削減することが可能です。
PhotoShopでGIF圧縮する際の操作手順
操作のステップは至って簡単で、以下の3ステップです。
- PhotoShopにGIF形式のデータをドラッグ&ドロップ
- ファイル＞書き出し＞WEB用に保存
- 詳細の設定を変更する
GIFアニメーションを圧縮する際に着目すべき5つのポイント
上記のステップ2で「WEB用に保存」を押した後の操作を詳しく解説いたします。
上記の赤枠箇所の5つのポイントを押さえておくだけで、効果な圧縮が可能です。
- カラー
- ディザ
- 劣化
- メタデータ
- サイズ
それぞれ順番に説明していきます。
カラー
GIF形式のファイルは、最大256色のカラーで表現可能です。ここの設定で減色させることで、容量を減らせます。減色し過ぎるととムラが出たりしますが、ほとんど色数を使っていない設定画面などのGIFアニであれば、減色させても違和感のない圧縮を期待できます。
色数が多い場合
約3.7MB
約1.7MB
色数が少ない場合
約800KB
約600KB
双方とも256色（左）のものを16色（右）まで減色させています。色数が多い方は汚くなっていますが、色数が少ない方はほとんど違和感なく容量のみを削減できています。
ディザ
指定されている色数の中で、色を組み合わせてグラデーションを綺麗に見せる技術です。違いがわかりやすいように静止画のGIFで比較しています。パーセンテージが大きければ、中間色が鮮明になります。
ディザ100% 約250KB
ディザ100%とディザ無しを比較してみました。細かい部分ですが、グラデーション部分に差が出ているのがわかると思います。ディザ無しでは中間色が汚くなりますが、容量が少し軽くなっています。
劣化
その名の通り、劣化させる機能。わずかな劣化でも大きな効果が望めるので、ぜひ試しておくべき設定です。あまり劣化が目立たずに容量を削減できる10から20ぐらいがおすすめです。
劣化0 約3.7MB
劣化20 約2.8KB
劣化20ぐらいだと、肉眼ではほとんど差は無いにもかかわらず、約1KB節約できていますね。
メタデータ
GIFに著作権情報などを設定している際は、「なし」に変更することで容量を削減できます。こちらはメタデータの有無なので、画質に変化はありません。
サイズ
サイズを縮小することで、大幅に容量を削減できます。表示する箇所に合わせて最低限のサイズに縮小しておくといいでしょう。こちらもページに設置する際に、引き伸ばしたりしない限り画質に変化はありません。
まとめ
PhotoShopを活用すれば、GIFの内容に合わせた圧縮が可能になります。
元々色数が少ないGIFであれば色数を大胆に減らす。もしくは、色数を減らさずに「劣化」の数値のみを増やすだけでも容量を削減できたりもします。肉眼ではあまり差を感じない程度にです。
コンテンツによって設定の見極めは必要かもしれませんが、GIFアニメーションをできるだけ綺麗なまま圧縮させたい際に活用してみてください。
GIFアニメーションではなく通常の画像を圧縮したい際は、下記記事で紹介しているツールも便利です。よろしければご覧ください。
WEBサイトの表示速度を向上させるために画像の軽量化は必須です。しかし、画像を圧縮すればするほど画質が劣化していくため、その妥協点をさぐるのに難航している方は多いのではないでしょうか。 当記事では、画像の圧縮率に伴う画質の変化をリアルタイムで確認できる画像圧縮ツール「Squoosh」を紹介して...
コメント