GIF、JPEGに続く新しいグラフィックス

ウェブ画像の料理法

GIFに替わる新世代の画像フォーマットとして提唱されているPNG（ピング）フォーマット。浸透するにはまだまだ長い時間が必要だとはいえ、多彩な表現能力を持つこの形式を使わない手はない。特許問題が気になる人もこれからホームページを作ろうという人も、まずはいろいろと使ってみながら少しずつPNGを理解してみてはどうだろうか。

仲町六朗
センス問題のためにフリーソフトの多数がウェブ画像の中心フォーマットであるGIF をサポ1時間目ートできない状態であることもまた事実だ。
こうした特許の枠に拘束されない圧縮方法を用い、なおかつ既存のGIF の仕様よりも拡

PNG誕生の背景を知ろう張されたフォーマットとして提唱されたのがPNG（ Portable Network Graphic）で ある

Jump 02 。パブリックなフォーマットとして W 3 C によっても使 用 が推 奨 されている

Jump 03 。普及にあたってはブラウザーでの表示機能の充実など問題は多い。しかしGIFをはるかに上回る多彩な機能を持つPNGの良さを十分に理解すれば、今後のホームペウェブ画像の標準として使われるGIF フォージづくりにも大いに役立つことだろう。

Burn All GIFs
GIF がウェブ画像として普及するとともに態度を急変させたUnisys社に強い批判が集中し、昨年抗議のデモも行われた。

burnallgifs.orgーマット。その圧縮アルゴリズムとして使われている「LZW 法」は米 Unisys 社が特許を有している

Jump 01 。GIF フォーマットそのものに対して特許が認められているわけではないが、結局のところ一部を除きGIF画像を作成するすべてのアプリケーション開発にあたって

米 Unisys社によるLZW特許とソフトウェアに関するサイト
Jump 01 www.unisys.com/unisys/lzw/

PNG Home Site
Jump 02 www.libpng.org/pub/png/

同社とのライセンス契約が必要になっている。
現実的にはGIF画像を普段使うぶんには今後も大きな支障が出るとはいえないが、ライ288 INTERNET magazine 2000/8

W3CによるPNGについての解説
Jump 03 www.w3.org/Graphics/PNG/

インターネットマガジン／株式会社インプレスR&D

W3C（ダブル・スリー・シー／ World Wide Web Consortium）：WWWの発展との相互運用性の確保のために、企業や研究所、大学をメンバーとして設立された世界的な組織。
HTMLやCSS、XMLの仕様書を勧告として公開している。
©1994-2007 Impress R&D

フルカラーをサポートしている。つまり最大でPNGはココが強い!

48 ビットカラー（約 281 兆色）を表示でき2時間目る。GIF フォーマットが最大 256 色のカラー

PNGの特徴を知ろう

パレットしか持てないのに対して、とてつもな●高い圧縮率

いアドバンテージだ。

●インデックスカラーをサポート●最大 48ビットのフルカラーをサポート

また透明属性もGIFが単一の色を透明化す●可逆性圧縮なので画質が劣化しないるのに対して、PNG ではアルファチャンネルによって各ピクセルごとに256 段階の透明度●アルファチャンネルによる各ピクセル256階調の透明属性を持てるを指定できる。もちろんGIF と同様に任意の●圧縮アルゴリズムはライセンスフリー

色を透明化することもできる。
そしてJPEGが画質劣化を伴う非可逆性圧

PNGの弱点はココ!

縮であることに対し、PNG は可逆性圧縮、つまり画質を劣化させることなく圧縮、伸張
PNGがサポートするカラーモードは多彩だ。

●古いブラウザー（インターネットエクスプローラ3、ネットスケープナビゲーター3以前）で標準サポートされていないできるという点も大きな特徴だ。

RGB またはグレースケールで色数は2、4、ほかにも画像がじわじわと表示されるイン

16、256 色のインデックスカラーおよび最大ターレース表示のサポートや、異なるデバイス16ビット（65536階調）までのグレースケー

でもオリジナルの明度と輝度で表示するガンル。さらにRGB各8ビットおよび16ビットのマ値の保持機能なども見逃せない。

●アニメーション機能がサポートされていない●ネットスケープ 4 では透明属性が認識されない

ウェブ画像の料理法

