お絵描き研究室：PNG(実践編)

実際に PNG を使ってみた実験結果です。

1. はじめに圧縮率ありき

　何はともあれ、GIF を PNG に置き換えるにあたって一番気になるのは圧縮率でしょう。単刀直入に、実際の画像を使って GIF と PNG の画像サイズを比較してみました。テストに使った画像はうちのバナーアイコン(200x40)です。原画はフルカラーで、これを誤差拡散法で 256 色に減色しています。

テスト画像

　この画像ひとつではとても一般論を展開する材料にはなりませんが、参考程度にはなるでしょう。では、実験結果を表１－１に示します。

表１－１　画像ファイルサイズの一覧(バナーアイコン、誤差拡散)

使用ソフト	画像生成オプション	画像サイズ	テキスト	ガンマ
Adobe PhotoShop 4.0.1	PNG-Normal(None)	6,386	無	有
Adobe PhotoShop 4.0.1	PNG-Normal(Sub)	6,883	無	有
Adobe PhotoShop 4.0.1	PNG-Normal(Up)	7,259	無	有
Adobe PhotoShop 4.0.1	PNG-Normal(Average)	7,665	無	有
Adobe PhotoShop 4.0.1	PNG-Normal(Paeth)	7,237	無	有
Adobe PhotoShop 4.0.1	PNG-Normal(Adaptive)	7,213	無	有
Adobe PhotoShop 4.0.1	GIF89a-Normal	6,354	無	－
Adobe PhotoShop 4.0.1	GIF89a-Interlaced	6,331	無	－
JASC PaintShopPro 4.14	PNG-Normal	5,665	無	無
JASC PaintShopPro 4.14	PNG-Adam7	6,142	無	－
JASC PaintShopPro 4.14	GIF89a-Normal	6,351	無	－
JASC PaintShopPro 4.14	GIF89a-Interlaced	6,332	無	無
ViX 1.35.40(K.Okada 氏作)	PNG-Normal	5,710	有	有
CzView2 1.0.0(拙作、参考)	JPEG	3,096	有	－

　何をやっちょるんじゃ PhotoShop、と言いたくなるようなデータが出ています。この画像に関してはフィルタをかけない方が良いらしいですが、それでも PaintShopPro にくらべて 12% も大きな値が出ているのはどういう訳でしょう？PaintShopPro と ViX はどうやら同じライブラリ(Group42.Inc による LIBPNG)を使っているようですが、ViX のファイルサイズが若干大きいのはテキストとガンマを埋め込んでいる影響だと思います。

　JPEG のほうが遥かに小さなファイルサイズに収まっていますが、これは減色に使った誤差拡散の影響だと思います。誤差拡散法を用いると画像にはランダムノイズ状に色がちりばめられるため、パターンの連続性を利用する LZ 系圧縮アルゴリズムでは圧縮率が上がらないことが多いのです。それでは単純減色した場合はどうなるか？ちょっと実験してみました(表１－２)。なお、テキストとガンマ値の埋め込みについては同じ結果なので割愛しています。

表１－２　画像ファイルサイズの一覧(バナーアイコン、単純減色)

使用ソフト	画像生成オプション	画像サイズ
Adobe PhotoShop 4.0.1	PNG-Normal(None)	5,782
Adobe PhotoShop 4.0.1	PNG-Normal(Sub)	6,335
Adobe PhotoShop 4.0.1	PNG-Normal(Up)	6,501
Adobe PhotoShop 4.0.1	PNG-Normal(Average)	6,969
Adobe PhotoShop 4.0.1	PNG-Normal(Paeth)	6,508
Adobe PhotoShop 4.0.1	PNG-Normal(Adaptive)	6,511
Adobe PhotoShop 4.0.1	GIF89a-Normal	5,813
Adobe PhotoShop 4.0.1	GIF89a-Interlaced	5,805
JASC PaintShopPro 4.14	PNG-Normal	5,122
JASC PaintShopPro 4.14	PNG-Adam7	5,703
JASC PaintShopPro 4.14	GIF89a-Normal	5,814
JASC PaintShopPro 4.14	GIF89a-Interlaced	5,806
ViX 1.35.40(K.Okada 氏作)	PNG-Normal	5,176

