すべての GIF 画像を PNG 画像で置き換えることができるのでしょうか？PNG 画像は、私たちのブラウザーで見えるのでしょうか？問題は発生しないのでしょうか？これを詳しく見ていきます。
調査するブラウザーは、日本語 Web サイトをほぼ満足に表示できるブラウザーの中で、シェア率の大きさから選び、
これらを調査しています。( ) 内は 2003年 9月現在のシェア率を表していますが、あくまで参考程度として下さい。プラットフォームとなる OS は Windows XP を使用しました。
| 画像種類 | GIF | PNG |
| サンプル |
|
|
| ファイルサイズ | 7484 バイト | 5840 バイト |
| 色数 | 256 色 | 256 色 |
| Internet Explorer 4〜6 | ○ | ○ |
| Netscape Navigator 4.03 まで | ○ | × |
| Netscape Navigator 4.04 以降 | ○ | ○ |
| Netscape 7 | ○ | ○ |
| Opera 7 | ○ | ○ |
PNG 画像は、Netscape 4.04 未満では見ることができません。その他のブラウザは皆表示できます。
目を凝らしてみましたが、GIF も PNG もどちらも見た目には変わりません。よく考えてみれば、GIF も PNG も可逆圧縮（画像劣化が無い）なので、それは当然の話です。PNG に変換することで、ファイルサイズが３割ほど小さくなります。
注意！ 「GIF 画像を PNG 画像に変換すると、ファイルサイズが増えてしまった！」と嘆いている人を非常に多く見かけます。これは、次のような誤った変換をしているからです。
正しい変換： 256色 GIF → 256色 PNG
誤った変換： 256色 GIF → フルカラー PNG
誤った変換では、ファイルサイズが無駄に増えてしまいます。気をつけましょう。ツールによっては、256色 PNG という保存形式が無いかもしれません。
GIF に透過機能という、いわばスケルトン機能があるのと同様、PNG にも透過機能を有します。
| 画像種類 | 透過 GIF | 透過 PNG |
| サンプル |
|
|
| 色数 | 256 色 | 256 色 |
| ファイルサイズ | 1827 バイト | 1659 バイト |
| Internet Explorer 4〜6 | ○ | ○ |
| Netscape Navigator 4.03まで | ○ | × |
| Netscape Navigator 4.04以降 | ○ |
× (見えるが、 透過には非対応) |
| Netscape 7 | ○ | ○ |
| Opera 7 | ○ | ○ |
残念なことに Netscape 社は、Navigator 4.x に透過 PNG をサポートさせようとする動きはありませんでした。その他のブラウザでは問題なく表示できます。
えっと勘違いしないで下さい。サンプルは、256 色透過 PNG ですが、もちろんフルカラー透過 PNG だってＯＫです。
GIF 画像を使っている人には何のことやらさっぱりですが、PNG 画像にはα（アルファ）チャンネルという概念があり、これを用いることにより、さらに複雑な透過画像が作成できます。αチャンネルの詳細は、３章で詳しく説明していますが、ようするに、透過領域と透過率を自由自在に設定できるのです。まだよくわからないって？ では、下をご覧下さい。
| 画像種類 | αチャンネル PNG | （参考）左の画像はこう見えるはず |
| サンプル |
|
|
| 色数 | フルカラー | −−− |
| Internet Explorer 5〜6 | △（背景が透過されない） | |
| Netscape Navigator 4.04 以降 | ×（αチャンネルに非対応） | |
| Netscape 7 | ○ | |
| Opera 7 | ○ |
さて、あなたの環境は、αチャンネルに完全に対応しているなら、左右の画像はほぼ同じように見えるでしょう。そうでない方は、右の画像を参考に見てください。右の画像は「PNG が正しく見える環境なら、左はこう見えるべきである」というサンプル画像です。αチャンネルについては、Netscape 7 や Opera 7 は完璧に表示しているように見えます。
これは、ピンク色のチェックの背景画像の上に、ひとりの少年の PNG イラストが重ねて置いてある配置になっています。イラストの PNG 画像は、αチャンネルを用いて、透過率０％、２５％、５０％、７５％、１００％の 5 つの領域を設定してあります。少年のりんかくの外側は１００％で完全透明であり、背景が透けてみえますね。透明度の度合いを変えて、背景が徐々に透ける感覚をご覧下さい。なにやら４分割されているような感じですが、少年はこれでひとつの画像なのです！ その証拠に、境界がフリーハンドのために若干ふにゃふにゃしているでしょう。このように、PNG のαチャンネルは非常に強力で、透過領域と透過率を自由に設定することができます。
補足: この画像をどうやって作成するかの質問が多く寄せられています。Adobe Photoshop をお持ちの方は、αチャンネルの使い方を探してみてください。
αチャンネルはあなたに何をもたらすのでしょうか。これまで、Web デザイナーを悩ませたことのひとつは、GIF 画像では完全なアンチエイリアシングを実現することができないことでした。たとえば、白背景上でアンチエイリアシングを施した透過 GIF 画像を、緑の背景に乗せると、ひどく格好の悪いことになります。従って
などと、背景色で分けて素材を配布しなければなりませんでした。
しかし、αチャンネルを用いれば、透過率を自由に設定できますので、どんな背景にもマッチできる完全なアンチエイリアシングを実現することができます。（ ブラウザーがαチャンネルに対応する必要がありますが。）
「インターレース」とは、全部データを読み込まないうちから、画像の全体像がじわじわと表示され、ロードが進むにつれ段階的に詳細に映っていくデータ形式です。インターレース無しに比べて、若干データサイズが増加します。どのくらいサイズが増加するのか、調べてみましょう。
| サンプルに用いた画像 |
 実験に用いた実際のサイズは、もっと大きいです。なお、画像は天文シミュレータ・プラネタリウムソフトの「FarSky-天球図」で作成しました。 |