全体像を把握しやすいAdam7インターレース表示
PNGのインターレース表示では画像を8 ピクセル四方の矩形領域に分割し、7 回の走査で画像を表示する。GIF の表示に比べて粗 い状 態 でも画 像 の全 体 像が把握しやすい。
※注：この例はインターレースの様 子 を仮 想 的 に再 現 したものです。

高い圧縮率によりファイルサイズを抑える
BMP256 インデックスカラー

60005

GIF Webカラー（216 色）

バイト

11654

PNG Webカラー（216 色）

バイト

11184

バイト

透過指定あり、Web カラーに減色した 256 インデックスカ
ラーの画像（400 × 121 ピクセル）を作成した。GIF に比べて PNG の圧縮率がサイズ比で5 パーセントほど高い。ただし画像にもよるのでGIF より高い圧縮が 100 パーセント期待できるわけではない。

48ビットカラー（約 281兆色）のハイスペック
JPEG 標準圧縮

GIF Webカラー（216 色）

2085
バイト

誌面では表示できないほどの色深度（最大 48 ビット）を持てるのがPNGだ。ファイルサイズも大 きくなるが、 元 の画 像
（ 320 × 240 ピクセル BMP、238,102 バイト）と比較するとおよそ 14 パーセントに圧 縮 され、画質の劣化もない。JPEGはファイルサイズこそ小さいがグラデーション部分に劣化が発生しザラつきが見られ、GIF はトーンジャンプが見られる。

PNG 24 ビットフルカラー

16560

バイト34433

インターネットマガジン／株式会社インプレスR&D

バイト

アルファチャンネル（Alpha Channnel）：カラー画像を保存するとき、RGBやCMYKなど色要素に分解してチャンネルを設定し、画像の情報を記録するが、これに加えて編集用の情報を保存するチャンネルをアルファチャンネルと呼ぶ。一般には透明度を指定するチャンネルであることが多い。
©1994-2007 Impress R&D

INTERNET magazine 2000/8289

サンプル1

3時間目

IE5 ウインドウズ

ネットスケープ4.7 ウインドウズ

ブラウザーで見くらべてみよう
フルカラー、256 インデックスカラー、グレースケールのPNG画像を各ブラウザーで表示比較した。

PNGはJPEGとGIFの良いとこ取りをしたグレースケールがベタで表示される。

問題なく表示される。

ような便利なフォーマットにもかかわらず、いまだ普及にはほど遠い状況だ。GIF のようにサンプル2アニメーション表示ができないといった点にもIE5 ウインドウズ

原因はあるのだが、なんといってもIE そして

ネットスケープ4.7 ウインドウズ

ネットスケープという2 大ブラウザーの旧バージョンで標準サポートされていなかったことが最大の原因だろう。
旧バージョンでもプラグインで表示できるが、最新バージョンを導入したほうが賢明だ。
IEでは4.0以降、ネットスケープではバージョン4.04 以降で標準サポートされている。ただ透明属性を持ったフルカ
ラー、256 インデックス
カラー、グレースケールのPNG画像を各ブラウザーで表示した。

しウィンドウズ版IE5ではグレースケール画像の透明属性に非対応であり、ネットスケープ
4 ではすべての透明属性に非対応という問題も残されている（開発中のネットスケープ

単色の透明属性は活かされるが、256階調のアルファチャンネルで指定した透明属性の部分がグレースケールの掛け合わせで表示される。

6PR1でも完全には対応していない）。当面は透明属性を適用しないほうが無難だ。

3 つのサンプルすべての透明属性が無視された。1 番上の画像は周辺部の透過が反映されず、下の2 つは透過に指定した色が消えずに表示されている。

各ブラウザーのPNGへの対応状況
標準ではサポートしていない。プラグインによって表示可能だがインライン表示はほぼ不可能で、プラグイン自体すでに入手は困難。
インライン表示について標準サポート。HTMLで記述された画像表示のみしかできず、ドラッグアンドドロップによる表示はできない。
ドラッグアンドドロップを含めて標準サポート。ただしアルファチャンネルによる透明属性が正しく反映されなかったり（単色の透過色指定はサポート）、グレースケール画像がベタで表示されたりする問題がある。

3.0 以前インターネット
エクスプローラ

4.0
5.0/5.5

ウィンドウズ
ネットスケープ

4.03 以前

