ウェブテクノロジ R&D部 清水です。
OPTPiX imésta 7 for Mobile & Social Ver.7.60で追加した「アニメーションGIFファイルサイズ縮小化」機能では、実写動画などを元に、以下のような高圧縮のアニメーションGIFファイルを生成することができます。
実写映像をアニメーションGIF化したサンプル1 (画像クリックで比較ページが開きます)
アニメ調の映像をアニメーションGIF化したサンプル (画像クリックで比較ページが開きます)
実写映像をアニメーションGIF化したサンプル2 (画像クリックで比較ページが開きます)
アニメーションGIFファイルサイズ縮小化機能(以下、本機能)では、いくつかの縮小化手法を組み合わせた結果として高圧縮を実現しています。本記事では、どのような処理を行って実現しているのかを簡単にご紹介します。
基本的な考え方
GIFフォーマットは本来「ロスレス(可逆)圧縮」ですので、圧縮する際に、(JPEGのように)ファイルサイズと画質のバランスを自由に変えることはできません。
ところが、元画像が写真などの場合は、そもそも、(最大256色の)GIFファイルを作る際に、減色処理が必要です。つまり、入力から出力までの全体で考えると、ロスレス(可逆)圧縮ではないということになります。(図1)
図1:写真をGIF画像に圧縮するプロセス
このことは、動画ファイルからアニメーションGIFに変換する場合も同様です。
そこで、アニメーションGIFファイルに保存する際の、図1の「中間処理の画像」を作るときに、圧縮しやすさ(出力ファイルサイズ)と画質のバランスを設定できるようにしました。
本機能では、JPEGの画質指定スライダーのような手軽さで、画質を設定できるようになっています。(図2)
図2: アニメーションGIF保存時の圧縮率指定スライダー
どのような動画に向いているか
短い動画
アニメーションGIFは、もともとウェブサイトで簡単なアニメーションを表示するために作られた規格ですので、MPEG系の動画フォーマットと違って長時間の動画データを格納する目的にはそもそも向いていません。
ところが、アニメーションGIFはどんなウェブブラウザでも簡単に再生できるため、短くてインパクトのある動画を手軽に表示したり共有したりするのに便利なフォーマットとして使われるようになりました。
本機能で高画質・コンパクトなアニメーションGIFが作れるといっても、アニメーションGIFの本質は変わりませんので、あくまでもごく短い動画に適用するのが良いでしょう。一般的に、アニメーションGIFにすると、動画専用フォーマット(mp4やflv等)よりもファイルサイズが大幅に増えてしまいます。
実写映像や多階調のアニメ映像
本機能の最適化処理は、実写映像や多階調のアニメ映像をアニメーションGIFに変換する際に威力を発揮するよう設計されています。
既存のアニメーションGIFファイル
既に他のソフトでアニメーションGIFに変換してしまったファイルを元データとして使用した場合も、あまり画質劣化せずにファイルサイズを小さくできる場合が多くあります。
階調の少ない画像では削減効果が小さい
実写動画の場合とは逆に、イラストや幾何学図形などの階調の少ない画像では、ファイルサイズの削減効果は小さくなります。
縮小化の具体的な手法について
1. 透明色を使った基本的な自動最適化
アニメーションGIFでは、パラパラマンガのように、複数のGIF静止画像(コマ)を次々と表示することでアニメーションを行っています。
図3-1: 3コマ動画の例
この3コマの画像をそのままGIFファイルへの保存に使ってもアニメーションGIFを作ることはできますが、画像データの持ち方をちょっと工夫することで、もっと圧縮することができます。
図3-1の画像では、緑・橙・赤になる部分以外は変化しません。そこで、図3-2のように、前のコマと全く同じ色の画素の部分を透明色にします。
図3-2: 透明色を使った最適化
1コマ目、2コマ目、3コマ目と重ね書きしていっても、透明色の部分の色は変わりませんので、このような画像を使っても、図3-1と同じ表示結果となるアニメーションが得られます(*1)。
GIFのようにLZW圧縮アルゴリズムを使った画像フォーマットでは、同じ色の画素が多く使われていたり連続していたりすると、圧縮率を高められます。この特徴を利用して、ファイルサイズを小さくしています。
*1: GIFアニメーションには、このように各コマを重ね書きするモードの他に、透明色の部分に背景の色を表示するモードもあります。
2. パレットの削減による最適化
GIF画像は、最大256色のインデックスカラーフォーマットですので、画像にはパレットデータ(*2)が必要です。
GIFアニメーションでは、各コマごとにパレットデータを付加する(図4-1)ことも、全てのコマでパレットデータを共有する(図4-2)ことも可能です。
図4-1: 各コマごとにパレットを付加した場合
図4-2: 全コマでパレットを共有した場合
色数の多い画像の場合、各コマ毎にパレットデータを付加したほうが、画質を高めやすくなります。全コマでパレットを共有すると、パレットデータが少なくなったり、画像中の色が変わらない部分が増えたりして、結果的にファイルサイズは小さくなりますが、全てのコマで最大256色までしか使えませんので、画質が低下することがあります。
この点については、OPTPiX imésta 7 シリーズでは、高画質で定評のある共通パレット減色エンジンを使いますので、全コマでパレットを共有しても、かなりのところまで高画質を保つことができます。
*2:パレットデータは、CLUT=Color Lookup Table とも言います。
3. ロッシー(非可逆)圧縮による透明色最適化
第1項でご紹介した透明色を使った最適化は、GIFアニメーションの自動最適化としてはポピュラーな方法ですが、それを一歩進めたのがロッシー(非可逆)圧縮による最適化です。
アニメーションGIFファイルへの保存時の透明化は、通常、前のコマと「完全に一致」した画素だけに対して行いますが、「ほぼ一致」した部分にまで適用することで(圧縮率が高まり)、ファイルサイズをさらに小さくできます。(図5-1,5-2)
図5-1: ロッシー圧縮(非可逆圧縮)による透明色最適化(元画像)
図5-2: ロッシー圧縮(非可逆圧縮)による透明色最適化後
* わかりやすくするために色を強調しています。
なお、単調な色の部分では、逆に、透明色最適化を行わない方がファイルサイズが小さくなる場合もあるので、このような部分では透明色最適化を行わない、という最適化も行っています。
4. ロッシー(非可逆)圧縮によるディザ最適化
GIFフォーマットでは、普通、画像のザラつきやディザが多いほどファイルサイズが増えるので、画質に与える影響を最小限に抑えつつ、適切に画像のザラつきやディザを自動的に減らしてファイルサイズを小さくします。(図6)
図6: ロッシー圧縮(非可逆圧縮)によるディザ最適化
5. ロッシー(非可逆)圧縮による色数最適化
GIFフォーマットでは、普通、画像の色数が少ないほどファイルサイズが小さくなりますので、適切な色数に減らすことで、画質に与える影響を最小限に抑えつつファイルサイズを小さくします。
* 画像処理ではなくLZW圧縮処理自体を非可逆化して高圧縮を実現するソフトウェアもありますが、画質面でのデメリットが大きいため、OPTPiX imésta 7 for Mobile & Social ではLZW圧縮処理自体の非可逆化は行っていません。
最後に
上記1～5の手法を組み合わせることで、高画質を保ちつつ、ファイルサイズを縮小したGIFアニメーションの生成が簡単に可能になりました。
なお、これらの処理のなかには、元の画像によってはファイルサイズ的に逆効果になることがありますので、GIFファイルサイズが通常の「ロスレス(可逆)圧縮」より増えるようなら、「ロッシー(非可逆)圧縮」ではなく、「ロスレス(可逆)圧縮」で保存する、という機能も用意しています。
