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