標準ではサポートしていない。4.0〜4.03を使っている場合はアップデートしたほうがよいだろう。

4.04 以降

ドラッグアンドドロップを含めて標準サポート。ただし透明属性が無視されるので、透明色に指定した色が透過せず、そのまま表示されてしまう。
標準サポート。前バージョンで問題となっていた透明属性については、PR1 では単色の透過は認識できるもののアルファチャンネルに対応していない。

6

インターネット
エクスプローラ

3.0 以前

標準ではサポートしていない。

4.0/4.5

標準ではサポートしていない。ファイルヘルパーでの関連付けで表示できるようになるが、5.0へのアップデートをおすすめする。

5.0
マッキントッシュ
ネットスケープ

ドラッグアンドドロップを含めて完全サポート。透明属性やアルファチャンネルなども表示可。

4.03 以前

標準ではサポートしていない。4.0〜4.03を使っている場合はアップデートしたほうがよいだろう。

4.04 以降

ドラッグアンドドロップを含めて標準サポート。ただし透明属性が無視されるので、透過色に指定した色が透過せず、そのまま表示されてしまう。
標準サポート。透明属性については、PR1 では単色の透過は認識できるもののアルファチャンネルに対応していない。

6iCab

290 INTERNET magazine 2000/8

Pre2.0a

対応済み。透明属性やアルファチャンネルなども表示できる。

インターネットマガジン／株式会社インプレスR&D

プラグイン（plug-in）：アプリケーションソフトにあとから組み込んで機能を強化するためのソフトの総称。これを組み込むことで、そのアプリケーションが標準では備えていない機能を利用できる。
©1994-2007 Impress R&D

作成例：画像編集ソフト

4時間目

Adobe Photoshop5.5 と ImageReady

PaintShop Pro 6

PNGを作ってみよう

PNG画像を作るには特別なソフトウェアがいるわけではない。画像編集ソフトはブラウ

Photoshop5.5 とImageReady では適用パレットやディザの種類などを変え、プレビューサイズを比較しながらPNG画像を生成できる。PaintShop
ProではPNG用のオプション設定ダイアログで詳細な設定も可能だ。

PaintShop Pro+CD-ROM CD-ROM収録先：[B]Trial→

Win→ Psp6（体験版）

ザーに比べてPNGへの対応が早く、多数の市販ソフトでPNG フォーマットでの保存ができ

作成例：ホームページ作成ソフト

る。フォトショップやFireworks といったプ
ロ向 けのソフトだけでなく、 M i c r o s o f t

Adobe GoLive4.0

PictureIt!など家庭向けのソフトも対応して

FrontPage2000

いる。ただしフィルターやインターレースなどのオプション設定についてはまちまちで、本格的にPNG画像を作る場合はやはりプロ向けのソフトや定評のあるPaintShop Proなどを使うのがオススメだ。
ホームページ作成ソフトの対応状況も同様
で、インライン表示を含めてサポートしているものもあるが、一部のソフトでは表示できな
かったり保存時にGIF などに変換されたりと、
Adobe GoLive4.0はPNGを完全サポート。環境設定の「PNGモジュールサポート」をオンにすれば編集画面でも表示できる。PhotoDraw2000で作った画像を表示する際、FrontPage2000はIE5で表示できないグレースケール画像も表示できてしまうので作成時には気をつけよう。

完全にはサポートされていない。

おもなソフトの対応状況
Adobe Photoshop 5.5 + ImageReady 読み込み、保存ともに対応。プレビューで確認しながら色数を調整でき、透過マスクも作成可能。

画像編集ソフトウィンドウズ

Macromedia Fireworks3

読み込み、保存ともに対応。PNGをネイティブフォーマットとしているので細かい設定ができる。

PaintShop Pro 6

読み込み、保存ともに対応。インターレースおよび最適化の設定可。一括変換機能あり。

Microsoft Picture It!

読み込み、保存ともに対応。

DaisyArt ミレニアムバージョン

読み込み、保存ともに対応。

花子フォトレタッチ2

読み込み、保存ともに対応。インターレースおよび透明化、アルファチャンネルの設定が可能。

Macromedia Dreamweaver3

HTML編集画面でも表示可能。画像編集機能はないがFireworks3との連携で使えばOK。

Adobe GoLive4.0

画像編集機能はないが、HTML編集画面での表示はできる。

