GIFを使おうよ

どうも世の中JPEGばかりで嫌になる。ああいや、JPEGは写真のような複雑なラスタデータを圧縮するには圧縮率の割に劣化の少ない良質なフォーマットだけれど、色数が少なくて単色塗りの多い図形などにはいまいち不向きなのに、それらも全部JPEGにしてしまう人が多過ぎて嫌、ってこと。


GIFは(単純に言うと)横方向に同じ色が連続する場合に、その情報を一纏めにすることで圧縮するような仕組みになっている。だから単色で塗られた画像に対する圧縮率はJPEGより高い。256色までしか使えない欠点があるけれど、そういう画像なら色数はそう多くないから大丈夫。それに、必要なら画像の一部を透明にしたりアニメーションさせることもできる。
対してJPEGは、(これも単純に言うと)8×8のブロックごとに画像を単純なグラデーションに近付けてしまうことで大体のディティールを保ったまま情報を単純化する。色とりどりな写真では圧縮があまり目立たず綺麗に見えながら軽量化できるけれど、圧縮を強くすると8×8のブロックがはっきり見えてしまうし、周囲とのコントラストが強い線のような部分は巧く圧縮できず、モヤモヤしたノイズが出てしまう。だから写真には向くけど図には不向き。
どちらが優れているというのではなくて、得手不得手を意識して使い分けるのが肝心。


GIF画像を作るなら、色数の調整に気を配ると良い。単色で塗った部分は単色で表示しながら、全体に使用する色数がなるべく少なくなるよう。ちょっとその方法を紹介する。
白と黒だけで○を書こうとすると、縁がギザギザになる。これを滑らかに見せるためには、アンチエイリアスと言って中間色(この場合は白と黒の中間だから灰色だ)で目立つギザギザを塗り、縁をぼかして見せる手法が使われる。白→黒より白→灰色→黒の方が、それより白→明るい灰色→灰色→暗い灰色→黒の方が滑らかに見える(その分ボケたようにも見えるけれど)。基本的には、どの色との関係でも同じように、中間色で上手にぼかすことでギザギザな線が滑らかに見えて綺麗な画像になるのだけれど、これは使えば使うほど色数も多く使ってしまう。白から黒へのグラデーションだけでも、最大256色使うことができるのだ。
だから、色数を少なくするには、アンチエイリアスに必要な最低限の色を残しながらそれ以外の色を削る必要がある。


具体的にはこうだ。

  1. 画像に使われた主な色を抜き出す
  2. 画像中で隣り合う色を50%づつ混ぜ合わせた中間色を作る
    • 可能なら隣り合う色を25%+75%の割合で混ぜた中間色も用意すると良い
  3. 抜き出された色からカラーパレットを作成する
  4. 元の画像を、作成したカラーパレットに割り当てて減色する

こうすれば、塗り潰しの部分を1色に保ち、縁を滑らかに見せつつ色数をかなり減らすことができる、はずだ。
……まあ最近の画像加工ツールは強力なので、そんな苦労をせずとも充分に品質を保って減色可能なのだけれど。