第１０回　画像形式について考える

　久しぶりの今回は、Fireworksの機能紹介は一休みして、制作した画像をWebページで使用するために、選択すべき画像形式について考えてみます。

Webグラフィックスの作成

Webグラフィックスを作成する場合、GIFまたはJPEGで保存するのが一般的です。PNGについても、Webブラウザによってはプラグインで対応できる場合がありますが、現状ではWebグラフィックスの画像形式としては、使用しないほうが無難でしょう。

表１ GIFとJPEGの特徴
	GIF	JPEG
名称	Graphics Interchange Format	Joint Photographic Expert Group
ビット深度	８ビット（２５６色）	２４ビット（フルカラー）
圧縮方法	１ライン毎に同じ色やパターンが連続している部分を抽出して圧縮を行う。	連続した階調を持つ部分を破棄して圧縮を行う。
特徴	圧縮で画質が劣化しない透明化設定が可能	圧縮後の画質劣化を調節可能
適した画像	アニメ画像、ロゴなど同じ色が連続する画像	写真、グラデーションや複雑なテクスチャを持つ画像

一言で言うなら、「GIFはシンプルな画像、JPEGは凝った画像や写真」に適していると言えるでしょう。

同じ写真をFireworksでアダプティブGIFとJPEG画質80%で保存してみました。

	アダプティブGIF ファイルサイズ：53248バイト
	JPEG画質80% ファイルサイズ：24576バイト

　レタッチなどはしていないので、ややコントラスト等に難がありますが、ほぼ同等の画質でJPEGのファイルサイズがGIFの半分以下になっています。前述のように、写真や複雑な画像の場合、JPEGの方がほぼ同等の品質で圧倒的にファイルサイズが小さくなります。

　一方のGIFですが、Shockwaveなどのプラグインを使用することなくアニメーションを作成できたり、画像上の任意の色を透明に設定することにより、壁紙や背景色を指定しているページで効果的に使用することができます。

　几帳面な人は(^^)自分のページで使用する画像形式を統一したくなったりするかもしれませんが、これらの特性を理解して、画像に種類によって使い分けた方が効果的なページを作成できるでしょう。

Webグラフィックスの作成