ホームページの画像ファイル Mac Clinic Tips:

ホームページの画像ファイル形式

作成:1998年1月24日


ホームページではHTMLの習得と並んで、画像ファイルを同うまく扱うかが重要です。ホームページの画像ファイルはGIFかJPEGにして下さいとマニュアルに書いてあるので、ただ単にそれにしたがっているというユーザーが大半でしょう。実は画像ファイルには他にも多くの種類があり、Netscapeでもプラグインを使えば新しいフォーマットでも表示することができます。例えば、最近話題のFlashPixなどもそうですが、現実にはブラウザー以外にもサーバーでも特別な対応が必要であり、普及するまでにはまだ時間がかかるでしょう。
今回は、なぜGIFとJPEGがホームページ用の画像ファイルとして普及したのかを説明します。

インターネットの発達

現在インターネットがこれだけ普及するようになったのは、WWWという仕組みが開発され、ホームページで画像が表示できるようになったのが一番の要因だが、その歴史はまだ4年ほどでしかない。そもそもコンピューターはテキスト中心で発達し、画像を扱うのは得意ではなかった。さらに、画像ファイルはサイズが大きく、電話回線のようなネットワークで転送をするのには向いていなかった。パソコン通信ではもちろんのこと、インターネットでも90年代の初めまではテキストしか扱えなかった。ところが、1993年にイリノイ大学NCSAでモザイクというWWWブラウザーが開発され、オンラインでイメージが表示できるようになった。このモザイクを開発したマーク・アンダーセンは後にネットスケープ社の設立に参画し、Netscape Navigatorを生み出した。これにより、インターネットは大ブームとなったのだが、ブラウザー以外のもいくつかの技術革新がこれを可能にしたのだ。

1)画像ファイル形式の開発
2)高速モデムやISDNの発達によるネットワークの高速化
3)パソコンの画像処理能力向上

今回は、このなかで、画像ファイル形式に的を絞って話をしょう。

ホームページに適した画像ファイル形式

ホームページ用の画像として必要な条件をまとめてみると次のようになるだろう。

1)イラストでも写真でも一つの形式で表現できること
2)Mac、Winodws、Unix等、システムを問わないこと
>3)表示するために特別なハードウェアを必要せずに、高速に表示できること
4)Netscape NavigatorやInternet Explorer等、ソフトに依存しないこと
5)ファイルサイズがなるべく小さいこと
6)オリジナルの画質をなるべく損ねないもの

画像データ形式には大別すると、ベクターデータとビットマップデータがあるが、1)から4)の条件を満たせるのはビットマップデータだけだ。ビットマップデータは画像を点(ビクセル)の集まりで表現するもので、パソコンでも最も一般的な画像データ形式だ。解像度を上げれば写真のような画像でも美しく印刷することが可能だ。しかし、画像データが非常に大きく、ファイルサイズも大きくなるという欠点がある。例えば、サービス版サイズの写真をフルカラーのTIFF形式で保存するとファイルサイズは250KB程になる。一般のユーザーがアナログ回線でPPP接続をする場合、通信速度は1〜4KB/秒程度であるから、TIFF形式の画像をそのまま転送すると60〜250秒もかかることになる。ホームページで写真を一枚表示するのにこれだけの時間がかかっていたのでは、とても実用にならない。素早く表示するためには、ファイルサイズを小さくして転送にかかる時間を短くしなければならない。

そのために開発されたのが、インターネット用の画像ファイル形式だ。

画像ファイルサイズを小さくする方法

画像ファイルを小さくするには、@減色やA画像サイズの縮小によってデータのサイズそのものを小さくする方法と、Bデータの圧縮によりファイルになる時点でサイズを小さくする方法がある。(*1)

*1 画像データと画像ファイル

グラフィックソフトで画像を開き、その情報を見てみると「メモリサイズ」と「ファイルサイズ」の二つがあることに気づく。ここでは、Graphic Converter(日本語パッチ版)の「情報」を見てみよう。

GC's Information

「データサイズ」というのは、画像がモニタ上で表示されるときに消費されるメモリの量で、これが本来の画像の大きさだ。しかし、HDに保存するときは、ファイルの形をとらなければならない。ファイルにはデータ以外の情報が加わる。Macの場合はさらにリソースフォークと呼ばれる、特有の情報が加わる。Graphic Converterの「ファイルサイズ」は純粋なファイルサイズで、リソースフォークは含まないものだ。しかし、画像ファイルの場合は、必ず何らかの形で、データ部分が圧縮されるので、ファイルサイズの方が小さくなるのが一般的だ。

