WEB画像について

WEBに使用できるGIF・JPEG・PNGの3種類があります。

WEB画像について

●GIF(Graphics Interchange Format) 拡張子.GIF

GIFに適した画像内容
GIFは最大8ビット(256色)までの色を扱うことのできる圧縮画像形式です。256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。

GIFのファイル圧縮の仕組み
例えば「0101010101」というデータや「0000011111」というデータがある場合、文字列の長さは共に10文字ですが、前者は「01が5回」というデータに、後者は「0が5回と1が5回」というデータに置き換えることができます。GIFのファイル圧縮ではこれと同じようなことが行われています。GIFは水平方向(横方向)に同じ色のピクセルが連続する箇所を、数値に置き換えることで圧縮しています。このため、縦ストライプと横ストライプの画像では横ストライプの画像の方がファイル容量が小さくなります。

GIFは透明色の指定ができる
GIFは画像に使われている色のうちの1色を指定して透明にすることができます。 WEB上に掲載する画像は全て輪郭が四角形ですが、 GIFの背景を透明にすることで見かけ上は四角形以外の輪郭の画像が可能となります。 尚、JPEGでは透明色の指定はできません。

GIFはアニメーションにできる
アニメーションにできることもGIFの長所の1つです。 GIFアニメはコマ画像をパラパラマンガの要領で表示させることで実現しています。 GIFアニメが他の動画形式に比べて優れているのは、 特別なプラグインを必要とせずより多くの環境で作者の意図通りに表示させることができる点です。

GIFのファイル容量を抑えるには
GIFのファイル容量を抑えるには、色数を減らすことです。 また、水平方向(横方向)に同じ色が連続するよう、1ピクセル単位で画像を修正するのも効果があります。

●JPEG (Joint Photograph Experts Group) 拡張子.jpg

JPEGに適した画像内容
GIFは最大8ビット(256色)までの色を扱うことのできる圧縮画像形式です。256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。

JPEGに適した画像内容
JPEGは圧縮画像形式ですが、24ビット(1670万色)まで扱うことができます。 このため、多くの色数を必要とする写真などの表現に向いています。 また、グラデーションのように色調が連続して変化する画像にはJPEGが適しています。 反対にアイコンやアニメ調の平坦なイラストなどをJPEGで保存するとにじんだように汚くなります。

JPEGのファイル圧縮の仕組み
JPEGのファイル圧縮では、「明るさの変化に比べ、色調の変化には比較的鈍感」という人間の目の性質を利用して、 色調変化の部分のデータを捨てることでファイル容量を小さくしています。 具体的には、画像を8×8ピクセルの正方形ブロックに分割して画像の変化の情報を抽出して、その一部を捨てています。 このため圧縮率を上げすぎると、ブロック単位で色が均一化されて画像がモザイク状に見えるブロックノイズや、 蚊の大群が飛んでいるように見えるモスキートノイズが現れるようになります。

JPEGは不可逆圧縮
GIFがデータを“整理する”ことで圧縮するのに対し、JPEGはデータを“捨てる”ことで圧縮しています。 圧縮で捨ててしまったデータは元に戻すことができないので、JPEG形式で圧縮率を上げて保存する際には、 必ず元画像のバックアップを残しておくようにしてください。

JPEGの圧縮率は見比べて決める
JPEGは圧縮率を上げるほどファイルサイズが小さくなりますが、トーンジャンプ(色抜け)が増えて画質は劣化していきます。 圧縮率を決める際には、同じ画像を異なる圧縮率で保存したものを見比べてみるのが確実で早道です。 尚、圧縮率の数値と圧縮の度合いの関係は、使用するソフトウェアによって異なります。

JPEGのファイル容量を抑えるには
JPEGでは色数を減らすことは意味がありません。 むしろ、反対色が隣接しているような画像では色数を増やして、連続して滑らかに変化するようにしてやると効果があります。

●PNG(Portable Network Graphic) 拡張子.PNG

PNGの長所
PNGは「ピング」と読みます。 PNGには、理論上最大で280兆色まで扱うことができる、 圧縮率が高く同じ画像のGIFファイルより10%〜30%程度ファイルサイズが小さくなる、 圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している、複数の透過色を指定できる... 等のいくつかの長所があります。

なぜPNGなのか
多くの長所を持つPNGですが、PNGを使用する最大のメリットは“ライセンス・フリー”であることです。 GIFに使われているLZW圧縮法は、1985年に米国Unisys社が特許を取得したものですが、 1994年になって突然LZW圧縮法の特許権使用料を要求するようになりました。 これをきっかけとしてGIFに替わるライセンス・フリーの画像形式としてPNGが開発されました。

PNGの短所
PNGにはいくつかの短所があります。 アニメーションができない、フルカラーにするとJPEGよりファイルサイズが大きくなるといったことが挙げられますが、 最大の短所は“ブラウザ側の対応が完全ではない”ということです。 PNGに対応しているのは、Windows版のInternet Explorer4.0以上、 Mac版のInternet Explorer5.0以上、Netscape Navigator4.04以上で、これより古いバージョンでは、PNGを表示できません。 PNGを表示できるブラウザもNetscape Navigator 4.xが透過PNGに対応していない等、 PNGの全ての機能に対応しているわけではありません。

PNGは使えるのか
PNGはW3C(World-Wide Web Consortium)が推奨する画像フォーマットであり、 今後標準的な画像形式になっていくといわれています。 しかし、PNGをサポートしているブラウザが完全に普及するまでは、GIFに頼らざるを得ないというのが実状のようです。サイトの性質にもよるでしょうが、PNGを採用するのはもうしばらく様子を見てからという傾向が主流のようです。