　多少小さくはなりましたが、あんまり代わり映えしないですね。PNG に対して GIF の圧縮率が安定しているのはフィルタのような不確定要素が少ないため、どのソフトでやっても同じような結果が出るからでしょう。PNG, GIF ともにインターレース・非インターレース間では圧縮率に大差は出ないようです。
　しかし、PhotoShop PNG の圧縮率の悪さが光ります(しっかりしてくださいよ、Adobe さん…)。疑問に思って大きな画像やパターンディザも試してみましたが、あまり傾向に変化は見られませんでした。少なくとも PhotoShop 4.0.1 の PNG 圧縮アルゴリズムはあまり完成度が高くないようで、フィルタが６種類も用意されている割には "None" が一番有効である場合が多いようです。

　PaintShopPro を使って他の画像でもいろいろ試してみましたが、PNG は GIF より小さくなることが多く、増えたところで大差ない傾向が確認できました。「PNG は GIF より画像が大きくなる」という噂の根元は、PhotoShop PNG 圧縮ルーチンの性能が悪いことが大きな原因なのではないでしょうか？

※(2000/3/25) PhotoShop 5.0 だと少しだけファイルサイズが小さくなることを確認しています。しかし、それでもまだ PaintShop には及びません。

2. ガンマ値：PhotoShop もう一つの困ったちゃん

　実は、PhotoShop の出す PNG ファイルにはもう一つ難点があります。PNG ファイルにガンマ補正値を入れてくれるのはいいのですが、どう考えてもおかしなガンマ値が格納されているのです。
　私が使っている PhotoShop 4.0.1 は Windows 用の英語版です。PhotoShop にはモニターガンマの設定がありますが、私はこれを SONY CPD Series, Gamma=2.0 として使っています。これで Windows マシンの未補正ガンマをほぼ再現できるのですが、この設定で出力した PNG ファイルには補正値 0.75が格納されるのです。ガンマ補正機能を持つソフトでこの画像を表示すると、モニタのγを 2.2 として計算するので 2.2 * 0.75 = 1.65 となり、異様に白っぽい表示になってしまいます。

　一体どこの設定がこの出力に関与しているのか、マニュアルを繰ってもよくわかりません(そもそも PhotoShop のマニュアルで PNG に言及している箇所は非常に少ない)。Windows 版 PhotoShop の場合、ガンマと名の付く設定はモニタガンマの一個所だけです。果たしてここを変化させれば PNG の埋め込みガンマ値も変化するのか、ちょっと調べてみました。

表２－１　PhotoShop 4.0.1 for Windows 英語版によるガンマ設定と PNG 埋め込み値の関連

モニタガンマ設定	PNG 埋め込みガンマ補正値
0.75	2.0
1.00	1.5
2.00	0.75
3.00	0.50

　モニタガンマ値と埋め込みガンマ補正値を掛けると常に "1.50" という数になります。これって Macintosh 表示系における標準のガンマ補正係数では？！あ、あの、Adobe さん…。Windows PC では表示系に補正係数は入らないのが普通なんですけど…。これでは一体、何のためにガンマ補正が入ってるのやらわかりません。頼みますよ Adobe さんったら、ホントに…。

※(2000/3/25) ガンマ問題は PhotoShop 5.0 でも出ることを確認しています。5.5 では直っているという話も聞きましたが、まだ確証は得ていません。

3. グラフィックソフトと PNG

　PNG には多くの機能がありますが、巷の PNG 対応グラフィックソフトでもその全てがサポートされているとは限りません。PNG のオプション機能全てを調べていれば日が暮れてしまうので、ここでは WEB 上に使う目的において重要と思われる８点だけを調べてみることにします。

１　PNG を読み出せるか
２　背景透過表示ができるか
３　読み出したガンマ値を反映するか
４　埋め込みコメント表示ができるか
５　PNG を書き込めるか
６　背景透過色を指定できるか
７　書き込み時のガンマ値を設定できるか
８　埋め込みコメントを設定できるか

表３－１　PNG オプションサポートの対応状況

