> > GIF、JPG、PNG、画像フォーマットの違い

GIF、JPG、PNG、画像フォーマットの違い

小川貴史

このエントリーをはてなブックマークに追加

そういえば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」とかに変わってくれると助かりますね。

このエントリーをはてなブックマークに追加

読者のコメント

コメントを投稿

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

(HTMLタグは使用できません)

トラックバック

このエントリーのトラックバックURL
http://www.ibnet.ne.jp/mt/mt-tb.cgi/988

ホーム > Webデザイン > GIF、JPG、PNG、画像フォーマットの違い

このページの先頭へ