@減色

ホームページで表示される画像はビットマップ形式と呼ばれるタイプの画像であるが、これはピクセル(画素)と呼ばれる小さな点の集まりで成り立っている。それぞれのピクセルにはカラー情報が含まれる。フルカラー(1600万色)を表示するには1ピクセルあたり24ビット(赤緑青色それぞれに8ビットづつ)が必要になるため、先の写真の例でいうと250KBものファイルサイズになる(*2)。

*2 画像データサイズの計算方法

モニタの解像度は72dpi(dot per inche)と決まっているので、スキャナで取り込むときも解像度は72dpiになる。ドットとピクセルは同じもので、72dpiとは1インチ(25mm)に72ピクセルあるということだ。
サービス版サイズが115mmx80mmだとした場合、これをインチに換算すると、4.6inx3.2in=14.72となる。これに72x72をかけると76,308ピクセルとなる。
フルカラーの場合は、1ピクセルが24ビットであるから、これをかけると1,831,392ビットとなる。普通データサイズはバイト(1バイト=8ビット)で計算するので、これを8で割ると、228,924バイト=229KBとなる。
単純にこれをファイルにした場合は、純粋な画像データ以外の情報も加わるので、250KB程度になる。

減色とはこの色数を減らすことだ。一般には16ビット(32,000色)、8ビット(256色)、4ビット(16色)、2ビット(4色)、1ビット(白黒)が使われる。理論的にはデータサイズはそれぞれ、2/3、1/3、1/6、1/4、1/24になる。

しかし単純に色数を減らしたのでは、写真のように色数の多いものは画質が悪くなってしまう。そのため、エラー拡散、ディザ、メゾティメントなどの手法により、少ない色を隣り合せることで人間の目には混合色があるような錯覚を起こさせる工夫をする必要がある。
最近ではMCICR(モンテカルロ法)といって、画像全体の色の再配置を行うことで256色以下でもオリジナルとほとんど変わらない画質を実現する技術も生まれている。これはアメリカのロスアラモス国立研究所が開発したものだが、それを使えるソフトとしては、マーキュリー社のPlanet Colorとして製品化されている他、Fast Edieというフリーウェアで作成、表示を確かめることが出来る。

A画像サイズの縮小

画像の物理的サイズを小さくすれば画像データサイズが小さくなる。そのため、ホームページで画像を表示する場合、まずはサムネールという小さな画像を表示し、ユーザーの指示があったときだけ大きな画像を表示するという手法をとることがある。これをさらに発展させ、複数のサイズの画像をファイルとしてもち、ホームページでは低解像度のもの、印刷用は高解像度のものと使い分けれるようにしたのが最近話題のFlashPix形式だ。

B圧縮

ファイルサイズを小さくするのに最も有効な方法はファイルの圧縮である。圧縮というと一般にはインターネットで配付されるシェアウェアのようなものを想像するだろうが、画像ファイルの圧縮も原理は同じである。しかし、画像ファイルの場合は、圧縮はあるファイル形式で保存するときに自動的に行われ、解凍はそのファイルを読み込むときに自動的に行われる。現実には、グラフィックソフトやブラウザーの中で圧縮と解凍の作業が行われているのだが、それが気がつかないほど速くできるものがよい圧縮方式だと言える。

画像ファイルの圧縮方式として、現在一般的なのは、ランレングス(RLE)圧縮法、LZW圧縮法、JPEG圧縮法であり、これらを使ったファイル形式としてはTIFF、PICT、GIF、JPEGがあるが、圧縮効率の観点から、現在のところホームページではGIFとJPEGの二つがサポートされている。

ランレングス(RLE)圧縮法
テキスト状態でAAAAZZDDDDDというような文字列があった場合、3A2Z5Dと表記すれば11文字が6文字に減る。非常に単純な圧縮方法で、Sutffitのような圧縮法でも使われている。同じ色が多く使われているようなイラスト等に効果がある。TIFFやPICTの圧縮オプションの一つとなっている。
これはロスレス(無損失、可逆)圧縮法のひとつであり、オリジナルの通りに復元されるが、圧縮率はそれほど高くない。

LZW圧縮法
1984年に開発された圧縮法で、Lempel、Ziv、Welchの3人の開発者の名前をとって命名されている。これもデータ損失のないロスレス圧縮法の一つで、RLEに比べると、画像データのパターンを辞書として登録しそれを記号化するために、圧縮効率が高くなる。
この圧縮法はTIFF形式、ならびにGIF形式のファイルで使用されている。
この圧縮法はユニシス社の特許となっており、使用が制限されるという問題がある。

