画像A JPEGの圧縮の最大の特長は、輝度情報(上)と色差情報(中/下)を分離し、人間の眼には識別しづらい色差情報(中/下)を間引いてデータ容量を減らすしくみです。 ※ 『体系的に学ぶ デジタルカメラのしくみ』(日経BPソフトプレス刊)より 画像B　 Photoshop Elementsは画面上の画像をJPEGでもGIFでも保存することができます。では、どのような時にJPEGで保存し、どのような時にGIFで保存するのが適しているのでしょうか? 画像C ある画像をJPEGの画質「12」で保存するとファイルの容量サイズは約2652KBとなります。では画質「0」で保存すると… 画像D 同じ画像をJPEGの画質「0」で保存するとファイルの容量サイズは約133KBになります。

●JPEGのファイル容量が劇的に小さくなる理由

　デジタルカメラの撮影画像を保存したり、インターネットの画像ファイル形式でお馴染みのJPEGは「圧縮」によってファイル容量を小さくできて、その割には画質の劣化が少ないことで知られています。

そのために業界標準の画像形式として利用されているのですが、プロやハイアマチュアの人が見れば、高圧縮してファイル容量を縮めた画像ファイルの画質の劣化は明確に解ります。前回も最後に画質が劣化する事例をあげましたが、JPEGの圧縮と画質の低下、ファイル容量との関係をもう一度おさらいしてみましょう。

　JPEGは画像を輝度情報と色差情報に分離し、人間が感じにくい色差情報の信号を間引きしてファイル容量を減らします(画像A)。つまりヒトの目には気付かれにくいところで画質を落としているわけです。そのしくみの詳しくは私の別コラムデジカメPopEye「第14回 JPEG研究序説 〜JPEGの画質劣化を考える〜」で書いていますので、そちらを参照して下さい。

●JPEGは保存の際に画質を選択

　Photoshop Elementsの場合は、画像をJPEG形式で保存する際に画質を指定することができます。例えば、画像B〜はスナップ撮影術の画像をPhotoshop Elementsで呼び出してJPEGで保存する手順を示したものです。「画像オプション」で画質を0〜12まで指定できますが、その際に概ねのファイル容量とそれをインターネットなどでダウンロードしたときの所要時間の目安が、表示されています(画像Cの四角い赤枠(上))。

　画像Cは「12」で表示した場合、ファイル容量は約2652KB(約2.6MB)で、「56.6kbps」の通信環境の場合、約468秒(8分弱)かかる、ということを示しています。

　一方、画像Dは最低画質(ファイル容量を小さくすることが優先)の「0」で保存を指定した場合、ファイル容量は約20分の1、約133KBとなります。この容量は「56.6kbps」の通信環境の場合、約23秒かかることを画面で示しています。

　この例は、インターネットで掲載するにはずいぶん大きなサイズの画像なので、ホームページに使用する画像の事例としては現実的ではありませんが、このようにJPEG保存の際に、インターネットなどで画像をやりとりした場合、どのくらいの所要時間がかかるのか、目安がひと目で解るしくみになっていることを知っておくと便利だと思い、紹介しました。

●56.6kbpsってなに?

　ちなみに「56.6kbps」という数値はどんな通信環境を表しているのでしょうか?

　これはISDN(INS64)で通信した場合の理論値と同じです。インターネットにアクセスする通信環境は様々ですが、ISDN程度を基準として時間を表示しているわけです。例えば、「ん〜? 今時、ISDNが基準というのもどうかな。僕のホームページはADSLなどのブロードバンド環境のユーザを基準に制作する方針でいいんじゃないかな」という人は、この数値を引き上げて設定して構いません(画像E)。例えば1MBbpsの通信環境の人を基準にすると画質「0」で保存したファイルはわずか1秒でダウンロード(表示)できる目安ということになります。

画像E ベースラインやプログレッシプとは?

　ところで先程、画面事例で解説したJPEGファイル保存の際の「オプション」欄に「ベースライン（標準）」「ベースライン（最適化）」「プログレッシブ」の3つが選択できることに気付いた人もいるでしょう。これらはいったいどんな違いがあるのでしょうか。