|||
| 画像種類 | GIF 256色 | PNG 256色 | PNG フルカラー | JPEG フルカラー |
| 標準 | 42.2 kb | 39.9 kb | 52.2 kb | 108 kb |
| 変換をかけて… | ↓ | ↓ | ↓ | ↓ |
| インターレース （プログレッシブ） |
43.1 kb | 46.5 kb | 61.8 kb | 103 kb |
| サンプル体験 |
インターレース体験コーナーを見てみる あなたの目で実際にジワジワ効果を確認してください。 |
|||
PNG のインターレース機能は GIF より優れていて、GIF よりも全体像がつかみやすいのです。これは インターレース GIF が走査線単位で表示しているのに対し、インターレース PNG は、8x8ピクセル単位の正方形を徐々に埋めるようにじわじわと表示していくからです。
しかしファイルサイズという点では、インターレース PNG は膨らんでしまう傾向にあります。これは、インターレース化することで、圧縮効率があまりにもひどく低下するからです。むやみやたらにインターレースにするのではなく、クリッカブルマップなどに適用するのがよいと思われます。
インターレース PNG についてさらに詳しく知りたい方は、「第 3 章 PNG スペック」のインターレースの項を参照して下さい。
| 画像種類 | アニメーション GIF | MNG | Flash |
| サンプル |
|
|
|
| 色数 | 256 色 | 256 色 | 256 色 |
| ファイルサイズ | 52 KB | 50 KB | 44 KB |
| Internet Explorer 4〜6 | ○ | × | ○ |
| Netscape Navigator 4 | ○ | × | ○ |
| Netscape 7 | ○ | △ | ○ |
| Opera 7 | ○ | × | ○ |
アニメーション GIF の有力な代替手段は、現在のところありません。
PNG と同様のテクノロジーを採用し、アニメーションに対応させた MNG (Multiple-image Network Graphics) 規格が提唱されましたが、ユーザーやデベロッパーの反応は無く、まったく普及しませんでした。唯一の対応ブラウザである Netscape 7 では、将来 MNG のサポートが取り除かれる議論がなされています。
現在、アニメーションの手段として最も有力な候補が、Flash ムービーです。ブラウザの対応度は抜群で、しかも GIF アニメよりもサイズが小さくなりがちで、CPU パワーの消費も軽いといういいことづくめに見えますが、一番の問題は、開発ツールの少なさです。また、Windows OS 以外での再生がイマイチであるという欠点もあげられます。
HTML で画像を表示させる方法として普通に用いられているのが IMG 要素でしょう。しかし、A 要素で直接、画像にリンクを貼るときがあります。この場合に、小さな問題が出るかもしれません。
クリックすると画像が見えます。単純に <A href="〜"> でリンクを張っています。
| 画像種類 | GIF 画像へのリンク | PNG 画像へのリンク |
| クリックしてみて！ | 【GIF 画像】 | 【PNG 画像】 |
| Internet Explorer 5.0まで | ○ | × |
| Internet Explorer 5.5以降 | ○ | ○ |
| Netscape Navigator 4.03 まで | ○ | − |
| Netscape Navigator 4.04 以降 | ○ | ○ |
| Netscape 7 | ○ | ○ |
| Opera 7 | ○ | ○ |
さて、あなたの環境では、リンク先の画像がうまく見えたでしょうか？ Nn では何の問題もありません。困ったことに古い Ie ユーザの方は、PNG 画像へのリンクをクリックすると、「ダウンロードしますか？ 1. 実行する 2. 保存する」などというダイアログがでてくる人が大半でしょう。PNG 対応ブラウザは、PNG ビューアになりうるのですが、初期状態では関連付けられていないために、こういうわずらわしいダイアログが出てきてしまいます。この問題は、ユーザが現在の最新のブラウザーにアップデートすることで完全に解決されます。
いかがだったでしょうか。ブラウザーの進歩・普及により、普通に PNG 画像を表示するだけなら、ほとんど問題ないレベルまで来ています。しかし、突っ込んで検証すると、ささいな問題が出てきました。GIF 画像と PNG 画像を天秤にかけていただき、あなたが選んだのはどちらでしょうか。PNG を使わないまでも、ちょっと試しに使ってみようかな、と思われるかもしれません。
さて、次の第３章では、PNG フォーマットのスペックを解説しています。最新の画像フォーマット「PNG」に興味を持たれた方は、どうぞ次にお進み下さい。