ホームページビルダー2001
ホームページ作成ソフト Adobe PageMill

画像編集ソフトマッキン
トッシュ

HTML編集画面で表示可能。付属のウェブアートデザイナーでもPNG形式で画像が保存できる。
使用しているブラウザーがPNGを表示できればインライン表示はできるようになる。

Microsoft FrontPage2000

編集画面で表示可能。画像編集機能はないので別途PhotoDraw（PNG対応）などが必要。

Netscape Composer

4.04以降のネットスケープならば編集画面での表示が可能（ただし透明属性は無視される）。

Adobe Photoshop 5.5 + ImageReady 読み込み、保存ともに対応。プレビューで確認しながら色数を調整でき、透過マスクも作成可能。
Macromedia Fireworks3

読み込み、保存ともに対応。PNGをネイティブフォーマットとしている。

Macromedia Dreamweaver3

HTML編集画面でも表示可能。画像編集機能はないがFireworks3との連携で使えばOK。

Adobe GoLive 4.0
ホームページ作成ソフト Adobe PageMill

HTML編集画面で表示可能。
使用しているブラウザーがPNGを表示できればインライン表示はできる。

ホームページPro3.0

HTML編集画面では表示できず、「壊れた画像ファイル」として扱われる。

インターネットマガジン／株式会社インプレスR&D

インライン： HTML 上で見出しや段落といった「ブロックレベル要素」を構成するものとして定義され、テキストや画像などのデータを表す要素のこと。ひとつのブロックレベル要素は複数のインライン要素を含められる。
©1994-2007 Impress R&DINTERNET magazine 2000/8291

画像を変換する

5 時間目 しをホ

変換ツールを使うてPー
しNム
まGペ
おにー
う ジ

Fireworks を使う

IrfanViewのBatch Conversion機能を使うとGIF画像を一気にPNGフォーマットに変換してくれる。MacではGraphicConverterなどがPNGでの出力に対応している。
IrfanView、GraphicConverter

従来のソフトウェアでPNGファイルが取り扱えるとしても、気になるのはすでに公開し+CD-ROM CD-ROM収録先： [A]Win→ Irfan[A]Mac→ GraphicConverter

PhotoshopやFireworksなどプロ向けの画像編集ソフトにはバッチ処理メニューがあり、複数のGIF ファイルを自動的にPNGフォーマットへと変換してくれる。ているホームページをどうするのかということだ。膨大な数のGIF 画像をPNG フォーマッ
トに変換し、さらにHTMLの必要な箇所を書HTMLを書き換える

き換える。力わざとなるが避けては通れない<IMG SRC="logo.gif">

道である。
画像フォーマットの変換については、画像編集ソフトの一括変換機能や専用の変換ソフトを使うのが楽だ。画像変換のときに拡張子の手前の名称を維持していれば、HTML ソースのほうは .gifを .pngへと置換していくだけで済む。ただしサイズ指定をしていな<IMG SRC="logo.png" WIDTH=320 HEIGHT=240>

い場合は新たにWIDTH 、HEIGHTの指定を付け加えたほうがいい。表示サイズの指定がない場合、ブラウザーによってはPNG画像がうまく表示されないことがあるのだ。

一括でPNG に変換したあとは、HTML ソース内の画像ファイル名の拡張子部分も変更しなければならない。エディターの置換コマンドを使って一括変換も可能だが、IMGタグの表示サイズオプションを指定していない場合はついでに追加するようにしよう。一部のブラウザーではサイズ指定がないとPNG画像がうまく表示されないことがあるからだ。

画像内の任意の1 色に透明属性を与えて四角形以外の画像が背景色にうまくなじむようにできるのもGIF の特徴の1 つだ。PNG フォーマットでも同様のことができる。
PNG では256 階調のマスク画像をアルファアニメーションGIFはどうするチャンネルとして適用する（つまり1 ピクセルガンマ値で色味を調整ごとに256 階調の透明属性を持たせる）ことも可能ではあるが、一部ブラウザーではこのアアニメーションGIF は動きのあるホームペールファチャンネルを認識しない。ネットスケー

PNG フォーマットの特徴の1 つに「ガンマジにはとても便利な要素だ。ところがPNG にプ4の利用者のことを考えると、当面は画像を値」の保存機能がある。ガンマ値はウィンドは複数のイメージを内包してアニメーション表作る時点で透明に見せたい部分を背景色になウズが標準で2.2、マッキントッシュが1.8と異示するという仕様は存在しないので、PNG でじむように設定しておくのが賢明だ。

