初心者が知っておくべきWebで使われる画像フォーマット「gif・jpeg・png」の特徴

画像データには様々な形式があります。Webでは主に次の３つの画像フォーマットが使われています。

• JPEG
• GIF
• PNG

Webサイトでこれ以外の画像フォーマットが使われることはほとんどありません。Webに限って言えばこの３種類の特徴と使われ方を押さえておけばOKです。では続いてこれら３種類のフォーマットの特徴を見ていきましょう。

JPEG形式の特徴

JPEGは(ジェイペグ)と読みます。デジタルカメラで撮影するとJPEG形式で写真データが保存されるので、比較的馴染みのある形式だと思います。画像ファイルに付けられる拡張子は一般にjpgが多いですが、jpegとする時もあります。

JPEGは写真のような階調の細かい色数の多い画像を表示するのに向いています。グラデーションも綺麗に表示することができます。デジカメで広く利用されている形式ですが、デジカメで撮った写真をそのままWebに載せてしまうのはあまり好ましくありません。

何故ならば、画質の良いデジタル写真はその分データのサイズも非常に大きくなります。その大きなサイズのデータをそのままをWebサイトに載せてしまうとネットに接続する環境によっては画像データの読み込みが完了するまでに非常に時間がかかってしまうのです。Webサイトは基本的に「アクセスした人がすぐに表示できるように出来るだけ軽く作る」のが大原則です。そのためWebサイトに載せる画像は出来るだけデータのサイズを小さくし、且つ綺麗に見えるようにPhotoshopやFireworksといった画像処理ソフトを用いて調整することが大切です。

JPEGは一般に「非可逆圧縮」の方式で圧縮されるので、一度圧縮してしまったデータは元に戻すことができません。圧縮する前の画像は必ず保存しておきましょう。JPEG形式のデータは圧縮率を高くするとデータサイズは小さくなりますが、そのぶん画像も荒くなります。画像サイズを小さくしつつ綺麗に見える(荒が目立たない)ように調整しましょう。

GIF形式の特徴

GIF形式は色数の少ない画像、具体的にはロゴやドット絵、グラデーションをあまり使っていないイラスト、線画などを表示するのに向いている形式です。GIFの呼び方は(ジフ)もしくは(ギフ)と呼ばれます。日本では(ジフ)のほうが一般的ですが海外では(ギフ)と呼ばれることも多いようです。

GIFは最高256色までしか扱えません。写真のように沢山の色を使っているデータをGIFで保存しようとすると256色までに色数が減らされてしまうので画像が劣化してしまいます。この特性からGIF形式は「写真を表示するのには向かない」「単色や色数の少ないデータを保存するのに向いている」と言われるのです。

GIF形式の特徴として１色を透明データに割り当てることができます。この透明化を上手に使ってあげると様々な表現をWeb上で行うことができます。またGIF形式は１つのファイルに複数の画像データを保存することができます。この特性を使ってパラパラ漫画のようにアニメーション(アニメーションGIF)を表示することが可能です。

PNGの特徴

PNGは(ピング)と呼び、W3Cが推奨している画像フォーマットでもあります。PNGはGIFの代替として開発された経緯があるため、GIFと同じような特徴も併せ持っています。主な特徴としては下記のようなものがあります

• 多くの場合GIFより圧縮率が(多少)高くなる
• 1677 万色(24 bit フルカラー)を扱える→JPEGの代用にもなる
• JPEGに比べて圧縮率は低い
• GIFと同じインデクスカラー PNG (最大 256 色)を扱える
• グレイスケール PNG (最大 65536 段階)を扱える
• アルファチャンネル(透明、半透明)データを含める事ができる

一昔前はPNGのブラウザ対応が追いついていなかったという事情がありましたが、現在はほとんどその心配もありません。ただしアルファチャンネル(透過データ)を含んだPNGはIE6が対応していないため使うのに注意を払う必要があります。(IE6やIE5.5でも透過PNGを使う場合はjavascriptなど特別な方法を使う必要が出てきます)

IE7以降ではアルファチャンネルPNGにも対応しているので、透過PNGも問題なく表示することができます。最近は透過PNGを効果的に使ったサイトが数多く出てきています。

8bit,24bit PNGの使いどころ

PNGはJPEGやGIFと違って保存する時に8bit(PNG-8)と24bit(PNG-24)を選択する事ができます。簡単に考えるならばPNG-8は256色のインデックスカラーを扱えるので、GIFと同じくロゴや一面塗りの画像、色数の少ないデータを保存する時に使うと良いでしょう。PNG-24はフルカラー表示の写真を保存する時に使うべきです。ただし可逆圧縮ができるPNGの特性からどうしても不可逆圧縮のJPEGより圧縮率が悪くなります。つまりファイルサイズがJPEGより大きくなってしまうということです。このため通常の写真を保存するにはJPEGを使った方がファイルサイズ的には良いでしょう。ただしJPEGは透明情報(アルファチャンネル)を扱えないため、透過情報を持った画像データを保存するには必然的にPNGを使うことになります。

(透過PNGについてはまた別エントリーで解説予定)

Web制作者はJPEG,GIF,PNGそれぞれの特性を理解した上で適切に画像を使えるように心がけたいですね。