ウェブ用の低脂肪グラフィック

ウェブページに過剰な画像を詰め込むことは、訪問者を遠ざける最も確実な方法の一つです。不適切な形式で保存された画像や、圧縮率の低い画像は、ダウンロード速度を著しく低下させる可能性があります。そのため、ウェブデザインにおいて重要なステップは、サイトを公開する前に、ボタン、写真、その他のグラフィックを最適化することです。

不思議なことに、最も普及していた画像編集アプリケーションであるAdobe Photoshopは、Web向けの画像最適化に関しては歴史的に理想的とは言えませんでした。圧縮された画像を微調整したり比較したりするための効率的なインターフェースがなかったため、デザイナーは特別なプラグインをインストールするか、Macromedia FireworksやAdobe ImageReadyといったWebデザイン向けに開発された新しい画像処理アプリケーションに乗り換えるしかありませんでした。

Photoshop 5.5では、Adobeは主力製品であるPhotoshopのWeb関連の欠点の多くに対処しました。新しい「Web用に保存」オプションを使用すると、主要なWeb画像形式（JPEG、GIF、PNG）の最適化戦略を簡単にプレビュー、適用、保存できます。また、AdobeはPhotoshopにImageReady 2.0をバンドルしているため、ハイエンドの画像処理能力と便利なWeb開発オプションを手に入れるために、2つのアプリケーションを購入する必要がなくなりました。（ImageReadyの使い方のヒントについては、補足記事「自動最適化」をご覧ください。）画像圧縮の仕組みに関する基本的な知識があれば、Photoshop初心者でも、ダウンロードが速く、画像が豊富で豊富なサイトを作成できるようになります。

圧縮101

画像圧縮形式は、画像を数式で記述する方が、ピクセル単位で記述するよりもはるかに効率的であるという事実を利用しています。これは、緑色の正方形の画像を「緑色のピクセルが1つ、次に緑色のピクセルがもう1つ、さらにもう1つ」と定義するのではなく、「緑色のピクセルが10×10のグリッドに並んでいる」と定義するのと似ています。圧縮方式によって、画像を保存するために必要な容量が90%以上削減されることがよくあります。（さまざまな画像形式のファイルサイズの比較については、サイドバー「どの形式が良い？圧縮の基本」をご覧ください。）

画像圧縮の種類によって、情報の圧縮方法は異なり、それぞれに長所と短所があります。幸いなことに、Webページの画像に最適な圧縮形式を選ぶのに数学者である必要はありません。

画像が写真の場合、JPEG ファイルとして保存することをお勧めします。JPEG 形式は 1 つの画像で数百万色をサポートでき、連続的に色調が変化する画像の圧縮に優れているためです。JPEG の主な欠点は、 非可逆 圧縮形式であることです。つまり、画像を JPEG ファイルとして保存すると、情報が少し失われます。失われた情報は小さなアーティファクトとして現れ、その形式で画像を繰り返し圧縮すると、その強度が倍増する可能性があります。画像を JPEG として保存する場合は、適用する圧縮量を選択します。これは、小さなファイルサイズと引き換えに、どの程度のアーティファクトを許容するかを決定することを意味します。Photoshop の「Web 用に保存」オプションを使用すると、JPEG 圧縮を調整し、圧縮された画像を圧縮されていない元の画像と並べてプレビューできます。(この比較機能は、以前は Fireworks と ImageReady を使用する利点の 1 つでした。)

写真のサイズを本当に小さくしたい場合は、「Web用に保存」機能を使って、保存前に画像にガウスぼかしを追加できます。JPEGは連続したトーンで最適なので、ぼかしツールで画像のエッジを柔らかくすると、圧縮率を高めることができます。

Webデザイナーが頻繁に扱うもう1つの種類の画像は、エッジがはっきりしていて、フラットカラーの領域が広いイラストです。これらはGIF（または後述のPNG）形式で保存するのが最適です。GIFは256色までしか使えないため、フラットカラーのイラストであれば通常は十分ですが（ただし、多くの写真には十分ではありません）、

GIFは ロスレス圧縮方式で、圧縮処理中に情報が失われることはありません。ただし、Photoshop 5.5の新しいロスレス調整機能を使用すると、ファイルをGIFとして保存する前に情報を破棄することで、圧縮率を高めることができます。（詳しくは、サイドバー「GIFをダイエットしよう」をご覧ください。）

GIF形式で圧縮を最適化する上で最も重要なのは、画像の色数を可能な限り減らすことです（これは「Web用に保存」のオプションの1つです）。単色のボタンや類似のグラフィックは、多くの場合、32色以下に減らしても問題なく表示されます。「Web用に保存」の他の機能、例えばGIFのカラーパレットの選択方法やディザリングの有無の決定などは、画像によってファイルサイズに多少の影響を与えます（ただし、影響はわずかです）。

PNGを覗いてみよう

「Web用に保存」オプションでは、画像をPNG（発音は「ピング」）ファイルとして保存することもできます。PNGは、最新の形式であることと、ブラウザのサポートが不安定なことが主な理由で、最も利用されていない圧縮形式です。（Mac版のMicrosoft Internet Explorer 4.5はPNGを全くサポートしていません。Netscape Navigator 4.5はPNGをサポートしていますが、すべての機能をサポートしているわけではありません。）

