PNG ぴんぐ

PNG

PNGとはPortable Network Graphicsの略で、ビットマップデータのファイルフォーマットの一つです。拡張子は.pngです。
ネットワークでの利用が前提の可逆圧縮のファイルフォーマットで、8ビットや24ビットなどの色数が扱える、アルファチャンネルを利用した画像の透過が可能、ガンマ値の保持が可能という特長があります。

JPEG、PNG、GIFの3つがWeb上で利用される画像ファイルフォーマットですが、PNGはJPEGやGIFより後に開発されたファイルフォーマットで、JPEGとGIFの長所を備えています。

JPEGとPNGの双方で、同程度の写真画像(連続的な階調のある画像)を保存すると、JPEGの方が非可逆圧縮である分ファイルサイズが小さくなることが多いため、Web上の写真画像にはJPEGが多く利用されます(ただしPNGには、可逆圧縮のためデータが劣化しない、ガンマ値を保有できるなどのメリットもあります)。

PNGは写真よりも、色数の少ない(平坦な階調の)イラストやロゴなどの画像に利用されることが多く、その点ではGIFと用途が似ていますが、GIFの色数が8ビット(256色)までのインデックスカラーなのに対し、PNGは8ビットまでのインデックスカラーにも24ビット(約1677万色)のフルカラーにも対応しています。またPNGはW3Cから勧告されている技術でもあります。

PNGの大きな特長の一つは、アルファチャンネルを利用した透過(透過PNG)が可能なことです。GIFでは特定の1色しか透明色に指定できませんが、PNGではアルファチャンネル(透明度情報)を扱えるため、段階的な透明表現(半透明なピクセルという表現)が可能であり、切り抜き画像の利用に適しています。
ただし、透過PNG(やガンマ値の埋め込み)は対応していないWebブラウザもあり、利用時には確認と対策が必要です。

いずれの場合も、画像内容に適したファイルフォーマットを選択する必要性に留意をしましょう。

テキストを全て表示

参考文献
・「Web Designing 2008年9月号」毎日コミュニケーションズ 2008年
・「Web Designing 2007年9月号」毎日コミュニケーションズ 2007年
・「実例でわかるデジタルイメージング」井上裕夫、東陽一/著 日本印刷技術協会(JAGAT) 2007年
・「Adobe Photoshop CS2 ユーザガイド」(Adobe Photoshop CS2付属ドキュメント)

参考ウェブサイト
PNG (Portable Network Graphics) Home Site
Portable Network Graphics (PNG) Specification and Extensions

監修
井上智史 通信教育課程デザイン情報学科非常勤講師

作成日・改訂
2009年02月23日作成

文字サイズを拡大

  • 同じ内容の図版をPNGとJPEGで保存した例(下図はそれぞれの部分の拡大図)。
平坦な諧調や輪郭のはっきりした画像をJPEGにするとノイズが発生したり、全体的にぼやけた印象になる場合があるので、イラストやロゴ、文字主体の画像は、PNGを利用するのが一般的である。同じ内容の図版をPNGとJPEGで保存した例(下図はそれぞれの部分の拡大図)。 平坦な諧調や輪郭のはっきりした画像をJPEGにするとノイズが発生したり、全体的にぼやけた印象になる場合があるので、イラストやロゴ、文字主体の画像は、PNGを利用するのが一般的である。
  • 透過PNGは滑らかな透明画像の作成が可能。
透過GIFは特定の1色を透明にできるのみなので、上図右のように境界に他の色が見えてしまうことがある。
PNGはアルファチャンネル(透明度情報)が扱えるため、下図左のような透過図版も作成できる。
Internet Explorer 6が未対応なので、利用の場合には対策が必要である。透過PNGは滑らかな透明画像の作成が可能。 透過GIFは特定の1色を透明にできるのみなので、上図右のように境界に他の色が見えてしまうことがある。 PNGはアルファチャンネル(透明度情報)が扱えるため、下図左のような透過図版も作成できる。 Internet Explorer 6が未対応なので、利用の場合には対策が必要である。
  • Adobe PhotoshopによるPNGの作成は、「ファイル」→「Web用に保存」から行う。
PNG-8(上図)は8ビットのインデックスカラーで、GIF同様、平坦な画像に向く。色数とカラーテーブルの適切な設定が、綺麗なPNGを作成には必要。
PNG-24(下図)は24ビットのフルカラーが利用できる。Adobe PhotoshopによるPNGの作成は、「ファイル」→「Web用に保存」から行う。 PNG-8(上図)は8ビットのインデックスカラーで、GIF同様、平坦な画像に向く。色数とカラーテーブルの適切な設定が、綺麗なPNGを作成には必要。 PNG-24(下図)は24ビットのフルカラーが利用できる。

このページの上部へ