GIFの圧縮について

　前回の対談形式を書いてみて、人には向き不向きがあることが良くわかりました。というか、ちよ＆大阪がそもそもの間違い、親方＆艦長＆指令でやるほうが良いですね。
そんなわけで、仕切りなおして自分のスタイルで普通に書き直します。

まずはフォーマットの特徴

GIF 特徴
  • アニメーションができる。
  • 透過（透明）色が使える。
利点
  • アニメ的な絵の圧縮に向いている
  • 歴史が長く、使える環境が多い(封印されているが…）
  • 可逆圧縮であり、元の絵に戻せる。
欠点
  • 特許問題で利用できない環境がある。
    　但し日本国内は特許切れで問題無し
  • ２５６色しか使えない
JPG 特徴
  • 自然画を取り扱うことを前提とした形式
  • 圧縮率が自由に設定できる
利点
  • フルカラーの写真のような画像の圧縮に向く
  • 自然画での圧縮は高レベル。
  • 使えない環境を探すほうが難しい程普及している
欠点
  • アニメの絵やゲームのキャラのようにくっきり塗り分けられた絵の場合、
    　 エッジがゆるくなったり、ゴミが入ることがある。
  • 圧縮率が低いと方形のムラが見える。
  • 不可逆圧縮なので、元の絵には戻せない。
PNG 特徴
  • 一般化された画像フォーマットとして利用できるように開発された。
    そのためどこの特許も利用していない。
  • 姉妹フォーマットのMNGで、フルカラーアニメーションにも対応
  • 最近のブラウザであればほとんどで見ることができる
利点
  • ガンマ補正データが格納できる為、環境にとらわれず同じ色で表示できる
  • フルカラーを利用できる
  • アルファブレンディング能力がある。
    　これは色毎ではない為、同色でも透明不透明を設定できる。
  • 可逆圧縮なので、元の絵に戻すことができる
  • 実は同じ色数ならGifよりも高圧縮
欠点
  • 古いブラウザで見れない（IEなど）
  • 圧縮手法の問題もあり、自然画ではJPGに圧縮率が劣る
BMP 特徴
  • 圧縮のないフルカラーのフォーマット。そのためファイルサイズは大きい。
    しかし 、取り込み画像などを無劣化で扱えるため、需要はある。
  • ほとんどの画像フォーマットが、X・-Y座標系（左上が基点）を利用するが、
    　 X・Y座標系（左下が基点）を利用しており、下から上に書かれていく。
  • ウィンドウズでは標準だが、インターネットでは一般的ではない。

　あとは、TFFだとか色々ありますが、めどいので無視します。
少し脱線しますが、PC98時代の草の根BBSではMAGフォーマットが標準でした。16色しか使えない環境で、自然な色合いに見せる為には、タイリング(ディザ)が不可欠で、結果、圧縮形式もそれに特化された物が重用されたのです。しかし時代は変わっていきWin3.1の頃にはBMPやJPG形式も出回り始めました。
　２．４Kの通信速度やDOS環境では、BMPはうざかったです。この時代のことで良く覚えているのは、初めてのJPGデータが、「ごとP」さんの描かれた「キィ・ザ・メタルアイドル」のイラストだったということです。この絵はお気に入りで、仕事で使っていたWim3.1の壁紙にもなっていました。ﾃﾗなつかしス。

GIFの圧縮率向上について

まず結論から言いますと、圧縮率の向上、すなわちファイルサイズの削減に有効な手法は

となります。この辺の実戦はコラ講座で行います。
そして、これから描くことはまったく不要な知識ですので読まなくてもまったく問題ありません。
むしろ詠まないほうがいいと思います(笑

でも背景の共通化は読んで欲しいかな？かな？

何故同じ色で塗りつぶすのか：それは全ては圧縮の為

さて、語る上で説明しなければいけない事が2つあります。

  1. データの上で、絵は一本の帯でしかない
  2. GIFの圧縮は同じ色が続く、もしくは同じパターンが続くことで高圧縮が期待できる

　１は、実はもともとの画像というものは３２０＊２４０の画像であれば、３２０の長さのデータが２４０並んでいるということですが、データ上では一本の線で並んでいます。ですので左端と次の行の右端はくっついていると思ってください。

この絵でなんとなくイメージを持ってもらえれば、幸いです。

　このことから、データを弄くって６４０＊１２０のように書き換えれば妖しげな絵になります。

　２ですが、一般的にGIFは同じ色が続くと高圧縮といわれますが、これはかなり単純化された説明でもう少し話は複雑です。しかしまずはこの単純化された説明からしていきます。
　 しかしGIFに関する圧縮技法は語り尽くされたものであり、理論的なものを必要とする方はググッてください。

GIFの圧縮への道１：一般的にはランレングス法

　先ほど出した双の画像で説明すると、上三行のデータをRとBで現すと、
RRRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRRRRRRRRRRRRRRRR RRRRRRRRRBBRRRRRRRBBRRRR
これを数えていくと、Rが５７個、Bが２個、Rが７個、Bが２個、Rが４個となります。このときRを”０”、Bを”１”とすると　00 57 01 02 00 07 01 02 00 04 となります。これでRとBの７２個のデータが、１０個に減りました。

　これが一般的にランレングス法といわれる、圧縮方法です。 しかし、実際の話し、この手法は使われていません（どっか〜ん
それは何故か？この圧縮方法では市松模様といわれる画像ではデータが倍になります。市松模様とは、左の画像です。

　

　理屈上この模様では２倍のサイズになりますが、GIFではコンパクトに圧縮されています。
実際Gifのようにカラーの少ない形式では、右の絵のようにディザが多用される傾向があるので、これではまずいわけです。

GIFの圧縮への道２：符号化

　ではこの市松模様を、効率よく圧縮するにはどうすればいいのでしょうか？
単純化した例題であれば、循環小数の考え方と変わりません。例えば１を７で割ると0.142857142857・・・・のように、142857が繰り返されます。

　この考え方を市松模様に応用してみると、白＝１、黒=０とした場合、１・０の繰り返しとなります。
しかし、既に述べたように、画像はデータで見ると、左端と、次の行の右端がつながります。

　つまりこの絵では 101010101010101010101010 010101010101010101010101 の繰り返しとなり、２種類のパターンで再現されていることが分かります。これにたいして変数のようなもので置き換える（符号化）と
A=101010101010101010101010
B=010101010101010101010101
のようになります。つまり例に出した市松模様の場合は"ABABABABABAB"と圧縮できるわけです。

　参考までに横を２４から２３に変えると、データ上では10だけの単純な繰り返しとなりより高圧縮が期待出来ます。まれに画像の横サイズを１ドット変えるだけでサイズが大幅に変わる事がありますが、このような条件が考えられるわけです。

減色：それは圧縮の為

　同じパターンやべた塗りが多ければ多いほど圧縮率が上がることは説明しました。
そして減色ですが、これは同じ色の連続を増やす可能性があるため、結果として圧縮率が上がります。

　これは■　■のように、人の目では分からないぐらいの色の違いでも、当然ながらデータ上ではまったく別のものとして扱われています。
この２色が市松模様になっているような場合、１色で塗っても見た目上問題がなくなおかつデータが、より圧縮できるようになります。それこそが減色の効果です。

背景の共通化：それは最小限の置き換えの実現

　まず例を見てみましょう。つぎのURLを開いてください（ブリーフケース）
このURLで背景修正無しを見てください。一見同じ背景ですが微妙に違っており共通化が行えません。そのため９３８Kもサイズがあります。しかし、背景を共通化したデータは５７７Kまで減りました。同じサイズ、同じ画質ですがここまで変わります。もう少しがんばれば双葉にアップできるサイズにまで減らせられます。これが背景の共通化です。

次の画像を見てください。

　２段それそれで上下に分かれています。これが何を表しているかというと背景の共通化が行われているかどうかで、どの程度データが減るか？という図です。
　上段は、上がアニメーションGIFで全てのコマが１枚絵の場合で、下が背景を共通化しているものです。そして下段はそれを並べてどれぐらい画像が減ったかを表現しています。
つまり背景が統一できればできるほどデータは小さくなります。

　さて、これを実現する上で必要なのは「全てのコマで同じ場所が同じ色であること」です。
これは、例えば地上波をキャプチャーした場合、ノイズもありますし、コマ数が増えれば増えるほど共通化は不可能になります。また背景が動く映像でも共通化は難しくなります。そういう素材の場合は切抜きを行うのが一番です。

戻る