n2p blog
キャンペーンやSNSの
“ためになる”情報を
執筆しています。
PNG形式はフルカラーで透過もできちゃうスグレモノ。昔の環境では注意。
公開日:2013/08/01
- フルカラーに設定すれば保存時に劣化しない
- 透明色の透明具合を調節できる
- bit数を元画像と揃えれば、劣化することなく保存できる
PNG形式はいろいろできちゃうスグレモノ！
でも昔の環境では問題を起こすこともあります。
その特徴を見ていきましょう！
フルカラーに設定すれば、劣化することなく保存できる
PSDやBMP、EPSの未圧縮のフルカラーの画像をPNGに書きだしても画質が劣化しません！
レイヤーなどの情報は失われます。
PNGは保存できる色数を選ぶことができます。
多く使われているのは、256色とフルカラー1670万色、もしくはフルカラー1670万色に半透明の指定を足したものです。
理論上は280兆色（48bit）まで保存できます。一般的には使いませんけどね。
ですので、人に画像を渡す時保存形式に迷ったらとりあえずPNGのフルカラーで保存、と覚えておいて下さい。
透明色の透明具合が調節できる
透明色の透明具合が調節できます。
下記の画像をご覧ください。
全て同じ色（#000000）ですが、
透明度を変えることで濃淡をつけています。
では同じ画像を市松模様の上に載せてみましょう。
たしかに、半透明になっていますね！
Photoshopのレイヤー効果のグラデーションなども、透過した状態で再現して保存できます。
次は、文字の画像をPNGとGIFで比較してみます。
PNG 3.2KB
GIF 2.7KB
tの文字の斜めの部分に注目すると、PNGの方が滑らかな文字になっていることが確認できますね。
環境に余裕がある場合、透過画像はPNG形式で保存した方がキレイです！
IE8以前の半透明PNGは透明度を変更しないこと！
そんな便利なPNG形式ですが、IE8以前で落とし穴があります。
IE8以前の半透明PNGは透明度を変更しない
テスト用のサンプルを見てみましょう。
マウスをコップに乗せると、水の一部が半透明になり、量が減っていきます。
透明になっていく画像は、透過pngです。
しかしこれを、IE8で見てみると……。
水が濁りながら減っていきます。透明度を変更する処理がうまくいかないのです。
IE6以前は半透明PNGを使わない
では同じサンプルを、IE6で見てみると……。
透過が無効になります……。
透過を有効にするスクリプトなどもありますが、挙動にトラブルが多いので、弊社では極力使わないようにしています。
フィーチャーフォンでは使えません
フィーチャーフォン（ガラケー）では、昔に出た機種で使えないものがあります。
PNG形式でなく、GIFとJPGで代用するのが無難です。
まとめ。人に画像を渡す時、迷ったらPNGを使おう
人に画像を渡す時、形式に迷ったら、（それが写真やレイヤーが必要なデータでない限り）PNGを使っておけば大丈夫です。
WEBで使う時には癖がありますが、後からいくらでも別の形式に書き出せるので、ヨクワカンナイヨ！って場合はpngがオススメです。