なるのでいずれかの環境で作った画像の明るさはアニメーションはできない。現在 PNG フォーマットをベースとしたアニメーション用の画像フォーマットMNG が策定されているが、2は異なる環境だと暗く表示されたり明るく表示

透明 GIFの扱い方されたりする。PNG では任意のガンマ値を保持できるので、異なる環境でも色味を変えず大ブラウザーでは表示すらできない状況だ。どに表示できるのだ。ただしこれはガンマ値が適うしてもGIF以外でアニメーションを実現した正に設定されていることが条件だ。モニターのいならばMacromedia Flash が最適だろう。

明度や輝度が調整されている必要があるので、点滅などの画像切り替えといったレベルであれユーザーの環境によっては異なる明るさで表示

ばJavaスクリプトで制御するという手もある。

されてしまう可能性がある。

292 INTERNET magazine 2000/8

インターネットマガジン／株式会社インプレスR&D

拡張子：ファイル名の最後にピリオドで区切って記された文字列。ファイルの種類を表す。ウィンドウズでは特定の拡張子に対してアプリケーションを実行するように関連付けが設定されており、ファイルの拡張子から適切なアプリケーションを判別して起動するようになっている。
©1994-2007 Impress R&D

実際にホームページの画像をPNGに変換しPNGのフィルターて、全体のファイルサイズを比較してみよう。
画像によっては必ずしもファイルサイズが小さSub

左側のピクセルの色情報との差分を計算するため、横方向に同じ色が続くような画像に有効。

くなるとは限らないのでやや工夫も必要だ。

Up

上側のピクセルの色情報との差分を計算するため、縦方向に同じ色が続くような画像に有効。

があり、左のような4 種類の圧縮の仕方を設

Average

左側と上側のピクセルの色情報の平均値を取り、その差分を計算するため、同じ色が広がっているような画像に有効。

像の特徴をチェックしながら圧縮率を最大限Paeth

左側、上側そして左上側の3つのピクセルの色情報からの差分を計算するため、全体的に同系統の色味のグラデーション画像などに有効。

ただしフィルターはあくまでフルカラー画像

PNG フォーマットにはフィルターという機能定できる。最適なフィルターをかけることで画に利用できるようにしよう。
に対してのみ効果がある。カラーパレットを適用するインデックスカラー画像やグレースケー
ル画像には効果がない。

実際に変換すると変換前

変換後

ウェブ画像
ファイルサイズ

HTML+GIF:

計

99.9

キロバイト

ファイルサイズ

HTML+PNG:

計

96.5

キロバイトの料理法携帯電話もブラウザーとして無視できない勢力になってきた。現在 i モードはGIF のみしかファイルサイズが小さくならない場合216 色表示できない。またEZweb/EZaccessなどで7089える。そんななかでJ-スカイウェブサービスはバイト使われるHDMLではモノクロ2値画像のみが扱PNG を採用している。サポートしているのは256インデックスカラーのPNGだ。フルカラーの場合はRGB の各上位3 ビットを認識することでカラー画像を表示する。IMG タグに独自

BMP やPICT、JPEG といった画像からPNGに変換するとフルカラーのままファイルを生成してしまうことがある。これでは変換前の画像よりもファイルサイズが大きくなってしまうので、PNGを使うメリットの1つ「圧縮率」

64 色

5988の MOTION

属性を付加すれば、指定された画像を順次切り替えてアニメーションさせることもできるのだ。

バイト

気になる
携帯電話での対応状況は?

が生きてこない。PNG がGIF と同様に扱える
インデックスカラーを活用し、使用色数が少ないときはファイルサイズを抑えるようにしよう。
ImageReady では適用するパレットを変えた

16 色ときの画像をプレビューで比較できる。サイズ4641と画質のバランスはGIF を作るときよりも気をつかわなければならない。

バイト

インターネットマガジン／株式会社インプレスR&D

PICT（ピクト）：マッキントッシュで標準的に使われる画像フォーマット。ドロー系のベクトルデータとペイント系のビットマップデータが共存できる。

©1994-2007 Impress R&D

INTERNET magazine 2000/8

293

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.