インターネット上での画像
画像には色々な形式のものがありますが、中でもインターネットでよく使われるのが
JPG
と
GIF
で、ホームページの画像の大半はこの2つの形式を使用しています。そこで、このコーナではこの2種類の画像形式について少し説明したいと思います。
インタネット上で画像を使用する場合には、画像の情報量をできるだけ少なくし、コンピュータ資源(Webサーバ容量)を節約すると共に、多くのホームページ利用者のために、できるだけ通信回線に負荷をかけないようにすることが最小限守られるべきマナーであると思います。それでいて、できるだけ美しく鮮明でダイナミックな画像作りをしたいものです。この相反する事柄をうまくバランスをとって有効な画像利用をするには、これらの画像形式の特徴を充分理解しておく必要があります。
GIFとJPGの違いについて
GIF 形式
GIF(Graphics Interchange Format)形式は、米国の CompuServe社が開発したカラー画像のファイル形式で、もともとネットワーク内で普及していたフォーマットです。現在インターネットではほとんどのブラウザで標準的に使用されています。
GIFファイルは基本的には256色のパレット表示をしています。『画像の深度』でも説明しましたように、256色のインデックスカラー及び256階調のグレースケールの画像を対象としています。従って、フルカラーの画像をGIFフォーマットにするには2600万色から256色に減色する必要があります。またGIFは256色以内のロゴやイラストに適しており、写真等には向いていません。(写真でも256色でよければGIFを使用することができますが)
GIFフォーマットは、現在GIF89aのバージョンになっており、3種類のタイプがあります。
(1)ノンインターレスGIF
ノンインターレスGIFは、普通のGIFフォーマットのことです。特徴としては画像を表示する時、上部から順番に表示していきます。
<下図(例1)を参照>
(2)インターレスGIF
インターレスGIFは、最初は間引いた全体の画像を表示し、順次詳細な画像を表示する方法です。画像を表示する時、最初に全体がぼやっと表示されて、次に次第に鮮明な画像が表示されていきます。
<下図(例2)を参照>
(3)透明GIF(トランスペアレントGIF)
透明GIFは、画像のバック(背景)の部分を透明にして、画像だけを貼り付ける方法です。ホームページの背景に色や画像を使用している時、この透明GIFを貼り付けると、その背景や画像の中に、透明部分以外の画像が自然な形で張り付き一体感を出せるようになります。よく素材集等に『透明処理済み画像』と表示されているのはこの方式で保存された画像ということです。
<下図(例3)を参照>
この3種類の他に、最近は(2)のインターレスGIFの変形版として、
マルチプルイメージGIF
というものがあります。これはいくつかのGIFファイルを1つのGIFファイルとして繋いで、ぱらぱら漫画のように、こま送りすることによって、アニメーションのように表示させる技術で、アニメーションGIFとも言います。
<下図(例4)を参照>
JPEG 形式
JPEG(Joint Photograph Experts Group)も、GIFと同じように現在インターネットでほとんどのブラウザで標準的に使用されています。GIFが256色の画像を扱うのに対し、JPEGはフルカラーの画像を圧縮して表示するための形式であり、ISOとCCITTによって標準化されています。圧縮されたファイルながら高い画像の質を保つことができます。従って、写真など自然画の画像を圧縮して保存するのに向いています。
データ圧縮のアルゴリズムはGIFよりも優れたものを採用しており、画像保管時はGIFよりもかなり少ないファイルサイズで保管ができます。ただ、アイコン・タイトル画像等の小さい画像では逆にGIFよりJPEGの方がサイズが大きくなる場合もあります。従って、大雑把に言いますと小さい画像はGIF、大きい画像はJPEGを使用すると良いでしょう。又、GIFは可逆性であるのに対し、JPEGは不可逆性であるため、繰り返してJPEGを使用すると画像は劣化してきます。又JPEGの圧縮率は自由に設定することができますので、使用時は圧縮率と画像品質のバランスを考える必要があります。
GIFのフォーマットが多様であったのに比べ、JPEGには
通常のJPEG
と
プログレッシブJPEG
(GIFでいうインターレスGIF)の2つしかありません。(透明処理をしたり、アニメーションはできません)
<下図(例1)(例2)を参照>
(例1)ノンインターレスGIF(通常のJPEGも同様)
(例2)インターレスGIF(プログレッシブJPEGも同様)
(例3)透明処理をしたGIF
透明処理をして 白を透明処理
いないGIF したGIF
(例4)アニメーションGIF(マルチプルイメージ)