PNG8とPNG24とPNG32で書き出しの違い

こんにちは、@cappeeです。

最近はGIFやJPEGではなく背景透過がキレイにできるPNGで書き出すほうが多くなってきましたね。

IEのバージョンの自動更新がだいぶ影響してます。

改めてPNG8とPNG24とPNG32の違いを調べてみました。

PNG-8

8ビットカラー(256色)。
透明可。
IE6でもjsなどでの対応なく透過できるけど、グラデを使用してて「すべての色を割り付け」が対応できなかった場合はPNG32にする必要あり。

PNG-24

24ビットカラー(フルカラー)。
透明不可。
透明にしない場合はPNG32よりPNG24の方が少し容量を抑えて書き出すことができる。

PNG-32

24ビットカラー(フルカラー)。
透明可。
IE6で透過を実現したい場合はjsなどの対応が必要だが、昨今はIEの自動アップデートがあるので透過できなくても問題なく表示されていれば問題ないと判断するケース多し。プログレッシブ・エンハンスメントというやつ。

書き出し方やコーディングの対応もブラウザが進化したことによって多少楽になってきましたね~。

でもPNGはやっぱり容量が気になるので、PNGの容量を圧縮してくれる無料の「PNGGauntlet」を使ってます。

PNG以外の形式も含め書き出し方については下記が参考になります。

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか?

Pocket
article clipper PNG8とPNG24とPNG32で書き出しの違い