About PNG : PNGについて

1. そもそも PNG とはなんぞや。

PNG ってのは、画像フォーマット (保存形式。BMP とか GIF とか JPEG とか) の一種です。 特徴は以下の通り。

• 可逆圧縮。JPEG のように絵が潰れるということはありません。
• 圧縮アルゴリズムには GNU ZIP 等で有名な ZIP を用いています。 基本的に、GIF でもちいられている LZW アルゴリズムよりも高い圧縮率を持ちます。
• 使用可能な色数は 2 色〜 65536³ 色まで (※1)。
• 複数の色 (というか、パレット) を透明色に指定できます。加えて、透明度指定が可能です (※2)。
• ガンマ補正用のデータを持つことができます (※3)。

1. 「どうせ画面には 1677 万色までしか出せないんだから、意味無いじゃん」 とおっしゃる方もいるかと思いますが、データフォーマット等の規格ってのは、 将来の拡張用として余裕を持たせないと大抵痛い目に遭います。
   それに、RGB の色域だって現実の色域の一部でしかないわけですし。
2. ただ、半透明表示に対応したソフトは見たことがありません……。
3. このデータを使うことによって、システムとしての色の違い ( Mac で作ったデータが、Win で見ると暗すぎるってのはよくある話 ) を補正できます。 その結果、どんな環境でも全く同じ画像を見ることができます。

2. 何でそんなモノを使うのか。

このページでは、元々 GIF フォーマットだった画像を、全て PNG フォーマットのものに変更しています。
GIF でなくて PNG を使う理由は以下の通り。

• いろんなソフト (DonaBrowser とか) の作者に迷惑をかけた GIF が嫌い。
• PNG の方がより高圧縮だから、軽いページにできる。
• このページの画像は殆どがベタ絵だから、JPEG にすると見苦しい。
• 「W3C 認定」のブランドイメージから。(苦笑
• 米国 UNYSIS の「フリーで普及させる → いきなり金を請求しだす」という、 阿漕なやり方が気に入らない。

3. これはどう説明するのだ。

・俺は {NN3|IE3|etc.} を使ってるんだ。見辛くてかなわん。どうにかしろ。

ごめんなさい。一応

• このページには「画像として意味のある画像」は殆どありません。
• 全ての <IMG> に Alt 属性が設定してあります。
• ページのレイアウトが崩れないように、<IMG> の画像サイズ指定もしてあります。

ということで、ページの意味としては殆ど問題がないようにしてあるつもりです。

・Mac の IE4.5 で画像が出ない。前に IE4.01 で確認したと書いてあったぞ。

Mac では、
IE の初期設定の中のファイルヘルパーで PNG ファイルの関連付けをすれば、 IE4 以降で表示可能とのことです。 (http://www3.cds.ne.jp/~marimo/agree-png/ より引用)とのこと。試してみてください。

・「圧縮率が高い」なんて言ってるけど、実際に変換してみたら GIF より大きくなったぞ。どういうことだ。

元ファイルの使用色数が多いからだと思われます。あくまでも、 「 n 色 GIF のファイルサイズ >= n 色 PNG のファイルサイズ」って意味ですので。
256 色しか使ってないようでも、内部的には 1677 万色使ってるって事もあるので、 ツールで使用色数の確認をしてみてください。もし色数が多いようであれば、 減色ツールで処理した後に再度変換してみてください。
また、圧縮形式に ZIP を用いているため、圧縮率の指定が可能です。 変換 or 保存したソフトの設定を確認してみてください。
それでも GIF よりサイズが大きい場合は、PNG ファイル内のコメント部分に、テキストデータ (変換したツールの名前とか) がある可能性があります。削除してもいい場合は、 コメント編集用のツール等を使って削除してみてください。

・GIF に比べて展開が遅いらしいが、俺は DX2-66MHz のマシンで頑張ってるんだ。 俺の苦労をなんだと思ってやがる。

ローカルでの展開よりも、 Web からの転送の方がより大きなボトルネックになるだろうと勝手に判断しました。ご了承ください。

・PNG に変換したら色が化けたぞ。どうしてくれる。

多分、Adobe PhotoShop を使っていると思うのですが、PhotoShop は PNG ファイルのガンマ値を狂わせて保存してくれるので、このような現象が起きます。 これは Adobe が悪いのでそっちに文句を言ってください。
あと、手動でガンマ値の指定ができるツールでは、 自分のディスプレイに合った値を指定しておかないと変な色になります。

・俺はアニメーション GIF 職人なんだ。それができない PNG はカスだ。

これに関しては、MNG の仕様が固まって、正式発表されるまでは GIF を使わざるを得ません。 ただ、このページにアニメ GIF はありませんので。

・画像に GIF を使ったページを別に作っておいてくれても良いじゃないか。

データの同期が非常に面倒なのでやめました。ごめんなさい。 Perl なんかを修得して、そういう事が自動化できるようになったら作るかも。

・色を透明色指定しても、NN で表示したら透明にならないじゃないか。

Netscape Navigator4.0X 及び 4.X で起こる現象ですが、 NN のバグですので文句は Netscape Communications (AOL かな ?) へどうぞ。

・対応しているブラウザを教えてくれ。

確認がとれている(らしい)ものとしては、以下のものがあります。

Internet Explorer 4(Win, Mac), 4.5(Mac)

基本的には問題ありませんが、Windows 版の方ではドラッグ & ドロップでの表示が出来ません。 Mac版の方は判りません。「Mac 版で表示できない」という方は上の方を参照してください。

Internet Explorer 5(Win, Mac)

殆ど問題ありません。ドラッグ & ドロップでの表示もできます。ただ、グレースケール (「明るさ」の値だけで構成された画像)の PNG の透明色が無視されるというバグがあります。

Netscape Navigator 4.04 〜 (Win, Mac, 各種 UNIX 系 OS)

バージョン 4.04 以降で対応済みです。ドラッグ & ドロップも可能です。 但し、全ての透明色が無視されるというバグがあります。

Mozilla M13〜 (Win, 各種 UNIX 系 OS)

Windows 版で問題なく表示されることを確認しています。 ドラッグ & ドロップに対応しているかどうかは未確認です。

Netscape Navigator 6 PR1〜 (Win)

対応済みとの情報がありますが、これっぽっちも見たことがないので何とも言えません。多分大丈夫でしょう。

Lite 1.08a

問題なく表示できるようです。ドラッグ & ドロップもできます。

4. 参考文献・関連サイト

以下に PNG 関連のサイトの URL を載せておきます。 興味を持たれた方は一度見てみるとよろしいかと。

このページの編集中に、かなり参照させて貰いました。っていうか、半分ぐらいパクりっぽい……(汗

PNG Home Page (英語)

PNG の総本山 (?)。英語なので私にはさっぱり(ぉ

Burn All GIFs Day (英語)

「GIF」と書かれた旗 (だったっけ ?) を燃やすパフォーマンスで、一躍有名になった団体 (?) のページ。

W3C による、PNG の仕様書 (日本語訳版)

仕様書です。プログラマ系の方はどうぞ。

PNG について規定している RFC (RFC 2083) (英語)

基本中の基本なのですが、やはり英語なのでさっぱり(ぉ

• 2000/05/01: 追記: 「特徴」に、α値(だっけ？透明度)について追記。
• 2001/07/30: 全体的に css を使って書き直し。