n2p blog

キャンペーンやSNSの
"ためになる"情報を
執筆しています。

PNG形式はフルカラーで透過もできちゃうスグレモノ。昔の環境では注意。

  • フルカラーに設定すれば保存時に劣化しない
  • 透明色の透明具合を調節できる
  • bit数を元画像と揃えれば、劣化することなく保存できる

PNG形式はいろいろできちゃうスグレモノ!
でも昔の環境では問題を起こすこともあります。
その特徴を見ていきましょう!

フルカラーに設定すれば、劣化することなく保存できる

PSDやBMP、EPSの未圧縮のフルカラーの画像をPNGに書きだしても画質が劣化しません!
レイヤーなどの情報は失われます。
PNGは保存できる色数を選ぶことができます。
多く使われているのは、256色とフルカラー1670万色、もしくはフルカラー1670万色に半透明の指定を足したものです。
理論上は280兆色(48bit)まで保存できます。一般的には使いませんけどね。
ですので、人に画像を渡す時保存形式に迷ったらとりあえずPNGのフルカラーで保存、と覚えておいて下さい。

透明色の透明具合が調節できる

透明色の透明具合が調節できます。
下記の画像をご覧ください。
opacity
全て同じ色(#000000)ですが、
透明度を変えることで濃淡をつけています。
では同じ画像を市松模様の上に載せてみましょう。

opacity

たしかに、半透明になっていますね!
Photoshopのレイヤー効果のグラデーションなども、透過した状態で再現して保存できます。
次は、文字の画像をPNGとGIFで比較してみます。

testtext

PNG 3.2KB

testtext

GIF 2.7KB
tの文字の斜めの部分に注目すると、PNGの方が滑らかな文字になっていることが確認できますね。
環境に余裕がある場合、透過画像はPNG形式で保存した方がキレイです!

IE8以前の半透明PNGは透明度を変更しないこと!

そんな便利なPNG形式ですが、IE8以前で落とし穴があります。
IE8以前の半透明PNGは透明度を変更しない
テスト用のサンプルを見てみましょう。
マウスをコップに乗せると、水の一部が半透明になり、量が減っていきます。
透明になっていく画像は、透過pngです。
png03
しかしこれを、IE8で見てみると……。
png01
水が濁りながら減っていきます。透明度を変更する処理がうまくいかないのです。
IE6以前は半透明PNGを使わない
では同じサンプルを、IE6で見てみると……。
png02
透過が無効になります……。
透過を有効にするスクリプトなどもありますが、挙動にトラブルが多いので、弊社では極力使わないようにしています。

フィーチャーフォンでは使えません

フィーチャーフォン(ガラケー)では、昔に出た機種で使えないものがあります。
PNG形式でなく、GIFとJPGで代用するのが無難です。

まとめ。人に画像を渡す時、迷ったらPNGを使おう

人に画像を渡す時、形式に迷ったら、(それが写真やレイヤーが必要なデータでない限り)PNGを使っておけば大丈夫です。
WEBで使う時には癖がありますが、後からいくらでも別の形式に書き出せるので、ヨクワカンナイヨ!って場合はpngがオススメです。

  • BirdCallカスタムストーリークイズ診断
  • BirdCallカスタムストーリー
  • BirdCall運用