画像の種類と使い分け


画像の種類

画像にはいろいろ種類がありますが、Webで使われている主なものは次の通りです。

たとえばWindowsではこうした画像フォーマットよりも BMP なんかの方が一般的だと思うのですが、Webでなぜ BMP を使わないかというと、BMPは「無圧縮フォーマット」=「ファイルサイズがでかい」からです。特別な理由もなくWebでBMP画像を使ってる人は馬鹿と言い切ってもいいくらいです(いいすぎ)。上に挙げた画像フォーマットではどれもファイルサイズが小さくなります。

では順におおまかな特徴を見ていきましょう。

JPEG

ジェイペグと読みます。

他のフォーマットと大きく違うところは、人の眼につきにくい部分を捨ててデータを小さくしている点です。このフォーマットで一度圧縮してしまうと完全には元に戻せなくなるので「非可逆圧縮」と呼ばれます。

JPEGで扱えるのはフルカラー(約1600万色)画像とグレイスケール(白黒256階調)画像です。 適しているのは写真などです。「ロゴ」や「セル画調のイラスト」はあまり適してません。

圧縮のパラメータがいくつかあり、画質を優先するのか、画質を落としてファイルサイズを小さくするなどの調整ができますが、使うソフトウェアによって設定できる項目の数ややり方が違います。また仕上がりもソフトウェアによって違います。

ここでは Photoshop の「Web用に保存」を使って JPEGエンコードしました。パラメータは、 最適化:ON / 画質:20(低画質) / プログレッシブ:OFF / ぼかし:0 / ICCプロファイル:OFF / マット:なし です。

JPEG で保存すると必ず画質が劣化します。ここでは比較的低い画質にしたので荒れ具合がわかりやすいと思います。特に赤い色の部分が荒れやすいようです。

パラメータがごちゃごちゃとめんどくさそーですが、その通り。JPEGで保存する場合は画質などのパラメータを決めてやる必要があります。このあたりは別ページで説明しましょう。

GIF

ジフと読むのが一般的かもしれません。

インデックスカラー(256色まで)の画像を扱えます。そのうち1色を透明色として扱えます。また1つのファイルの中に複数の画像を持たせて、アニメーションにすることもできます。

256色までしか扱えないので、写真など256色を超えるものは減色しておく必要があります。ソフトウェアによっては保存するときに自動的に減色してくれるかもしれません。

ここでも Photoshop の「Web用に保存」を使って減色、保存しました。パラメータは、 Lossy:0 / 知覚的 / カラー:64 / ディザなし / マット:なし / インターレース:OFF / Webスナップ:0% です。

上に挙げたパラメータはほとんどが減色のためのものです。減色してGIFやPNGにする場合、画質は減色に使ったソフトウェアの性能に大きく左右されます。ファイルサイズも減色処理の結果(ドットの散らばり方など)に左右されます。PhotoshopやImageReadyの減色性能は、画質の点で評判があまりよくないようです

PNG

一般にピングと呼ばれてるみたいです。ping-pongがピングポングではなくピンポンなのと同様に、ピンと発音するのが本当らしいですが。

最大48ビットカラー(約281兆色)画像を扱えます。256階調のアルファチャンネルを持てるので、自然な感じの背景合成ができます。またインデックスカラーの画像であればたいがいGIFよりファイルサイズが小さくなります。

GIFが特許問題で自由に使うことができなくなったため、GIFに代わるものとして開発されたフォーマットです。「動画と静止画は別々にすべき」との思想からアニメーションはサポートしてません(アニメーションについては MNG というフォーマットが作られました)。

「線画・文字」は元々のフォトショップデータファイルから直接、他は先のGIFファイルからそれぞれ GIMPを使ってPNGに変換しました。 パラメータは、 インターレース:OFF / 背景色保存:OFF / ガンマ値保存:OFF / レイヤーオフセット保存:OFF / 解像度保存:OFF / 製作日時保存:OFF / 圧縮レベル:9 です。 GIFよりもファイルサイズが小さくなってます。が、インターレースをONにするとかなりサイズが大きくなってしまいます。

インターレース・プログレッシブ

通常の画像は、データが読み込まれるにつれ上から順に表示されていきます。これはデータが上から順に格納されているからなんです(下から格納されている BMP という変わりモノもあります)が、画像の全体像がわかるのは画像があらかた読み込まれてからとなります。そこで最初に荒く全体を表示しておいてデータが読み込まれるにつれて表示が細かくなってくる形式が インターレース / プログレッシブ です。

低速回線やでかいファイルの時など読み込みに時間がかかる場合に威力を発揮します。逆に高速回線やサイズが小さい場合には意味がありません。

インターレース(interlace = 飛び越し)とプログレッシブ(progressive = 漸進的)の用語の使い分けですが、JPEG ではプログレッシブ、GIF ではインターレースを使うのが一般的です(「プログレッシブJPEG」「インターレースGIF」)。PNG は…「インターレースPNG」ですかね(PNG仕様書では表示についてはプログレッシブ、データそのものについてはインターレースを使ってるようです)。

GIFの特許問題

GIFに使われている、データを圧縮する手法(アルゴリズム)(LZW 法)の特許を Unisys という会社が持っているのですが、GIFが広く普及してから「使うなら金を払え」と言い出したため問題になりました。詳しくは下記の各サイトをご覧ください。

参考
画像フォーマットと特許問題/GIF特許問題
GIFライセンス問題についてわかるページ
GIF のライセンスについて / わかりやすい PNG の話 for Web

この問題で WEB上では GIF の利用が大幅に減るのではないかと思われましたが、そうはなりませんでした。LZW法の特許はアメリカ合衆国では 2003年6月で失効しました。日本でも2004年6月に失効しました。

そのほかの画像フォーマット

さて上で紹介した画像フォーマットは「ビットマップグラフィクス」あるいは「ラスタグラフィクス」と呼ばれます。画面を方眼紙に例えると、一つ一つのマス目が何色になるかで画像を記録しています。これに対して「ベクター(ベクトル)グラフィクス」というのがあります。こちらは画像を点の座標や方程式として記録しているもので、拡大・縮小・変形などしても画像がぼけたり斜めの線がギザギザになったりしません。一方、ビットマップグラフィクスに比べて微妙な表現が苦手とされています。

このベクターグラフィクスでよく使われているのが Flash です。他にもXMLの一種である SVG というのもあります。両方ともアニメーション表現ができ、画像からリンクを張ることもできます。最近ではどちらとも作成対応ソフトが増えています。見るためには今のところ両者ともブラウザにプラグインが必要ですが、SVGの方は Firefox と Opera がプラグインなしで表示できるようになっています。

参考
Adobe Flash と SVG 各プラグイン、作成ソフト。
Scalable Vector Graphics (SVG) 策定したW3Cによるページ(英語)。
SVG 1.1 仕様書(日本語訳) 広瀬行夫さんによる日本語訳。

2007.03.26. http://rinrin.saiin.net/~aor/ もうパンツはかない