WebサイトでPNGを使うのは非常識！？

誤解を与えるタイトルにしてしまったので、訂正しました。ごめんなさい。

こんにちは@poyosiです。PNGを使いまくってコーディングしてますか？

会社から「WebサイトでPNGを使うのはNGだからGIFにしとけ」とか言われたことないですか？
そうではなくても、「なんとなくPNG使うくらいならGIFにしといたほうが安心」という方もいるのではないでしょうか？

今日は画像ファイルフォーマットであるPNGをWebサイトに使うのはどうなの？というお話をしたいと思います。

WebサイトでPNGを使ってもいいんじゃない？

「WebサイトでPNGを使うのは非常識だろ」という事を言われたのですが、仕様書など特に取り決めがない限りでは、それは違うんじゃないかなと思っています。
私はWebサイトでPNGが使われることについては「どんどん使うべき！」と思っています。

そもそもPNGを使わないほうがよいと言われた理由

PNGを使わない方がよいと言われた理由として主に以下の点が挙げられます。

ガンマ補正用データが埋め込めるため、正しく使わないとブラウザ間で色がずれる。
モバイルサイトなどで対応してない端末が多い。
Netscape Navigator3以前で表示できない。
Internet Explorer4以前で表示できない。
Internet Explorer6では透過PNGのアルファチャンネルを表示できない。

主に上記理由でPNGを避ける傾向にありましたが、現状ではほぼ100％のブラウザで表示することが可能です。
また、透過PNGがネックになっていたInternet Explorer6も最近ではシェアがどんどん少なくなってきていますし、現在ではInternet Explorer7以降を対象としたWebサイトも増えてきているので状況次第では使用しても問題ないと考えます。

意外とPNGで書きだすのはマイナーと思われている部分もあるようなので、それぞれGIFとPNGの特徴を見て使い所を見極めましょう。

GIFについて

フルスペルはGraphics Interchange Format（グラフィックス・インターチェンジ・フォーマット）
ジフと発音する。
最大色数256色（8bit）まで保存できる。
単色、またはシンプルなグラデーションを書きだすのに優れている。
JPEGの様な色数の多い画像書き出しには不向き。
簡単なアニメーションが作れる。
圧縮と展開が早い（気付けないレベル）
超旧式のブラウザやモバイル端末でも表示することができる。

PNGについて

フルスペルはPortable Network Graphics（ポータブル・ネットワーク・グラフィックス）
ピングと発音する。
最大色数約280兆色（48bit）まで保存できる。Webで使用するのは通常16,777,216色+アルファチャンネル（24bit+8bit）まで。
単色、または複雑なグラデーションを軽量に書き出せる。（ほとんどの場合でGIFよりも軽量）
JPEGの様な色数の多い画像書き出しには不向き。
圧縮と展開が遅い（気付けないレベル）
簡単なアニメーションが作れる。（アニメーションPNGについては一部ブラウザのみ対応）
テキストなどのメタデータやガンマ補正用のパラメータを付加できる。
超旧式のブラウザやモバイル端末だと表示できない。（シェアレベルでみると問題ない）
GIFに代わる次世代の画像ファイルフォーマット。
ImageOptimなどで更にファイルサイズを圧縮できる。

使うべきところではPNGを使っていきましょう。

それぞれGIFとPNGの特徴を見ても、PNG方が優れていることが分かります。
「なんとなくGIFで書きだしておこう」と思っていた方は、正しい知識を元に、適材適所使い所を見極めて使えばPNGは非常に圧縮率も高く（条件による）便利な画像フォーマットです。
「PNGをWebサイトで使うのは非常識だろ」というのはかなり昔の話なので、現状ではかなりメジャーで活躍してる画像フォーマットですから、条件次第ではどんどん使っていきましょう。

追記：PNGは16,777,216色+アルファチャンネル（24bit+8bit）、と追記修正しました。