GIF、JPG、PNG、画像フォーマットの違い
- 2008年7月 8日 10:15
- Webデザイン
そういえばPNG使ってない
上記記事を読んで、ビクッとした。
この記事は「クライアントから電話口で『WebサイトでPNGを使うのは非常識です』と言われた。しかも曲がりなりにも『Webディレクタ』と言う肩書きを持ってる人から。ハッキリ言って理解できない。」といった内容です。
この記事に関しては「PNGが非常識って事はないよな。このWebディレクターさんは知識があまりないんだろうな。」という感想を持ちましたが、同時に「そういえば、PNGってアルファチャンネルPNG(PNG32)ぐらいにしか使ってないなぁ...、あれ?」とハタと思いました。あんまり他人事じゃなかった!w。
私がPNGを使わなかった理由は、以前(4〜5年前)PNGを利用したとき「重い」と感じ、「だったらJPGとGIFでいいや、FireworksならGIFの特許問題関係無いし、3フォーマットで比べるのもめんどいし」と思ったまま再考しなかったからです。...我ながらひどいですね。
画像フォーマットPNGとは?
そこで、今更ながら「画像フォーマットPNGとは?」ということで再考してみました。
PNGフォーマット種類
- PNG8(8ビットカラー) = 256色
- PNG24(24ビットカラー) = フルカラー
- PNG32(24ビットカラー + 8ビットアルファチャンネル) = フルカラー + アルファチャンネル
PNGの特徴
- PNGのアルファチャンネルはIE6未対応。
- 1ビット透過(GIFの透過と同レベル)ならば、IE6も対応している。
- PNGに直リンクをした場合、IE5だと「ダウンロードしますか?」とダイアログが出る。
- PNGはガンマ値を埋め込める。
- 線画と写真が混在している画像でもPNGはキレイ。
PNGとGIF比較
- 256色の場合、GIFよりPNGの方が軽くなる事が多い。
- インターレスにした場合、GIFの方が軽くなる。
- ピクセル数の少ない小さな画像の場合、GIFの方が軽くなる事が多い。
- アニメーションPNGは、MNG形式とAPNG形式がある。全然普及していない。
PNGとJPG比較
- PNGは可逆圧縮なので画像が劣化しない。
- PNGとJPGで同程度の品質にした場合、PNGの方がかなり重くなる。
PNG、GIF、JPGの使い分け場面
PNG、GIF、JPGを比較して出てきた事のまとめです。
- IE5以降ならPNGに対応しているので、ブラウザ互換は気にする必要なし。
- ある程度のピクセル数があり、256色までのだったらPNGで。
- 線画と写真が混在している画像をキレイに保ちたい場合はPNGで。
- IE6を対応ブラウザに含むのなら、PNGのアルファチャンネルは使わない。
(使いたい場合はIE PNG Fix等を利用。) - i-modeに対応する場合は、PNGを使わない。(i-modeが対応していない)
- アニメーションさせたい場合は、普及しているアニメーションGIFで。
- 場合によるが、写真はJPGで。
PNGフォーマット再考してみて
ということで、再考してみた結論としては「三者三様の画像フォーマットを、条件によって使い分けるのが吉」といったところでしょうか。PCの場合なら全部PNGでも出来ますが、それはそれで乱暴すぎますし。
まあ今まで使っていなかった分、PNGが優れている部分に関しては積極的に利用しようと思います。愚かだった昨日までの自分よ、さようなら!
余談ですが、Fireworksファイルの拡張子「.png」と間違えやすいので、Fireworksの拡張子が「.fwd」とかに変わってくれると助かりますね。
- このエントリーのトラックバックURL
- http://www.ibnet.ne.jp/mt/mt-tb.cgi/988