ソフト名/バージョン	開発元	１	２	３	４	５	６	７	８	備考
PaintShop Pro 4.14	JASC Inc.	○	○	×	×	○	○	×	×	γとコメントは完全に無視
PhotoShop 4.0.1	Adobe Systems	○	×	×	×	○	×	△	×	書き出しγを間違っている？
Photo Editor 3.01	Microsoft	○	○	×	×	○	△	×	×	透過色は原画の値を継承
ViX 1.3.50	K.Okada	○	×	○	○	○	×	△	△	書き出しγは 0.4545 固定、コメントは一種類のみ
Susie0.45a+IfPng0.15	Takechin/宮坂賢	○	○	○	○	×	－	－	－	読み出しのみだがほぼ完璧なサポート

　思った以上に使えるソフトが少ないですねぇ…私はそもそも CG を PaintShopPro で始めたので、これで出来ることは他のソフトでも出来て当たり前だと思っていたのですが甘かったようです。
　PNG が出遅れている大きな要因はやはり、アレもコレもとオプションを詰め込み過ぎたせいなのでしょう。しかし今となってはこれを責めるわけにもゆきません。当時は一刻も早く GIF を抹殺するため、PNG は「理想的」なグラフィックフォーマットの優等となるべく設計されたのですから…。今から考えれば、せいぜい PNG を「無料の GIF+α」程度にしておけばもっとソフトの対応も早かったと思うのですが、こういう規格を決めるときは往々にして「+α」の部分が肥大化するんですよねぇ…。

※(2000/3/25) PaintShopPro 6.0 ではコメント表示が充実しました。しかしガンマ値やαチャネルの未対応は相変わらずです。

4. ブラウザと PNG

　PNG の普及が長らく足踏み状態だったのは、ひとつは WEB ブラウザがなかなか PNG に対応してくれなかったという事情がありました。Netscape Navigator 3.x シリーズ、Microsoft Internet Explorer 3.x シリーズでは全く対応していませんし、Netscape Navigator 4.x シリーズも 4.04 未満では対応していません。これらのブラウザでも PNG プラグインを使えば表示はできましたが。この場合 <IMG> タグの代わりに <EMBED> タグを使わねばならない、プラグインで画像を貼り込むとスクロールが遅くなる、背景指定(<BODY background=... >)には使えないなど制約が多く、はっきり言って使いにくいものだったのです。
　Internet Explorer 4.x 以降、Netscape Navigator 4.04 以降ではやっと <IMG> タグとして PNG 画像が貼り付けられるようになりました。これでやっと PNG もインターネット上で市民権を得たような気がするのですが、安心するのはまだ早い！「PNG をサポート」したからと言って、必ずしも「全ての機能がフル実装されている」とは限らないのです。特に要注意はガンマ補正値の扱い(あぁ、またこれかよ…)と背景透過色の扱いです。

ガンマ補正テスト	透過テスト	背景テスト
		Crazy☆Planet

左の画像は意図的に埋め込みガンマを 1.5 に設定したもので、白っぽく見えればガンマ補正がかかっている証拠です。
中央の画像は色インデックス #255(黒) を透過色に設定したもので、"Crazy Planet" のロゴがへろへろ～っと透けて白に見えれば透過成功です。
右の画像はテーブルの背景に PNG を貼り付けたもので、バナーを背景に Crazy☆Planet の文字が見えていれば成功です。

　さて、貴方のブラウザではどう見えていますか？私が試したブラウザと PNG サポートの状況を表４－１に示します。

表４－１　ブラウザと PNG 画像の扱いについて

ブラウザ	PNG サポート	ガンマ補正	透過色	背景
Netscape Navigator 3.x	×	－	－	－
Netscape Navigator 4.03 以前	×	－	－	－
Netscape Navigator 4.04	○	×	×	○
Netscape Communicator 4.05	○	×	×	○
Netscape Communicator 4.7	○	×	×	○
MS Internet Explorer 3.x	×	－	－	－
MS Internet Explorer 4.0(Win)	○	○	○	○
MS Internet Explorer 5.0(Win)	○	○	○	○
MS Internet Explorer 4.01(Mac)	×	－	－	－
MS Internet Explorer 4.5(Mac)	×	－	－	－
MS Internet Explorer 5.0(Mac)	○	○	○	○
Apple CyberDog J1-2.0	×	－	－	－

