2001.05.16[水]更新

	2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 ■ 蘊蓄＆Tips＠2001：サムネールの考察（GIF vs JPEG） GIF32 color 5,109byte GIF64 color 6,563byte JPEG高画質60 9,543byte Mac環境を完全にPowerBook G4に切り替えた結果、自分で作っているHomePage（つまり、ここである）のサムネール画像の画質がとっても気になるようになってしまった。ついでに言えば、PowerBook G4レポートでも触れている通り、起動するたびに切り替わる「おね〜さん系デスクトップ・ピクチャー」も全て容量の関係からJPEGにしていたので、これまたブロックノイズが異常に気になるようになってしまった。何故かと言えば、それはPowerBook G4の液晶画面の表示特性が今まで10年以上慣れ親しんでいたCRTと全く違うからである。具体的に言えば、液晶画面は画素一つひとつが個別に発色発光し、CRTでは不可避な「画素の滲み」が全くないため、その結果としてGIFのディザリングやJPEGのブロックノイズなどが物凄く目立つのである。このページの冒頭に例示したパワーアダプターの画像を液晶画面で見比べれば一目瞭然なのだが、今までCRTでは余り気にならなかった32色に減色したGIFなんかまるで見られたもんじゃない。64色でもグラデーションがある画像の場合はまるで駄目なのである。 それでは、今までは何故サムネールについて基本的にGIFにこだわってきたかというと、1995年夏にインターネットに填ってからすぐに、いきなり仕事としてHomePage作りに関わることになり、その結果、当時のブラウザーの環境から確実にブラウザーでインライン表示できるのはGIFしかなかったと言うのが第一の理由である。当時の古いバージョンのブラウザーだとJPEGを直接インライン表示できないものが多かったのだ。 もう一つの理由は1995年〜96年当時、PCの多くはまだ256色表示だったからである。言うまでもないがGIFは最大256色であり、JPEGは原則としてフルカラー（24-bit≒1677万色）である。こっちは仕事でHomePageに関わるわけだから、クライアントである企業としては「誰にでも見ることが出来ること」あるいは「なるべく同じように見えること」は必須要件だからである。もちろん、この要件は永久に変わらない。そして最後の理由はJPEG固有のノイズ問題なのだが、これは後回し。 さて、まずはGIFのサムネール。とにかく、今までは気にならなかったが、今や気になるのであるから、どうにかしなければいけない。自分のHomePageは自己満足のためだけに作っているのだから、自分でブラウズして気持ち良くなければ直すしかないのである。と言うわけで、このHomePageのサムネールを自分でチェックして、画質的に気になるものについて、可能な限りGIFからJPEGに入れ替えた。 その結果、気分は個人的にはとってもすっきりしたのだが、一応、Mac歴12年つまり画像処理歴も12年なので、その辺の知識がまだ浅い人向けにMac雑誌みたいなまとめ方をしてみよう。 GIFは今はなきCompuServe（1980年代後半には世界最大のパソコン通信会社だった）が開発した汎用画像フォーマットで、最大表示色数は（今となれば、たったの）256色だが、可逆圧縮＝圧縮と伸張を繰り返しても画質が劣化しない＝であり、透過GIF（トランスペアレントGIF＝指定した特定の一色を透明色として指定できるので、いわゆる「抜き版」が可能）やインターレースGIF（見かけ上の表示を早く見せるために、最初はぼやけたモザイク調から表示をはじめる）などの機能を持ち、今日只今現在でも、未だにインターネット上のHomePageの表示画像の主流の座をキープしている優れたフォーマットである。GIFには更にアニメーションGIFと言う「パラパラ・アニメ」機能もある。Flashなどと違い、プラグインが不要なので互換性が高く重宝する。しかし従来のモデムでの接続による通信速度の遅さを前提とすると、GIFのフルスペックである256色ではデータサイズが大きくなりすぎるので、Adobe Photoshopなどを駆使して、いかに減色して画像を軽くするかというノウ・ハウが必要になるのである。 だがどっちにしろ最大で256色なのである。よって、グラデーションがある画像には弱い。下のチェリー・サンバーストのGibson Les Paulの画像比較で分かるとおり、グラデーション＝ある色から別の色への連続的な階調変化＝があると、表示色数が少ない場合はディザリング処理の結果、かなり悲惨なことになる。※なお蛇足だが、最もグラデーションが顕著な画像が「おね〜さん系美麗写真」であることは言うまでもない。女性の肌ほど微妙なグラデーションは他に無いからである。 GIF32 color 6,443byte GIF64 color 9,269byte GIF128 color 11,980byte GIF256 color 14,793byte JPEG高画質60 7,804byte 上の画像比較で重要なのはサイズである。そうしてみるとGIFで黄色から赤へのグラデーションがちゃんと表現できているのは256色のものだが、これだと1677万色表示のJPEG高画質のものの倍のサイズになってしまう。幾ら画質に満足できても、データが大きくなり過ぎるフォーマットはインターネットには適さないのである。だったら全てJPEGでいいじゃないかと考える人が多いし、実際、サムネールやロゴが全てJPEGで作られているサイトは多い。企業サイトでもそう言うところがある。 ところがややこしいことに、これはとんでもない勘違いであり、技術的並びに表現的には大間違いである。 それを理解するために、今度は「このHomePageのロゴ」の比較画像を見てみよう。 GIF32 color 1,860byte JPEG低画質10 1,039byte JPEG標準30 1,507byte JPEG高画質60 2,582byte JPEG最高画質80 4,017byte 画像的に綺麗なのは両端である。それ以外の三つは全てロゴとしては使えない画質である。どう使えないかと言えば、見てお分かりの通り「dp」と言う文字のアンバー色のベタ部分（本来1色だけの部分）が無惨に汚れてしまっているからである。では、何故こう言うことになるのか？ これはJPEGと言うフォーマット固有の圧縮ルーチンにある。JPEGは元々、人間の視覚の特性（一種の錯覚）を利用して、風景や人物など写真のようなフルカラー画像を非常に効率よく、見た目はとっても綺麗なままで圧縮出来ることに特長がある。これをひっくり返して言うと、イラストや漫画やロゴや図案のようなベタ版が多い画像の圧縮には向かないのである。だから実は右端の「JPEG最高画質80（4,017byte）」のものも、拡大して見るとベタ版部分が劣化しているのが分かる。これをブロックノイズという（下図参照）。 GIF32 color(1,860byte) JPEG最高画質80(4,017byte) ベタ部分はベタのままである ベタ部分が微妙にディザリングしている ※JPEGのブロックノイズのサンプル画像をJPEGで保存すると、 またブロックノイズが乗るので、右はGIFで保存してある。 ああ、ややこしい。 なんでこう言うことになるかを概念的に説明してみよう。 JPEGは画像を左上から8×8 pixelに分割し、その64 pixel平方を単位にして、JPEG独特の圧縮アルゴリズムによって画像を処理して行く。だから、例えば、ある画像が左上から順番に次のような内容で「64 pixel平方」単位で並んでいるとするとどうなるか。 (1) (2) (3) ベタ部分がない ベタじゃない部分と ベタの部分が 半分ずつ 全部がベタ 上記で(2)と(3)にまたがるベタ部分は同じ色なのだから、本来は圧縮処理後も同じ色でなければいけないが、JPEGの処理は各ブロックごとに行われるので、(2)の中のベタはベタでない部分の影響を受けるから(3)のベタとは異なる状態になるのである。だから例えば下記のようなことになるのである。 GIF32色（1,475byte） JPEG低画質20（1,911byte） JPEG標準40（2,406byte） JPEG高画質60（3,960byte） ご覧の通り、一番サイズが小さく、しかも、たったの32色で作られたGIFファイルの方が、どのJPEGファイルよりも綺麗なのである。 であるから多数の企業サイトで、実際に、この例のJPEGファイルと同じように妙に汚れた感じのロゴやボタンアイコンを見るケースがある。それらを作成しているWebデザイナーに基本的知識がないと、そう言う極めてみっともないことが起こるのである。 先ほどのギターを例にしてJPEG画像をさらに詳しく見てみよう。 (1)拡大するとブロックノイズがあるのが分かる (2)黄色が右側の黒の影響で汚れている (3)周りに他の色がないから綺麗な黄色部分 JPEG高画質60 ※但し実際の保存フォーマットは前述のごとくGIF 上の三つの画像をそれぞれを良く見てみると次のことが分かるだろう。 （左）細かいドットとは別に、何となく大きなブロックの塊があることに気が付くだろう。仔細にチェックすると、それぞれは8×8ピクセルであることが分かる。実サイズでは分からない。 （中）元画像には無いはずの汚れが発生している例。黄色と他の色が接しているので黄色側が影響を受けてディザリング処理されているのが分かる。実サイズでも目に付く場合が多い。 （右）広い範囲が黄色系なのでノイズが目立たない例。ただし良く見るとブロックがあることは分かる。実サイズでは人間の目には全く分からない。 ここでもう一度、GIFとJPEGを同じ画像の別の部分で比較してみよう。下図の実寸版（小さい方）を比較すると左（GIF）の方が、ややすっきりしていると感じるだろう。逆に言えば右（JPEG）は汚れた感じである。大きな違いではないが、フルカラーの筈のJPEGよりも、256色のGIFの方が多少綺麗に見えると言うこと自体が不思議と言えば不思議なのである。 GIF256 color JPEG最高画質80 この部分だけを比較するとややGIFの方が綺麗である。 ではブロックノイズについて更にしつこく例示してみよう。 まずは「8×8 pixel」のチェッカーフラッグ模様である。この場合、JPEGの圧縮アルゴリズムの単位である「8×8 pixel」と同じなので下図のようにブロックノイズは殆ど目立たない。しかし皆無ではない。JPEGのそれ以外の圧縮アルゴリズムの影響である。 GIF(2c) 300% GIFの得意な画像なのでディザリングは一切無い JEPG標準 300% 原寸だと大きな問題はないが、拡大画像を良く見ると赤の部分に僅かなディザー処理があるのが分かる。発生する場所も決まっている。なお例によって拡大画像の実際のフォーマットはGIF 次は「10×10 pixel」のチェッカーフラッグ模様である。この場合はJPEGの圧縮アルゴリズムの単位である「8×8 pixel」とは数値が違うので下図のようにディザリングしていることがはっきりと分かってしまう。 GIF（2c） 300% GIFの場合とにかくこう言う単純な画像は綺麗である JPEG標準 300% こちらの場合、原寸でも「汚れ」が分かる。拡大図を見ると不規則なディザー処理が赤の部分で目立つが、白の部分でも微妙なディザー処理が発生していることが分かる。液晶画面だと更にはっきりと分かる このように、GIFとJPEGはそれぞれに一長一短がある。だから、それを完全に理解した上で目的に合わせて使わないと結果が自分の思った通りにならない場合が多い。もちろん、データの大きさを無視して、GIFなら全部256色ディザリング処理、JPEGは全て最高画質と言う方法もあり得るが、そうなると当然、ページが異常に重くなる。HomePageを閲覧している人の全員がブロードバンドではないのだから、この方法は実際には使えないのである。だから、自分なりのノウ・ハウを蓄積して軽くて、しかも綺麗なページを作るように心掛けるしかない。 JPEGにはもう一つ注意しなければならない点がある。それはJPEGが不可逆圧縮だと言うことだ。つまり圧縮と伸張を繰り返すとどんどん画質が悪くなるのである。 もっと分かりやすく言うと、一度でも保存し直したJPEG画像は必ず元画像よりも劣化しているのである。だから、例えばデジカメの元画像のフォーマットは普通はJPEG（それも容量の関係から、大抵は標準画質）だから、加工後のデータは一端、Adobe Photoshopフォーマットなどの可逆圧縮フォーマットに保存しておかなければいけない。一度でもJPEGで保存し直すと必ず元画像よりも劣化するからである。後でまた画像加工をする場合、JPEGでしか保存していない場合は、無加工の元データから全てをやり直さないと画質がどんどん悪くなると言うことである。 なお、GIFの良い点（可逆圧縮、透過GIF、ベタが綺麗。互換性抜群）とJPEGの良い点（フルカラー。写真が綺麗。その割りにデータが軽い）を両方兼ね備えたフォーマットがあればいいわけだが、実はそれに近いものは既にある。それがPNGである。これは基本的にGIFの発展形なのだが、Adobe Photoshop 6などで作成することが出来る。しかし残念ながら最新版のブラウザーでないとインライン表示できないので汎用性に欠ける。だから実際にはHomePage上で使うことが躊躇される。また、実際に下記にPNG画像を掲載したが、確かに綺麗ではあるが、サイズ的にはJPEGほど軽くはならない。 PNG-8 20,969KB PNG-24 62,255KB PNG-8（300%拡大） PNG-24（300%拡大） 要するにこう言うことである。 軽さ＝表示の速さを優先するか？ 互換性を優先するか？ 画質を優先するか？ そのどれを重視するのかと言うことなのだ。全てを満足させる方法論は現時点では存在しない。将来的に汎用画像フォーマットやPDF（あるいはその発展形）あるいはXMLエンジンが全てのPCやモバイル端末に100％装備されるまでは、この命題は解決しない。自分なりのバランス感覚で処理するしかない。 最後になるが、このページは（これを書いている時点では）このHomePageで最も重い＝表示に時間が掛かる＝ページの筈である。理由は言うまでもなく、画像フォーマットによる画質の違いをインライン＝ブラウザー上で他のウインドウなどを開かずに＝説明するために、他のページのような画像サイズと画質の妥協点を無視しているからである。このことでも分かる通り「誰でもみんな光ファイバぁ〜」みたいな時代が来るまでは、まだまだ色々とノウ・ハウを駆使しなければいけないのが、HomePageというものなのである。 追記：ところで世の中では次なる画像フォーマットの決定版が策定されつつある。それをJPEG-2000と言う。このJPEG-2000は上で述べたような問題点を全て解決するものであり2001年夏以降市場に登場するようである。従来の環境との互換性の問題などがあるので切り替わるまでは時間が掛かるし導入に失敗すればPNGのようなことになりかねないが、今度は大丈夫そうではある。しかし互換性の関係から導入そのものはかなり先になるであろう。