前回はGIFとPNGの機能差について、いくつかの項目を挙げて説明としました。予定ではその次のエントリで両形式の透過の実現について書くつもりでしたが、前回の説明で言葉足らずな部分があったことに気付いたので、このエントリを補足とさせていただきます。とりあえず両形式の使い分けについてだけ知りたい方は、このエントリを飛ばして前後のエントリを参考にしてください。

ビット配列による色表現

基本的な部分にたちかえってみますと、デジタルの画像データはつまるところ1または0の値をもったビットの集まりになります。色の表現の考え方としては、1ドットにつき1ビットの情報をもつことができるのならば、そこに色があるか/ないかを情報としてもてるわけで、単色の画像を表現できます。この場合の単色は白黒に限らず、もし1を、”赤色が存在している”ことの指標として定義しているのなら、この1ビットの画像は赤白になるはずです。宣言は画像データの内部や、あるいはデータを読み込むソフトウェアのどこかでされているはずですが、その場合でも1ドットについてみれば1ビットのデータしかもっていないので、1ビットのビット深度をもつ画像と呼ばれます。

次に、2ビットのビット深度をもつ画像について考えてみます。2ビットのデータというのは、00、01、10、11という四種類の値をもつので、1ドットにつき4色を表現できることになります。例として、赤、茶色、焦げ茶色、群青色の四色を使う場合を考えてみましょう。どの値にどの色を割り当てるかという情報は、先ほどの赤白画像の例と同じようにどこかで宣言されていなければなりません。この例の場合00＝赤、01＝茶色、10＝焦げ茶色、11＝群青色のような宣言をするのですが、このビット配列と色の対応表をカラーマップと呼びます。一方、ドットごとにカラーマップのどの色を使うかの宣言部分は、たとえば赤が3ドット並んだ後茶色のドットが1ドットある場合、00、00、00、01のようになります。この宣言部はインデックスと呼ばれ、このようなカラーパレットとインデックスを使った表現方式をインデックスカラーと呼びます。

インデックスカラーの特長として、画像ファイルのサイズに見合った効果的な色表現ができることが挙げられます。たとえば青空を撮影対象とした写真では、使われている色はほとんど青や水色です。もし8ビットのビット深度をもつ画像が、赤から青、緑までまんべんなく色を備えていたとしたら、その中で使う色はたかだか10種類くらいで、残りの200色以上の定義色が無駄になってしまいます。理想としては青系統の色で数十段階用意されていた方が、より自然に青空を表現できます。その点インデックスカラーではカラーマップに自由に色を当てはめることができるので、青空の画像のような例では8ビット、つまり256色でも後述のフルカラー画像と遜色ない表現が可能になります。

インデックスカラーは確かに少ないビット数での色表現に向いていますが、画像のビット深度が大きくなるにつれ、今度はカラーマップの定義部分が無視できないサイズになってきます。理屈では24ビットのビット深度をフルに使う場合、たとえ青空のみの画像でも1680万色弱を定義しなければなりません。そこでビット深度の大きい画像では、ドットあたりのビットデータを3等分し、rgb（赤、緑、青）それぞれの色を段階的に定義、その混色で色を作り出すという方法がとられます。この方法はダイレクトカラーと呼ばれ、特に24ビットをrgbの各色8ビットずつで分割し定義したものはフルカラー画像と呼ばれ、標準的なフォーマットになっています。

GIFとPNGの採用方式の違い

さて、GIFとPNGの比較に戻ります。GIFが通信環境の貧弱な時代に策定された形式であることは先述のとおりですが、そのため採用されている色表現の方式はインデックスカラーです。一方のPNGでは、GIFの代替フォーマットとして普及を狙ったという経緯から、8ビットのPNG-8でインデックスカラーを採用しています。PNGはGIFに比べてサイズが大きいというイメージがありますが、GIFと同じ256色に減色を行うPNG-8で保存すれば、サイズは多くの場合PNGの方が小さくなるようです。