　この欄はブロードバンドがインターネットの主流になる前に重宝した設定と言えます。例えば、インターネット回線が一般に高速化した今となっては通常「ベースライン（標準）」を選択すべきですが、ほかの設定の解説もしておきます。ベースライン（最適化）とは少しでも画像ファイルを小さくしたいときに選択する項目です。僅かながら画像ファイルは小さくなりますが、その分互換性が低くなる欠点があります(表示できないブラウザなどがある)。
　「プログレッシブ」とは最初に解像度の低い画像を大まかに表示しておき、徐々に鮮明に表示されていく形式です。スキャンに「3」を指定すると、3回の描画で鮮明な画像を表示する指定となります。モデムなど低い回線速度が利用されているときは、画像が表示される前に大まかな画像イメージを捉えられるので便利でした。

プログレッシブJPEGの手法は、まず低解像度ですばやく表示して、後から鮮明な画像を表示します
(低速回線に有効)。 GIFでは同様なものがインタレースGIFと呼ばれます。

それぞれ下記にサンプルを添付しますので、クリックして表示してみて下さい。1と2は違いを感じにくいと思います。3は低速の回線を使っている人には違いが解ると思いますが最近の高速ブロードバンド環境ではスキャンが解りません。

• JPEGベースライン（標準）　87KB
• JPEGベースライン（最適化）　85KB
• JPEGプログレッシブ　87KB
  

画像F GIFはカラーパレットを指定して保存します。 画像G GIFインタレースとは、ぼやけた画像を表示してから、鮮明に表示する方式です。

●GIFの保存とインタレース

　さて、JPEGの特質と基本的な保存方法が解ったところで、話を再びGIFに戻します。はい、強引に戻します。

　先程、JPEGで保存したモデルの写真を今度はGIFで保存してみましょう。GIFは色数が最大256色となっていますので、フルカラー写真を保存する際にはどうしても減色しなくてはなりませんので、画質は低下すると言わざるを得ません。

　ただし、GIFの場合は前回解説したように、色の表現不足によるグラデーションのスキップや疑似色の多用によって画質低下は起こりますが、JPEGのような四角いブロックノイズによる画像の破綻は起こりません。そのため、もともと色数が少ない、カラーパレット内の色で表現できる画像であれば高画質を維持することができます。

　先程のモデルの写真をGIFで保存した画像を示しましょう。操作の手順は「ファイル」→「別名で保存」を選択し、ファイル形式で「CompuServe GIF(GIF)」を選択します。決められたカラーパレットの範囲で色を使い描画する方式を「インデックスカラー」と呼びます。そのため、Photoshop ElementsでもGIFで保存する場合は「インデックスカラー」指定の画面が表示されます(画像F)。
　 「▼」をクリックするとパレットの種類が表示されますので、一般的には「RGBカラーを均等に割り付ける」か「Web」を選択すると良いでしょう。Webの場合は217色しか表現できませんが、最も互換性が高いGIFファイルです。
　次にGIFオプションとして「標準」と「インタレース」の選択画面となります(画像G)。インタレースはJPEGのプログレッシブのように段階的に鮮明に表示していく描画方法です。

• GIF標準　130KB
• GIFインタレース　137KB
• もうひとつサンプル

フルカラー表現ができないにも関わらず、GIFの場合、容量サイズはJPEGの1.5倍にもなっています。現在では、色数が豊富な単一の写真画像をGIF形式で保存するメリットはありません。

●GIFはイラスト・ベタ塗りにベター

GIF画像(64色使用) GIFはベタ塗りがきれいに表現できます。例はグラデーションを使っているので、32ビット程度の色数が必要になります。グラデのないベタ塗りのみの場合はもっと少ない色数で済みます。 JPEG画像(破綻パターンの例) 写真と違い、ベタ塗りの多いイラストではJPEGのブロックノイズによって画像破綻が目立ってしまいます。もちろん画質設定を上げることでブロックノイズを目立たなくすることはできますが、破綻パターンが強調されるイラストではJPEGは使いにくいのが実状と言えます。

　すわっ? オヤジギャグか? すんません。
　JPEGの最大の敵はブロックノイズによる画像破綻です。写真では目立たなかったブロック型のノイズは少ない色数ではっきりと塗り分けるイラストには向きません。同じ色一色でベタ塗りしたい場面もしっかりブロック破綻してしまうからです。

　その点、GIFはブロックノイズがないので、限られた色数内で収まっているイラストであれば(色がすべて正しく表現できるかどうかは別として)、破綻なく表示することができます。右にわかりやすいと思われる例を掲載しますので参考にして下さい。

　GIFやJPEGの特長がはっきりしたところで、次回は画質とファイルサイズを上手く調整する方法やWebサイト制作時に実際に行っている保存の操作について解説します。
お楽しみに。