JPEG圧縮法
これはロッシー(損失型、不可逆)圧縮法と呼ばれ、オリジナルデータの情報の一部が削除されるため、一旦圧縮をすると2度とオリジナルには戻らなくなる。
もともとコンピュータの画像はアナログがデジタルかされた時点でかなりのデータが損なわれており、それならば、ぎりぎりのところまでカラーデータを落としていくことにより圧縮を図るアイデアだ。その基本手法は分離型コサイン変換(DCT)と呼ばれるもので、画像データ全体の色の分布にコサインカーブをかけ、最大部分と最小部分を削除する。削除の範囲は変動させることができ、削除範囲を大きくすれば圧縮率は高くなるが、画質は悪くなる。
この圧縮法は写真のように複雑なカラー画像の圧縮に向いているが、イラストのような平たんな画像の圧縮には向いていない。またこの圧縮法は処理が複雑で、ソフトだけで処理すると時間がかかる。 この圧縮法を用いているのはQuickTime、PICT、そしてJPEGファイル形式である。また最近では、デジタルカメラのデータ圧縮としても使われている。<br>さらに、

GIFファイル形式

GIF(ジフ Graphic Interchange File)は1987年に米国のパソコン通信会社CompuServeが開発したものだ。当初はパソコン通信で画像ファイルを効率良く転送できるようにと開発されたものだが、その目的はインターネットでも同じだったので、ホームページ用の画像形式として最初に採用された。

GIFファイルの特徴は、色数を256色以下に限定していることと、LZW法という圧縮法を採用していることだ。まず減色することでデータサイズを小さくし、さらに圧縮によりファイルサイズを小さくしている。

はLZW圧縮法隣り合ったピクセルの色の変化をデータとする方式のため、イラストのような同色面が多い画像に向いている。圧縮によるデータ損失がない方式(ロスレス圧縮)であるが、写真の場合にはまず減色した時点で大幅にデータが失われる上に、色の変化が多い画像では圧縮率も低くなる。

イラストをスキャナで取り込んだ場合、一見するとフラットな画像のように見えるが、実は非常にノイズ(画像の小さな点)があり、この場合はGIFファイルの圧縮率は悪くなる。またシェードやグラデーションを使ったイラストもGIFでは圧縮率が悪い。

87年に開発されたものをGIF87a、89年に開発されたGIF89aというが、GIF89aでは一つのファイルの中に複数の画像データをいれるマルチデータの機能が折り込まれている。これを利用すると、背景の透明化、アニメーション、インターレース表示が可能になる。最新のNetscapeやIE、Graphic Converterは対応しているが、すべてのグラフィックソフトが対応しているわけではない。また、これらのファイルを作るには、それぞれ専用のソフトが必要な場合がある。

JPEGファイル形式

GIFが開発された1984年に、ISO(国際標準化機構)はISDNで画像や動画のような大きなファイルを効率良く送信するための圧縮技術の開発に乗り出した。そのチームをPEG(Picture Expert Group)といった。同じ時期、CCITT(国際電気通信連合)はFAX(G3という転送方式を使っている)でカラー画像やグレースケール画僧を効率良く送る方式の開発を開始した。双方は非常ににた目的を持っていたので、一緒に開発をしたほうがよいということになり、合同のチームとなった。そのためPEGに合同の意味を表すJointをつけ、JPEGというチーム名になった。
このチームは 1987年に画期的な圧縮方法ならびに画像ファイル形式を開発した。このチームの名前をそのままとって、JPEG圧縮法、JPEG形式と呼ぶようになった。

JPEG圧縮法はロッシー(損失型)圧縮法である。この方法では圧縮時にデータの一部が失われ、解凍してももとのデータには戻らない。これは画像データが、プログラムのようなものとは異なり、一部のデータが失われても画像の本質は失われないという特徴をうまく活かしたものだ。

パソコンでフルカラーというと1600万色をいうが、現実に人間の目が同時に認識できる色数は1万色程度でしかない。また人間の目には隣り合った色の差は認識しやすいが、離れた点の色の差は認識しにくいという性質がある。JPEG圧縮ではこれらの人間の目の性質を利用して、気がつかない範囲で一部のデータを削除したり、データの再配置を行うことで圧縮率を高める工夫がされている。

