png(画像ファイル)とは

pngとは、Portable Network Graphicsの頭文字をとったもので、画像ファイル形式の種類のひとつです。読み方は「ピング」「ピン」ですが、ピングと読む人が多い傾向です。

Webサイト制作の現場で頻繁に取り扱うpngについて理解していきましょう。

 png（ピング）の特徴

 pngには『png-8』『png-24』『png-32』という3つの種類があり、pngの後ろの数字はデータ量＝色数を表わしていて、例えばpng-8は「8bitの色数が使えますよ」と言う意味になります。

8bitの色の数は、2の8乗で256色です。

png-24は24bit＝2の24乗で16777216色ですが、png-32は32bit＝2の32乗という事ではなく24bit(16777216色)＋8bit(256段階の透過度)とちょっと複雑です。

 いずれにしてもデジカメなどで撮影した際に保存されるjpg形式よりもはるかに画質が綺麗なのが特徴です。

私は基本的にWebサイトを制作する際はバナーやコンテンツ内で使用する画像やイラストはpngを使用します。

それはもっとも綺麗な画像だからです。

jpgと比べると容量が重たいデメリットがあるとはいえ、サイドメニュー等で使用する程度の画像サイズ（200px程度の大きさ）であれば、そこまで差はありません。

プロが制作するサイトですから、より綺麗なものを納品する義務があると考えることから、制作者側で作成する画像ファイルはpng形式のものが望ましいのではないかと考えます。

 『透明』を表現できるpng

画像ファイル形式には他にgifやjpgなどがありますが、pngの長所は何といっても背景を透過する(透明にする)事ができる所です。

例えば、画像処理ソフトで顔のイラストを描いたとします。

白いキャンバスに顔を描いてgifやjpgで保存をすると例え背景を塗りつぶしていなくても背景は白色になりますが、png-32で保存すると背景を透明にして保存する事ができるのです。

gifやjpgで保存したイラスト画像をWebサイトに使う場合、Webサイトの背景の色と同じ背景色で保存したイラスト画像を使用しないとWebサイトの背景とイラスト画像の背景が合わなくて浮いてしまいますが、png-32で背景を透明にしたイラスト画像をWebサイトに使う事でイラスト画像が浮いてしまう事なく統一感のあるWebサイトに仕上げる事ができます。

【jpgとpngの比較表】

その他の画像ファイルについても覚えておきましょう

Webサイトで使用する画像ファイルにはpngの他にも、このページでもたびたび登場したjpg(ジェイペグ)やGIF（ジフ）といったファイルも存在します。

いずれのファイルもサイト制作の現場では取り扱う事になりますので、こちらも簡単に理解しておきましょう。