PNGの特性を活かした写真加工術

PNGの特徴と説明

PNGは画像の保存形式の1つで、「photo.png」のような感じで使われています。
昔の旧石器時代のブラウザではこの拡張子の画像を認識してくれなくて
なかなかwebサイトでは使えなかったのですが、今ではその課題もクリアになり、
かなり浸透しています。簡単に特徴を説明すると、画像の透明部分を美しく透過
させることが可能になっています。GIFでも透明を扱えたのですが、
背景色は1カラーのみ設定できるという制限がありました。
PNGは無限にどんな色の上でも透過してくれます。

透明の写真加工

例えばこのPhotoshopの写真加工キャプチャーをご覧ください。
この段階での写真は、Photoshopのファイル拡張子となります。
ですのでどんな背景にも美しく透過させることができます。
今からこの画像をGIFとPNGで保存したときの透明度の違いを実演で説明していきますね。

GIFに変換した場合

gif保存方法

GIFに写真を変換する場合、この透過部分の背景色を1つ決定しておかねばなりません。
これは「マット」というところで設定できます。現在は白が選択されていますので、
背景が白のところで、この透明写真は綺麗に表示できるということになります。
一方、背景が黒や紫といった別のカラーの上に置くとこうなってしまいます。

GIF写真を黒い背景に配置

ご覧のとおり、白以外の背景の上にGIFの透過画像を置いても
その境界部分が白に対応した色設定になっているので、
このように白い枠がでてしまうのです。

綺麗にGIFが配置できた写真

一方、背景が白の場合、綺麗に写真が表示されています。
これはマットのカラー設定で色々変更できますので、
GIFで透明を扱う場合、この設定を意識しておきましょう。

もしGIF写真の背景色が1色では無い場合

さて、もし背景色が1色ではなく、複数の色がある場合、GIFはどうなってしまうのでしょうか。上述したようにマットは1カラーしか設定できません。ですので下記のような表示になってしまいます。

複数の背景色の透明画像

このように模様のある背景の上に、GIFの透明写真を置いたら
ガタガタになってしまいます。これはGIFの特性ですので、仕方ありません。
そこでここで活躍するのがPNGという拡張子の画像保存方法なのです。
PNGならマットの色数は無制限。つまり設定無しでどんな背景にも
透明画像を上乗せすることができます。

PNGで保存

pngの写真保存画面

PNG形式の保存には実はPNG-8とPNG-24の2種類あります。
今回のように背景色のアルファ(透明)を活用したい場合、
このPNG-24で保存します。GIFのように、マットを指定する必要もありません。
すべての色に対応しているのですから…。

png成功事例

そして実際にPNGを背景の上においてみたのがこちらです。
どんな色にも綺麗に透明の境界部分が表示されています。
GIFに比べてファイルの重さは格段に重くなってしまいましたが
PNGはこのような表示が可能ですので最近ではいろんなwebデザイン
の現場で採用されています。

拡張子がPNGの写真は加工しやすい

背景が透過しているPNG画像なら、レイヤーで重ねても美しく加工する
ことが可能です。GIFの場合、再調整が必要ですが(パスで切り抜く等)
PNGならそのままですぐ加工することができます。

また最近ではホームーページのロゴにこの拡張子PNGを
採用するケースが増えています。
どんなヘッダーイメージにも美しく配置でき、
必要最低限のトリミング(画像切り抜き)ができるというのが
魅力の1つです。