JPEG圧縮は色の変化の多い写真のような画像に向いており、非常に圧縮効率が高い。

また、圧縮率を無段階に変化させることができるという特徴もある。Graphi Converterではこれをリアルタイムに見ることが出来る。Photoshopのプラグインでもこれが可能がものがある。多くのグラフィックソフトは「低」「標準」「高」「最高」の4レベルぐらいに固定している。デジタルカメラもTIFFではメディアに入りきれないので、ほとんどの機種がJPEGで直接圧縮したものを記録する方式をとっている。「エコノミー」「標準」「ファイン」というようなオプションはこの圧縮率の違いを示している。

ただ、JPEGファイルは、GIFファイルに比べると圧縮・解凍のメカニズムが複雑であり、ブラウザでの表示でも若干時間がかかるという欠点がある。

しかし、ホームページで写真が主要な画像になってくると、JPEGのニーズが高くなり、現在ではほぼ全てのブラウザーがJPEGに対応している。

ファイル形式による画像データと画像ファイルサイズの違い

実際に、いくつかのファイル形式で同じ画像(写真)を保存した場合のデータサイズ、ファイルサイズを見てみよう。

ファイル形式 ピクセル深度 圧縮率仕様色数データ量ファイル量
TIFF(標準 24ビット1:1 2242色261K196K
TIFF(LZW圧縮) 24ビット 1:1 2242色261K159K
GIF(標準) 8ビット1:2 231色65K37K
GIF(ディザ処理) 8ビット1:3 43色65K16K
JPEG(最高画質) 24ビット 1:82281色261K 30K
JPEG(標準画質) 24ビット1:422247色 261K 6K
JPEG(最低画質) 24ビット1:129510色261K2K

何も圧縮しないTIFF形式に比べ、GIFで最高19%に、JPEGでは何と1%にまで圧縮されているのが分かる。GIFでもオプションの処理によって圧縮率がかなり異なり、最高画質のJPEGよりも高い圧縮を達成できることも分かる。JPEGの場合は、画質を下げれば圧縮率は驚異的に上がるが、画質の劣化も大きい。サムネールのような小さな画像の場合は、最低画質でも見ることができる。

●HD上の画像ファイルのサイズを小さくする方法
Graphic Converterの「情報」に表示される「ファイルサイズ」がHDに保存されるファイルの大きさだと述べたが、実際にそのファイルをファインダで見ると、もっとサイズが大きいのがわかる。これはMacのファイルには「リソースフォーク」というMac特有の情報が加わるからである。File Buddyで画像ファイルを開いてみると、リソースフォークとデータフォークがあることが分かる。Graphic Converterの「ファイルサイズ」は実は「データフォーク」のサイズである。
しかし、ホームページはUNIXの世界であるため、リソースフォークのあるファイルを読むことは出来ない。Fetchで画像ファイルを送るとき、「Raw Data」にするのはそのためだ。反対に、ホームページからダウンロードした画像ファイルは「データフォーク」しかもっていない。
リソースフォークは意外とメモリを食うので、ホームページ用の画像は「データフォーク」だけのファイルとして保存すればかなりディスクスペースを節約することが出来る。この方法として、一番のお奨めはGraphic Converterを使うことだ。環境設定の「保存」設定で「リソースフォークを加える」のチェックを外した状態で、「まとめて変換」をすれば、全てのファイルが「データフォーク」だけのふぃあるに変わる。是非とも試してみて欲しい。

今後の画像ファイル形式

ISDN等高速の通信環境を持たなければホームページを快適に表示できないというのはちょっとおかしい。本来は、ホームページを作成する作者が、画像ファイルはできる限り小さくする工夫をすべきだ。GIFでもJPEGでも適当でよいというものではない。同じ画像であっても、GIFとJPEGではファイルサイズがかなり異なる。GIFの場合は減色が大きな効果をもたらす。JPEGの場合は圧縮率が大きく効く。いろいろ試してみて画質とファイルサイズが最適なものを選択する努力をすべきだ。PageMillなどではPICTファイルでも自動的にGIF形式に変換されるが、こうした簡便な方法は推奨されるできではない。

そうはいっても、一般のユーザーにとって最適なファイル形式の選択は難しい。その意味でも、GIFもJPEGも最終的な解決法ではないのである。FlashPixのような新しい形式も生まれてきている。今後はもっと画期的な画像ファイルが生まれるかも知れない。


全体、一部を問わず、無断転載を禁ず
(C)1998 Harry Ono