PNG形式の利点は、JPEGと同様に数百万色をサポートしながら、GIFと同様にロスレス圧縮が可能なことです。そのため、GIFよりも高画質（ただしファイルサイズは若干大きくなります）の圧縮画像を生成することがよくあります。その他の利点としては、ガンマ情報を保存できるため、OS間のディスプレイの明るさの違いを補正できることや、部分的な透明化などが挙げられます。

PNG 形式は最終的にバージョン 5.0 のブラウザで完全にサポートされるようになり、Web デザイナーが画像を最適化する際に PNG を検討する理由が増えます。

MIKE WOOLDRIDGE ( [email protected] ) は、カリフォルニア州バークレー在住の作家兼 Web デザイナーです。

2000年1月 号 111ページ

どのフォーマット？圧縮の基本

Photoshop 5.5の「Web用に保存」ツールで利用できる3つの異なる画像形式は、それぞれ異なる数式を用いてピクセル情報を圧縮します。それぞれの数式は、画像の種類によって異なる結果をもたらします。例えば、写真画像と単色画像の元のサイズと圧縮後のサイズを以下に示します。

写真画像にはJPEG形式が最適です。JPEG形式はファイル容量を節約するためにいくつかの数学的手法を採用していますが、最も重要なのは離散コサイン変換（DCT）です。DCTは、画像のピクセル配置を近似し、人間の目に最も重要でない情報を破棄することで、ファイル容量を節約します。

単色のイラストを圧縮する場合は、GIF形式またはPNG形式を使用することをお勧めします。JPEG形式は、単色のイラストを同様のファイルサイズに縮小できるかもしれませんが、圧縮後の画像にアーティファクト（劣化）が加わるためです（JPEGは 非可逆 圧縮形式であるため、圧縮処理中にピクセル情報の一部が失われるためです）。これらのアーティファクトは、イラストの単色部分で特に顕著になるため、可逆圧縮形式であるGIFまたはPNG形式を使用することをお勧めします。

GIF形式は、LZW圧縮（発明者のエイブラハム・レンペル、ジェイコブ・ジヴ、テリー・ウェルチにちなんで名付けられた）と呼ばれる数学的手法を用いて画像情報を圧縮します。LZW圧縮は、画像内に出現する様々なピクセルパターンの辞書を作成し、その辞書のエントリを複数回参照することで画像を再構成します。これにより、パターンは画像内に複数回出現する傾向がありますが、辞書には一度だけ保存すれば済むため、容量を節約できます。GIF圧縮アルゴリズムはUnisysによって特許取得されており、同社はGIF圧縮を使用するアプリケーションに対してロイヤリティを徴収しています。

PNGはGIFのLZW圧縮に似た技術を使って情報を圧縮しますが、Unisysの特許を侵害しない程度に異なります。（PNGはJPEGと同様に特許を取得していないため、開発者がPNGの採用を推進してきた主な理由の一つです。）PNGファイルには数百万色を使用できますが、フラットアートでは使用する色数をはるかに少なくする必要があります。そうすることで、最終的なファイルサイズを小さくすることができます。

GIFをダイエットしよう

Photoshopの「Web用に保存」ツールとちょっとしたコツを組み合わせることで、画像ファイルをマイクロサイズに縮小できます。以下の手順では、GIFファイルから余分なキロバイトを削除し、ダウンロード速度を向上させる方法をご紹介します。

1) まず、漫画のイラストをスキャンしました。その画像をPhotoshopに読み込み、「Web用に保存」オプションを選択して、256色のGIFファイルとして保存しました。ファイルサイズは合計6.7KBでした。

2) GIFファイルのサイズを縮小する上で最も重要なのは、色数を減らすことです。この漫画には黒い線と単色の部分があり、グラデーションもなかったので、画質を劣化させることなく色数を256色から16色に減らすことができました。これにより、ファイルサイズは4.3KBまで縮小されました。

3) GIFファイルのサイズを小さくするコツの一つは、単色部分にある不要なピクセルを取り除くことです。クローンツールを使って、漫画の背景に散在する濃い緑色のピクセルを取り除きました。ファイルを再保存すると、サイズは3.9KBにまで小さくなりました。

4) 最後のステップは、Photoshop 5.5の新機能であるLossy GIF機能を適用することです。Lossy GIFは、画像内でピクセルパターンが繰り返されるとGIFの圧縮率が向上するという特性を利用します。「Web用に保存」のLossy GIFスライダーを高く設定すると、Photoshopは類似したピクセルのシーケンスを検出し、それらを同一のピクセルに変換します。このイラストでは、Lossyスライダーを30に設定しました。これにより、最終的なファイルサイズは3.7KBになり、元のGIFファイルよりも45%小さくなりました。

自動操縦による最適化

画像が詰まったフォルダを圧縮したいけれど、締め切りが迫っている？そんな時、Photoshop 5.5にバンドルされているImageReady 2.0が役立ちます。ImageReadyのドロップレットは、デスクトップアイコンとして表示される自動画像最適化ツールです。Photoshop内でドロップレットを作成して使用する方法をご紹介します。

1) Photoshopのツールウィンドウ下部にある幅広のボタンをクリックします。ImageReadyが開きます。（Photoshopで画像を開いている場合は、ImageReadyにインポートされます。）

2) ImageReady の最適化ウィンドウから圧縮ファイル形式を選択し、圧縮設定を好みに合わせて調整します。

3)最適化ウィンドウの右上隅にあるドロップレットアイコン （上） （下向きの矢印のアイコン）をクリックします。新しいドロップレットに名前を付けて保存するよう求められます。スクリーンショット （下）では、4つの異なるスキームをドロップレットとしてフォルダに保存しています。