　まぁ CyberDog は洒落みたいなもんですが(^_^;)、意外と PNG をサポートするブラウザが少ないことに驚かされますね。ガンマや背景透過をまともに扱うのは Microsoft IE4 以降だけ、しかも Macintosh 版の IE4 はそもそも PNG をサポートしていません(これは差別ですか、Microsoft さん？)。Netscape 4.04 以降では一応 PNG をサポートしているものの、オプションの扱いは非常に貧弱です(ふざけてんですか、Netscape さん？)。しかも Netscape には、次章で紹介するアキレス健があるのです。

※(2000/3/25) SADA 氏の協力により、Netscape6 の暫定開発中バージョン "Mozzlia-M14" では全ての項目が正常に動作することが確認されています。

5. サーバと PNG

　上記の実験中に奇妙な現象に出くわしました。それはローカルファイル上にある PNG ファイルなら Netscape で見えるのに、同じファイルを WWW サーバ(Microsoft Peer Web Service for NT) を通すと見えなくなってしまうという現象です。
　Internet Explorer では何の問題もないので、また例によって MS アプリ同士の裏取り引きか？と疑ったのですが、ネットワークに流れるデータを見ると Netscape の要求に対しては "Error 406" が返っています。MSIE からの要求データには PNG ファイルが返っているのですが、HTTP ヘッダ中の MIME-TYPE が "Content-Type: application/octet-stream" になっています。これはすなわち「正体不明のデータ」を意味します。
　どうも WEB Server 側で PNG ファイルの拡張子が MIME-TYPE image/png として登録されていないようです。しかし幸い、MS Peer Web Service には MIME-TYPE を拡張する仕組みがあります(使いにくいですが)。レジストリエディタ(regedit)を使ってレジストリエントリ

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\InetInfo\Parameters\MimeMap

ここに新しい mime-type として文字列型のレジストリ項目

image/png,png,,:

を追加して再起動すればいいのです(このレジストリは名前だけ意味を持っているようで、文字列の値は空文字で構いません)。

…しかし、再起動後も現象は変わりません。なんでや？Netscape でのネットワークデータを見るとさっきとあまり変わっていませんが、MSIE のデータを見るとちゃんと "image/png" が返っています。何でや？なんでや？いろいろ詳しく見てみると、Netscape から発行している HTTP 要求ヘッダが

GET (url...) HTTP/1.0
Referer: (url)
Connection: Keep-Alive
User-Agent: Mozilla/4.04[ja] (Win95; I; Nav)
Host:(ip address)
Accept: image/gif, image/x-bitmap, image/jpeg, image/pjpeg image/png
.
.
.

　となっています。…ちょっと待て。image/pjpeg と image/png の間の "," は何処へ行ったんだ？！

　調べてみると、Netscape では <A href=> で GET を発行する場合と <IMG src=> で GET を発行する場合でヘッダ形式が微妙に異なり、特に Accept: に関しては

無条件受け入れを示す "*.*" が無くなる
image/png がバグる

という動作になるようです。わかりやすく言えば「PNG の MIME-TYPE を正しく処理する WEB サーバを使用した場合、NetScape(少なくとも 4.04, 4.05)では PNG 画像を IMG タグとして参照することができない」ということなのです。
　MS Peer Web Service の場合、PNG に関してインチキな MIME-TYPE を指定すればこの現象が回避できることがわかっています。例えば前述の image/png のエントリを消してしまい、image/x-xbitmap,png,,: を登録することで PNG ファイルの Content-Type を image/x-xbitmap にしてしまうのです。もちろんこの方法はインチキ以外の何者でもありませんが、Netscape に救いようのないバグがある以上どうしようもありません。もし PNG をアップしたけど画像が表示されないとお悩みの方があれば、一度サーバ管理者(プロバイダの担当者)に相談し MIME-TYPE リストを確認してもらうことをお勧めします。

