PNG

PNG フォーマットはGIFに代わる次世代のイラスト用フォーマットとして登場しました。

特徴

■可逆圧縮を採用。 ファイルサイズが小さく、保存後と保存前のデータに変化(劣化)がない。

■GIF 形式と比べても平均で2割程度の省サイズを実現。

■フルカラー( 24bit 1677万色)に対応しているだけでなく、将来を見据えた拡張性を持つ。※1

■将来的には、透過色は単色ではなく階調の付いた透過色が可能に

■色データだけでなくガンマ値情報を持ち、プラットフォームに左右されない表示が可能。

■最近登場したフォーマットの為に、古いブラウザでは標準でサポートしていないものがある。 ※2

推奨用途 ファイルサイズの小ささ 圧縮方法 対応色数 ブラウザ表示
鑑賞、保存用
(イラスト)
○小さい 可逆圧縮 1677 万色 一部可 ※2
その他の特徴
GIF形式よりも良好な圧縮率、フルカラー対応、ガンマ値情報格納

※1 フォーマットでは対応していても、まだハードウエア側がそこまで対応出来ていない部分が多い。
※2 表示に関しては Netscape 4.04 、IE 4 以降のブラウザでは対応。
ただし I.E.4.x では HTML で指定された場合のみ対応。PNG 画像単独での表示はできません。
 透過色に関しては Netscape 4.7 でも非対応の様です。Netscape 4.7 のバグかもしれませんが(^^;



次世代フォーマット PNG

PNG は Portable Network Graphic (ポータブル・ネットワーク・グラフィック)の略で「ピング」と呼びます。

その名の通り、ネットワーク上で扱いやすい様に作られた画像フォーマットです。
256 色しか使えないなど設計時期が古く、ツールの制作に対してロイヤリティの支払い義務があるなど、
現在では様々な面で制約や難点がある GIF 形式に代わるべく登場した新しいフォーマットです。

そのため、PNG は GIF に非常に似た特徴 (イラストに最適、オンライン向きのファイルサイズ、可逆圧縮)を
持ちますが、仕様に関しては全て公開され、ツールの制作に関しても自由に行うことが出来ます。
(GIF は圧縮方式の部分が特許登録されおり、製作者にその特許使用料の支払い義務がある)

また、透過色もきめ細かい設定が可能、色数はグレースケールで 16bit ( ≒ 6万色) カラー、
フルカラーで 48 bit (≒ 281 兆 4749 億色 ^^; ) にも対応と、規格にはかなりの余裕を持たせた形式です。
また、ハードウエアや O/S によって明るさが変わらないようにするなど、
制作者側の意図がさらに伝えやすくなっています。
Netscape Communicator4.04 では表示出来るようになりました。
I.E.4.x では、HTML で指定されている場合には表示できますが、単独でファイルを指定して表示をさせたり
ドラッグ&ドロップでは表示することは出来ず( 関連付けされている外部ツールを呼び出すことで表示します )
Netscape Communicator4.04 と同様に表示出来るのは I.E.5 からです。

現状ではフォーマット自体がまだ一般に広まっていなかったり、アニメーション機能に対応してないなど
残念な部分も多いのですが、これから出て来るであろう拡張規格の潜在的な拡張性は非常に高いため、
その存在が広まってくればHP作りやイラスト系CGで使われる代表的な
フォーマットになってくるのは間違いないと思います。

※ 現時点ではハードウエア側がそこまでの色数に対応していないために使用することは出来ません。
  Photoshop も書き出しに関しては 24bit カラーまでしか対応していません。



どこに使うか?

かなり有望なフォーマットの PNG ですが、新しいだけあってまだ対応していないブラウザもあるでしょう。
Netscape や I.E. でも古いバージョンを使っている方は標準では見えません。
I.E.4.x では、HTML の中で指定されている場合は表示できますが、PNG ファイル単体を
「ファイル名を指定して実行」やドラッグ&ドロップしても見えないと言う中途半端な対応です。

しかし、全く見えないのは困りますが、一部の古いブラウザを気にする余りに GIF を使うばかりでは
GIF より優秀な PNG も普及しませんし、ここで解説する甲斐もありませんので使いましょうね(笑)

古いブラウザで見えなければ、見えるようにしてやればいいことです。
その PNG 画像が見えなくても致命的な欠陥にならない所や代替画像を用意すれば、使ってもかまわないでしょう。
・・・・敢えてどんどん使って世の中のブラウザを新しい物にさせてしまうと言うことも出来ますけどね(笑)

イラスト作品を公開してるHPなのに、その作品が PNG 形式であるために見えないのは致命的ですが、
同じ画像を別の形式 ( GIF もしくは JPG ) でも用意してリンクを張っておくことで対応しましょう。
PNG が表示できる人を基準にして、通常はファイルサイズの小さい PNG を表示して快適に、
見えない人の為にリンクを使ってファイルサイズがやや大きい GIF を呼び出せばいいことです。

リンクボタンはどうでしょう?
これも HTML の画像を表示するためのタグ IMG タグのオプションで ALT オプションを入れておくことで
画像が表示されない場合は ALT で指定した内容が文字で表示されますから、問題は起きにくいと思います。

ただし、このような場合には表示されない場合の為に、あらかじめ INDEX のページで
断っておくのがマナーです。

PNG 形式を使用しているため Netscape Navigator 4.04 以降、もしくは I.E 4.0 以降での閲覧を推奨します。

と、書いておくのが良いでしょう。
テキストブラウザは文字しか表示できないし、画像の読み込み前の状態では表示できませんので、
画像には出来るだけオプションを入れておきましょう。
特に Netscape では、テーブルタグの中の画像は縦横のサイズも記述しないと
表の中の画像総てが読み込み終わらないと表全体までもが表示されないので
画像には必ず HEIGHT , WIDTH , ALT の3つのオプションは必ず指定しておきましょう。

と、ちょっとネガティブで細かい事を書きましたが PNG はイラスト系の画像にはかなり優秀なフォーマットです。
その優秀な点を無駄なく生かしましょう。


パレット

フルカラー対応の PNG ですが、減色することでパレットを持たせることもできます。
パレットの最大数は 256 の様で、GIF と同様に減色することでファイルサイズを小さくすることが可能です。
Photoshop では、保存の前に画像を統合し、カラーモードをインデックスカラーへ変更することで
パレットを持たせられるようになります。


PNG の要、フィルタ

GIF 形式は横に同じ色が続く絵柄であると圧縮率が高く、ファイルサイズを押さえることが出来ました。
グラデーションの場合縦方向に変化するグラデーションではファイルサイズは小さくなりました。
逆に言うと横方向にグラデーションを掛けた場合はファイルサイズは大きめになるという弱点がありました。

PNG では、絵柄にあったフィルタを使って書き込む事でファイルサイズを押さえる事が出来るようになっています。
これが PNG の優れた特徴であり、GIF よりもファイルサイズを小さく押さえる事が出来るポイントです。

フィルタ 効果的な画像
なし( None ) フィルタを適用しません。
Sub 同じ色が横方向に長く続く部分が多い画像に適したフィルタ。
Up 同じ色が縦方向に長く続く部分が多い画像に適したフィルタ。
平均 (Average) 同じ色が広い面積を占める画像に適したフィルタ。
Paeth 色の変化の少ないフルカラー画像に適したフィルタ。
適応させる 上記のフィルタのどれが適しているかを判断して適用します。


このフィルタにより、CG を作る際にファイルサイズを気にしながら作る必要がありません。
GIF ではファイルサイズの事を考えると横方向にグラデーションを掛けるのはややためらわれましたが、
PNG ではフィルタを選択することで縦横どちらでもファイルサイズを良好に押さえることが出来ます。
ただし、その絵柄によってはフィルタを適用しない方がファイルサイズを小さくできる場合もあるようで、
そのためにフィルタを適用しないことを出来るようにもなっています。

画質についてはPNG は可逆圧縮方式を使っていますので、どのフィルタを使っても画質は変わりません。
その画像に適していないフィルタを掛けた場合は、ファイルサイズが大きめになるだけです。


プログレッシブ

オンライン向けであるプログレッシブ形式で保存したい場合は保存時の PNG 設定ダイアログの中の
インターレース オプションを [ Adam7 ] にチェックを移します。
[ Adam7 ] とは製作者の名前が Adam であり、ピクセルを7段階に格納するためにこう呼ばれています。
JPG のプログレッシブ方式と同様、モザイク状からだんだんと画像が鮮明に展開される方式です。
ツールによっては単に「プログレッシブ」と言うオプションになっている場合もあります。


PSDの解説へ戻る
メニューへ戻る
 −−−−−−