KOJIKA17

最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか
(その画像形式でいいですか?)

デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。
画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか?
画像形式についてまとめてみます。

画像の種類

JPEG

インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。
ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。
特に小さくすると赤の部分でノイズが発生しやすい。

IE6~8(IE9は未確認)において#02050aというバグがあり、
JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。

上記の点を注意する必要がありますが、1670万色まで色を扱うことができるため、多くの色を必要とする写真や複雑なテクスチャなどに向いています。

GIF

インターネットの黎明期からJPEGと並んで、多くのブラウザにサポートされている画像形式です。
256色までの色を扱うことができ、透過、アニメーションなども行うことができます。
アイコンなど、色数を抑えた画像によく使用されています。

特許問題がありましたが、LZWの特許が失効し、現在では自由に扱える画像形式となっています。

PNG

GIFの特許問題からPNGフォーマットの開発が始められました。
非公式には"PNG is Not GIF"という意味が込められているとか。
GIFに代わる画像形式として、W3Cが開発、策定を行い、インターネット標準フォーマットとしてPNGを推奨しています。

PNG-8

「PNGはIE6で使えない」という先入観を持っている人が多いのか、消極的に使われていますが、PNG-8はInternet Explorer 5から対応しているため、現在では十分に使用できる画像形式です。
GIFと同じ、インデックスカラーモードの256色+1色透過を使うことができ、グラデーションなどを含む画像などに対し、GIFよりも圧縮率が高い場合が多いです。
インタレースPNGの場合は、GIFの方が圧縮率が高いですが、PNGの方が早い段階で全体像が見えます。

PNG-24(32)

JEPGと同様に1670万色までの色を扱うことができ、さらにPNG-32ではアルファチャンネルを使用することができます。
Photoshopでは、PNG-32をPNG-24とされているので勘違いしやすいです。以下、"PNG-24"と表記していますが、32ビットのことだと脳内変換してください。
Internet Explorer 7から対応しているため、現在ではまだ消極的な扱いです。
IE6に対応させるには、filterやJavaScriptを使用する手間がかかり、ファイルサイズも他の画像フォーマットに比べ、重くなる傾向にあります。
しかしアルファチャンネルを使用することができるので、注目される画像形式です。

SVG

XMLによって記述されたベクターデータです。
ベクターデータなので、画像の拡大、縮小を行っても描写の劣化が起きません。
レイヤー機能も持っていますが、レイヤー数が増えるとビットマップデータ(JPEG,GIF,PNGなど)よりも重くなる傾向にあります。
JavaScriptと併用すると、アニメーションも作成可能。SVGを使用したアニメーションではSVG女子などが話題になりました。
現在ではInternet Explorer 9以上, 最新のモダンブラウザで表示可能です。
私のブログでも、faviconにSVGを使用しています。

画像の検証

1つの画像でJPEG, GIF, PNG-8, PNG-24の検証をします。

写真

色数の多い画像では、JPEGが綺麗で軽い画像フォーマットになります。

単色(2色)

2色などの色数が極端に少ない場合は、GIFが最もファイル容量が小さくなります。

単色(4色)

ただし色数が増えることによって、PNG-8が最もファイル容量の小さくなることが多いです。
またPNG-24はJPEGよりもファイルサイズが大きくなることが多いですが、この場合はJPEGの画質60にしても、PNG-24の方が軽いケースもあります。

よくあるメニューボタン

単色のグラデーションにおいては、PNG-8が最も軽くなります。

透過PNGの利用

PNG-24は綺麗な透明の表現を与えることができます。
PNG-24を使用した例として下記サイトを参考に挙げます。

the drift

SCHOOL GIRL AKATHISIA

HAIR POCKET

IE6以下を切り捨てられるなら何も気にせず使用できますが、IE6に対応する場合はfilterやJavaScriptを使用する必要があります。
以下のものを使用するとIE6でもPNG-24が使用できます。
ただし、IE7.jsは様々な機能があるため重い印象を受けます。PNG-24のみ使用したい場合は、AlphaImageLoaderかDD_belatedPNGなどの透過PNGに特化したJavaScriptを使用することをお勧めします。

インデックスカラーで透過画像っぽくする

PNG-24だと上記のように一手間必要になり、しかもパフォーマンス的にも良いとは言えません。
不透明でなければ、私がよくやるGIFやPNG-8で透過画像っぽく見せる方法を紹介します。

このような画像で、背景画像と文字画像を別にしてコーディングする時、
通常の方法でスライスするとGIFやPNG-8ではギザギザが目立ってしまいます。

通常のスライスでコーディングしたサンプル

その場合は、マットカラー処理を行います。
マットカラー処理を行うと、インデックスカラーでも透明部分と画像部分の境目がスムーズになります。

Photoshopでのマットカラーの指定

あらかじめ背景色の中間色になる部分から色を取っておき、Web用に保存をします。

赤枠で囲まれた部分をクリックし、カラーピッカーを出します。

あらかじめ取っておいた背景画像の中間色を入力。

画像のプレビューや赤枠が変化します。
マットカラー処理が行えたので、その状態で画像を保存して下さい。

不透明には応用できませんが、PNG-24を使用しなくても、IE6にも対応した透過画像を作成することができます。

マットカラー処理したコーディングサンプル

HTMLやCSSだけでなく、画像フォーマットも徐々に進化しています。
古い慣習に囚われることなく、新しい画像フォーマットを取り入れては、いかがでしょうか?

このブログ記事を数日かけて書いていたら、
VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-さんの
PNGとGIFとJPEG...Web用画像の書き出し、どんな風に使い分けていますか?[2011年7月現在]と内容が一部かぶっちゃいました。
わざとじゃないです、ごめんなさい。