PNGはまたダイレクトカラーもサポートします。ビット深度に応じてPNG-24、PNG-48などフォーマット名に接尾語がつきますが、よく使われるのはフルカラー画像のPNG-24およびPNG-32です。ただしソフトによってはこうした接尾語つきの呼び方を使わず、一様にPNGとして扱ったり、PNG-32をアルファチャンネル付き24ビットPNGと表現したりと呼称に揺れがあるので、WEB上の解説でも混乱が生じているという印象があります。今回のエントリでビット配列にまで踏み込んだ解説を行ったのは、そのあたりの混乱をある程度解消することを狙ったものですが、次回のエントリの透過の説明とあわせて、呼称の揺れに対してある程度のあたりをつける材料となってくれることを期待しています。

Tweet

WEB制作でよく使われる圧縮画像形式としては、写真などに高い圧縮率を誇るJPEG形式と、イラストなどの色の少ない画像に最適なGIF形式、PNG形式があります。JPEG形式とGIF、PNGとの使い分けは上に書いた通り、対象が使用色が少ない画像かどうかによって決定することができますが、ではGIF画像とPNG画像の使い分けはどのようにされるべきでしょうか？今回はそれについて纏めてみました。

まず、両形式が普及した背景を眺めてみます。GIF形式の登場は20年以上前で、当時通信速度の遅かったパソコン通信でサイズを減らして画像のやり取りをする必要性から普及しました。通信速度の制限に加え、当時のパソコンの処理速度的な問題から24bitフルカラー画像は扱いにくかったため、GIF画像には最大256色という制限が設けられています。

対するPNGは、GIF形式の特許問題が浮上した15年程前に開発が始められました。フルカラーに対応、透明度の設定が可能などGIFよりも多くの機能を持っていましたが、本格的な普及は2000年代前半以降になります。丁度この頃にGIFの特許の適用範囲が拡大され、一般のWEB制作者にも特許問題が無縁ではなくなってきたため、GIF利用者が流れるようにPNGに移行し、PNGはWEBの標準フォーマットとしての地位を確立するに至りました（現在ではGIFの特許が失効しているため、制作者がGIFを避ける風潮はなくなっています）。

以上が両形式の登場背景ですが、こうした登場背景の違いに由来して、次のような差異が存在します。

• PNGがフルカラーに対応しているのに対し、GIFは基本的には非対応
• GIFは初期のWEBブラウザでも対応している。PNGは1997年頃以降からボツボツと対応
• iモードのブラウザでは（おそらくフルカラー画像によるパケット増大を避けて）PNG不可

一方で両者は規格の性質にも多少の違いがあり、PNGはGIFの単純な上位互換というわけではなくなっています。たとえば、GIF形式は複数の画像をセットにして1ファイルにすることができます。この性質を利用して複数画像をパラパラ漫画のように使ったのがアニメーションGIFですが、PNGはアニメーションをサポートしておらず、機能拡張板であるMNGやAPNGといった規格が別に存在しています。

• PNGはアニメーションに対応していない

先ほど、GIF形式は基本的にはフルカラーに対応していないと書きましたが、このアニメーション機能を力技的に利用すれば、フルカラーの画像をつくり出すこともできます。フルカラーの画像を256色ずつ数枚の画像に分離して、短い時間間隔で表示する方法です。しかし、本当に初期のブラウザや携帯のブラウザは、そもそもアニメーションGIFに対応していなかったり、表示枚数に制限があったりするので、この技は万能ではないということにも注意する必要があります。

透明部分を持った画像の実現方法にも、興味深い違いを見て取ることができます。詳細については次のエントリに書きますが、後発の規格であるPNGの方が柔軟な方法をとっており、総じて次のようなことが言えます。

• 透明部分がある画像については、PNGを使っておいた方がなにかと便利である
• 透明PNGは古いブラウザでは対応していないが、力技的に対応させることが可能である

以上のような判断材料から、GIFとPNGの使い分けを考えればよいということになります。勿論それぞれをサイト上の適材適所で用いればよいのですが、複数の画像フォーマットが混在して画像リンクの設定ミスが起こってしまう（.gifの拡張子のところを.pngにしてしまうなど）ことを避けるために、どちらかの形式に統一しておくということもひとつの考え方です。

Tweet