　ちなみに、最新の Communicator 4.7 では流石にこのバグだけは直っています…えぇ、このバグだけ。PNG のガンマを無視するのも、背景透過色を無視するのも相変わらずです。…NetScape さん、AOL 専用ボタンを拡張するのも結構ですが、それはまともな WEB ブラウザとして当然の機能をちゃんと実装した後にしといてください。でないと Microsoft にシェアを食われる一方ですよ？私はホントは Internet Explorer なんて嫌いなんです。でもこの実験を通して Netscape PNG サポートの貧弱ぶりを目の当たりにした今、思わず IE に乗り換えようかなんて気になっています。

6. まとめ：PNG FAQ

　最後に F.A.Q (よくある質問と答え)の形でまとめておきます。

GIF って無料じゃないの？: いいえ。GIF の圧縮／展開アルゴリズムである LZW は米 Unisys 社が特許を所持しており、LZW を応用したソフトウェアやハードウェアについてライセンス料の支払いを義務づけています。
GIF 画像を使うにはライセンス料を払う必要があるって？: いいえ。LZW の特許範囲は「アルゴリズム」であり「データ」ではないので、GIF 画像そのものにライセンス料は徴収されません。しかし Unisys では「正規にライセンスされていないソフト(フリーウェアなど)によって作成された GIF 画像を使用した場合は、画像データもライセンス料徴収の対象となる」という(阿漕な)見解を示しています。
PNG は安心して無料で使えるのかな？: はい。今のところ PNG の無償使用を脅かすような特許申請は行われていませんし、将来そうなる可能性も少ないです。
PNG って GIF と互換性があるの？: いいえ。PNG は機能的に GIF と同等(以上)でありコンセプトもよく似ていますが、互換性は全くありません。
GIF に対して PNG が優れている点は？: フルカラーモード(24bit)のサポート、透過度マスク(αチャネル)のサポート、より大きな解像度、発展可能な色数、ガンマ値・コメント埋め込み等の機能が優れています。
PNG に対して GIF が優れている点は？: サポートソフトが圧倒的に多い、圧縮展開速度が速い、仕様が単純なのでシステム間での異動作が少ない、アニメーション形式を持つ点で優れています。
JPEG に対して PNG が優れている点は？: JPEG は破壊圧縮を行うので原画の情報を 100% 伝えられませんが、PNG のフルカラーで圧縮した画像は情報を失いません。
PNG に対して JPEG が優れている点は？: JPEG はフルカラー画像専用に開発されたフォーマットであり、わずかな画質低下にさえ目をつぶれば圧倒的な圧縮率を誇ります。しかし画像そのものが小さかった場合(100x100 ドットなど)は PNG の方がファイルサイズが小さくなることもあります。
「アニメーション PNG」は何時頃出るの？: PNG はアニメーション化しないと公表されていますが、代替手段として MNG 規格が提唱されています。これは PNG そのものを拡張してアニメ化するのではなく、複数画像間の連係を記述するデーターベース形式によってアニメーションを実現する方式です。
PNG と GIF、どっちのファイルサイズが小さい？: 画像の性質によりますが、普通は両者の間に大差はありません。ただし PNG はソフトの実装効率が悪いためにファイルが肥大化する(Adobe PhotoShop)場合があるので要注意です。
ガンマ補正って何？: 画面の明るさ・コントラストを補正し、異なる機種で同じ画像を見たときに同じ結果が得られるようにする処理です。しかしソフトの実装がきちんとしていない場合、中途半端な(あるいは誤った)ガンマ補正は逆効果を生む場合もあります。
結局、GIF を捨てて PNG に乗り換えるべきなのかな？: 無理にとは言いませんが、そうした方が良いと思います。残念ながら PNG は機能の多さが災いして中途半端な実装やバグ付き実装のソフトが世に流れてしまっており、必ずしも 100% の結果が保証できる訳ではありませんが、皆がどんどん PNG を使ってゆけば状況はおのずから改善されてゆくことでしょう。LZW は素晴らしい技術であり GIF は立派なデファクトスタンダードなのですが、Unisys の態度がこれらの利点をすべて摘み取ってしまっています。今こそ GIF を捨てて PNG に乗り換えましょう！これは技術ではなく信念の問題です。

Go to hell, GIF!

[研究室] [目次]

Copyright by 'Crazy' Y.Sasaki