画像とアニメーション GIF の最適化オプション

Web グラフィック形式は、ビットマップ（ラスター）とベクターのどちらにも対応しています。ビットマップ形式（GIF、JPEG および PNG）は、解像度に依存します。したがって、ビットマップ画像の寸法や画質は、モニターの解像度によって変化します。ベクター形式（SVG および SWF）は解像度に依存せず、画質を損なうことなく拡大または縮小できます。ベクター形式には、ラスターデータも含めることができます。  

JPEG 最適化オプション

JPEG は、写真のような連続階調画像を圧縮するときの標準形式です。画像を JPEG 形式として最適化する場合は、データを選択的に破棄する劣化圧縮が使用されます。

圧縮のレベルを決定します。画質設定値を高くするほど、圧縮アルゴリズムは多くのディテール情報を保持します。ただし、画質設定を高くするほど、ファイルサイズは大きくなります。様々な画質設定で最適化した画像を表示してみて、画質とファイルサイズのバランスが最適になる設定値を決定します。

ファイルサイズがわずかに小さくなる拡張 JPEG を作成します。最大限のファイル圧縮を行うには、最適化された JPEG 形式が適していますが、古いブラウザーにはこの形式をサポートしないものもあります。

画像を Web ブラウザーで徐々に表示します。画像を一連のオーバーレイとして表示するので、画像が完全にダウンロードされるまでの間、その画像を低解像度で見ることができます。「プログレッシブ」オプションを使用するには、「JPEG の最適化」を指定する必要があります。

 プログレッシブ JPEG は、表示に多くの RAM が必要になるので、一部のブラウザーではサポートされていません。

画像に適用するぼかしの程度を指定します。このオプションは、ぼかし（ガウス）フィルターと同じ効果を適用し、ファイルの圧縮率を高くしてサイズの小さいファイルを生成できるようにします。0.1 ～ 0.5 の設定値をお勧めします。

最適化されたファイルでカラープロファイルを保持します。一部のブラウザーでは、カラープロファイルがカラー補正に使用されます。

元画像で透明なピクセルを塗りつぶすカラーを指定します。マットオプションのカラーボックスをクリックしてカラーピッカーでカラーを選択するか、マットメニューからオプションを選択します。オプションは、「スポイトツールカラー」（スポイトツールカラーボックスの色を使用する場合）、「描画色」、「背景色」、「白」、「黒」または「その他」（カラーピッカーを使用する場合）です。

元画像で完全に透明なピクセルは、選択したカラーで塗りつぶされます。元画像で部分的に透明なピクセルは、選択したカラーでブレンドされます。

GIF および PNG-8 最適化オプション

GIF は、均一色でディテールが鮮明な、線画やロゴおよび文字を使用したイラストを圧縮するときの標準形式です。PNG-8 形式は、GIF 形式と同様にディテールの鮮明さを保持したまま単一色の領域を効率よく圧縮します。

PNG-8 および GIF ファイルは 8 ビットカラーをサポートしているので、最高 256 色まで表示できます。使用する色を判断するプロセスはインデックス定義と呼ばれるので、GIF 形式や PNG-8 形式の画像はインデックスカラー画像と呼ばれることがあります。画像をインデックスカラーに変換するには、カラールックアップテーブルを作成し、画像内の色を格納およびインデックス化します。元画像のカラーがカラールックアップテーブルに含まれない場合は、テーブル内の最も近いカラーを選択するか、利用可能なカラーを組み合わせてそのカラーをシミュレートします。

以下のオプションに加えて、画像のカラーテーブルでカラーの数を調整することもできます。

選択的にデータを破棄することによりファイルサイズを小さくします。劣化の設定を高くするほど、破棄されるデータが多くなります。画質を低下させずに劣化を行うには、この値を 5 ～ 10（場合によっては 50 まで）に設定します。「劣化」オプションを使用すると、ファイルサイズを 5 ～ 40 ％小さくすることができます。

 「非可逆圧縮」オプションは、「インターレース」オプションまたはディザアルゴリズムの「ノイズ」または「パターン」と共に使用することはできません。

カラールックアップテーブルの生成方法と、カラールックアップテーブルに必要なカラー数を指定します。次のいずれかの減色方法を選択できます。

知覚肉眼で見たときに知覚度が高いカラーを優先して、カスタムカラーテーブルを作成します。

特定知覚カラーテーブルと類似したカラーテーブルが作成されますが、カラーの範囲が広く、Web カラーを保持します。一般に、このカラーテーブルは、最もカラーの保全性に優れています。「特定」が初期設定です。

割り付け画像で最も多く使用されているスペクトルからカラーをサンプルすることによって、カスタムカラーテーブルが作成されます。例えば、グリーンとブルーだけが使用されている画像からは、グリーンとブルーが主体のカラーテーブルが作成されます。多くの画像は、スペクトルの特定領域のカラーを集中的に使用しています。

制限（Web）Windows や Mac OS の 8 ビット（256 色）パレットに共通する、標準の 216 色を使用したカラーテーブルが使用されます。このオプションを選択すると、8 ビットカラーを使用して画像を表示するときに、カラーにブラウザーディザが適用されません（このパレットは、Web セーフパレットとも呼ばれます）。Web セーフパレットを使用すると、作成されるファイルのサイズが大きくなるので、ブラウザーでディザ処理が行われないことを優先する場合にだけ使用してください。

カスタムユーザーが作成または変更したカラーパレットを使用します。既存の GIF または PNG-8 ファイルを開くと、そのファイルにはカスタムカラーパレットが使用されます。

 Web およびデバイス用に保存ダイアログボックスのカラーテーブルパレットを使用して、カラールックアップテーブルをカスタマイズします。

白黒、グレースケール、Mac OS、Windows カラーパレットを使用します。

アプリケーションのディザ処理の方法と度合いを決定します。ディザとは、コンピューターのカラー表示システムで使用できないカラーをシミュレートする方法です。ここに高い値を指定すると、画像のカラー数が増えるのでディテールは鮮明になりますが、ファイルサイズは大きくなります。最適な圧縮を行うためには、必要な色の詳細を再現するのに十分な最小のパーセンテージを使用します。主として単一色が使用されている画像は、ディザをなしに設定するとよい結果が得られます。連続階調カラー（特にカラーグラデーション）が使用されている画像は、カラーバンドの発生を回避するためにディザが必要です。

次のいずれかのディザ方法を選択できます。

拡散一般にパターンディザよりも目立ちにくいランダムパターンが適用されます。ディザ効果は、隣接ピクセル上で拡散されます。

パターンハーフトーンに似た正方形のパターンを使用して、カラーテーブルにないすべてのカラーを適用します。

ノイズ誤差拡散ディザと同様のランダムパターンが適用されますが、パターンが隣接ピクセル上に拡散することはありません。「ノイズ」の場合は、カラーの継ぎ目ができません。

画像の透明ピクセルの最適化方法を指定します。

• 完全に透明なピクセルを透明にして、半透明なピクセルをカラーとブレンドするには、「透明部分」を選択して、マットカラーを選択します。

• 完全に透明なピクセルをカラーで塗りつぶし、半透明なピクセルを同じカラーにブレンドするには、マットカラーを選択し、「透明部分」を選択解除します。

• マットカラーを選択するには、マットオプションのカラーボックスをクリックして、カラーピッカーでカラーを選択します。または、マットメニューでオプションを選択します。オプションには、「スポイトツールカラー」（スポイトツールカラーボックスのカラーを使用する）、「描画色」、「背景色」、「白」、「黒」、「その他」（カラーピッカーを使用する）があります。

 「描画色」オプションと「背景色」オプションは、Photoshop でのみ使用できます。

A. 元の画像、B. マットカラーと併せて選択された透明部分、C. マットカラーと併せて選択されていない透明部分、D. マットカラーとの選択が解除された透明部分

「透明部分」オプションが選択されている場合、半透明なピクセルのディザ方法を選択できます。

• 「透明ディザなし」を選択すると、画像内の半透明なピクセルにディザは適用されません。

• 「誤差拡散法透明ディザ」を選択すると、一般にパターンディザより自然なランダムパターンが適用されます。ディザ効果は、隣接ピクセル上で拡散されます。このアルゴリズムを選択した場合は、ディザのパーセント値を指定して画像に適用するディザの度合いを制御します。

• 「パターン透明ディザ」を選択すると、半透明なピクセルに対してハーフトーンに似た正方形のパターンが適用されます。

• 「ノイズ透明ディザ」を選択すると、誤差拡散法と同様のランダムパターンが適用されますが、パターンが隣接ピクセル上に拡散することはありません。ノイズディザでは、継ぎ目が発生することはありません。

ファイルが完全にダウンロードされるまでの間、画像が低解像度でブラウザーに表示されます。インターレース機能によって、ユーザーはダウンロード時間を短く感じ、処理が進行中であることを確認できます。ただし、インターレースを行うと、ファイルサイズは大きくなります。

Web パレット内の最も近いカラーにシフトし、ブラウザーによる表示でカラーにディザが発生しないようにするための許容レベルを指定します。高い値を指定するほど、シフトするカラー数が多くなります。

GIF 画像と PNG 画像の透明度の最適化

透明を使用すると、四角形ではない Web 用画像を作成できます。透明な背景は、画像内の透明ピクセルを保持します。

このため、画像の透明部分を透かして Web ページの背景が表示されます。背景マットは、Web ページの背景に一致するマットカラーで透明ピクセルを塗りつぶして、透明な背景をシミュレートします。背景のマット設定は、Web ページの背景が単色で、その色が正確にわかっている場合に最も効果を発揮します。

Web およびデバイス用に保存ダイアログボックスで「透明部分」オプションと「マット」オプションを使用して、GIF 画像と PNG 画像の透明ピクセルの最適化方法を指定します。

• （GIF および PNG-8）完全に透明なピクセルを透明にし、半透明なピクセルをカラーとブレンドするには、「透明部分」を選択して、マットカラーを選びます。
• 完全に透明なピクセルをカラーで塗りつぶし、半透明なピクセルを同じカラーにブレンドするには、マットカラーを選択し、「透明部分」を選択解除します。
• （GIF および PNG-8）透明度が 50 ％より大きいピクセルを完全に透明にし、透明度が 50 ％以下のピクセルを完全に不透明にするには、「透明部分」を選択して、マットポップアップメニューで「なし」を選択します。
• （PNG-24）透明度が複数レベル（256 レベルまで）の画像を保存するには、「透明度」を選択します。複数レベルの透明度を使用すると画像を背景色とブレンドできるので、マットオプションは使用できません。

 PNG-24 の透明度をサポートしないブラウザーでは、透明なピクセルが、グレーなどのデフォルトの背景色の上に表示されることがあります。

マットカラーを選択するには、マットオプションのカラーボックスをクリックして、カラーピッカーでカラーを選択します。または、マットメニューでオプションを選択します。オプションには、「スポイトツールカラー」（スポイトツールカラーボックスのカラーを使用する）、「描画色」、「背景色」、「白」、「黒」、「その他」（カラーピッカーを使用する）があります。

 「描画色」オプションと「背景色」オプションは、Photoshop でのみ使用できます。

最適化したスライスに対するカラーテーブルの表示

スライスに対するカラーテーブルは、Web およびデバイス用に保存ダイアログボックスのカラーテーブルパネルに表示されます。

GIF または PNG-8 形式で最適化されたスライスを選択します。選択したスライスに対するカラーテーブルは、Web およびデバイス用に保存カラーテーブルに表示されます。

画像に複数のスライスが存在する場合は、スライス間でカラーテーブル内のカラーが異なる場合があります（この状態を回避するには、先にスライス同士をリンクしておきます）。カラーテーブルが相互に異なるスライスを選択すると、カラーテーブルが空白になり、ステータスバーに「混在」というメッセージが表示されます。

GIF および PNG-8 画像のカラーテーブルのカスタマイズ

Web およびデバイス用に保存ダイアログボックスのカラーテーブルを使用すると、最適化された GIF 画像と PNG-8 画像のカラーをカスタマイズできます。多くの場合、カラーの数を減らすと、画質を維持しながら画像のファイルサイズを小さくすることができます。

カラーテーブル内のカラーを追加および削除したり、選択したカラーを Web セーフカラーに変換したりできます。必要なカラーをロックして、パレットからカラーが削除されないようにすることもできます。

カラーテーブルの表示

カラーテーブルパレットメニューから並べ替え順序を選択します。

• 「並べ替え解除」を選択すると、元の並べ替え順序が復元されます。
• 「色相で並べ替え」を選択すると、標準カラーホイール上の位置（0 ～ 360 度の範囲で表現）に基づいて並べ替えられます。中間色には色相 0 が割り当てられ、レッドと同じ場所に位置します。
• 「輝度で並べ替え」を選択すると、カラーの輝度または明るさに基づいて並べ替えられます。
• 「使用頻度で並べ替え」を選択すると、画像内のカラーの出現頻度に基づいて並べ替えられます。

カラーテーブルへの新しいカラーの追加

カラーテーブルを構築したときに除外したカラーを追加できます。ダイナミックテーブルにカラーを追加すると、新しいカラーに最も近いカラーがパレット内で置き換えられます。固定テーブルまたはカスタムテーブルにカラーを追加すると、そのカラーがパレットに追加されます。

カラーテーブルでのカラーの選択

カラーテーブルに、選択したカラーを囲む白い境界線が表示されます。

• カラーを選択するには、カラーテーブル内のカラーをクリックします。
• カラーテーブル内の複数のカラーを選択するには、Shift キーを押しながら別のカラーをクリックします。最初に選択したカラーと 2 番目に選択したカラーの間の行にあるカラーがすべて選択されます。隣接しない複数のカラーを選択するには、Ctrl キー（Windows）または Command キー（Mac OS）を押しながら各カラーをクリックします。カラーテーブルパレットメニューには、カラーを選択するためのコマンドもあります。
• プレビュー画像でカラーを選択するには、Web およびデバイス用に保存のスポイトツールで、プレビューをクリックします。別のカラーをさらに選択するには、Shift キーを押しながらカラーをクリックします。
• すべてのカラーの選択を解除するには、カラーテーブルパレットメニューから「すべてのカラーの選択を解除」を選択します。

カラーのシフト

カラーテーブルで選択したカラーは、任意の別の RGB カラー値に変更できます。最適化画像を再生成すると、選択したカラーが画像内で存在するすべての個所で、選択したカラーが新しいカラーに変更されます。

Web パレット内で最も近いカラーへのシフト

ブラウザーによる表示でカラーにディザが発生しないようにするには、各カラーを Web パレット内の最も近いカラーにシフトします。これにより、256 色だけしか表示できない Windows または Mac OS のオペレーティングシステム上で画像をブラウザーに表示しても、ディザが起こりません。

カラーの透明部分へのマップ

既存のカラーを透明部分にマッピングすることで、最適化した画像に透明部分を追加できます。

カラーのロックまたはロック解除

カラーテーブルで選択したカラーをロックすると、カラー数を減らしたときにカラーが削除されたり、アプリケーションでディザが発生したりするのを防止できます。

 カラーをロックしても、ブラウザーで発生するディザは防止できません。

選択したカラーの削除

選択したカラーをカラーテーブルから削除して、画像ファイルのサイズを小さくすることができます。カラーを削除すると、最適化した画像のうちそのカラーが含まれていた領域が、パレットに残っている最も近いカラーで再描画されます。

カラーを削除すると、カラーテーブルは自動的にカスタムパレットに変わります。これは、割り付けパレット、知覚的パレットまたは特定パレットのままだと、画像を再度最適化する際に、削除したカラーがパレットに戻されてしまうからです。カスタムパレットでは画像を再度最適化しても変更されません。

カラーテーブルの保存

最適化した画像からカラーテーブルを保存すると、そのカラーテーブルを別の画像で使用したり、別のアプリケーションで作成したカラーテーブルを読み込んだりできます。新しいカラーテーブルを画像に読み込むと、新しいカラーテーブル内のカラーを反映して、最適化した画像内のカラーが変更されます。

カラーテーブルの読み込み

PNG-24 最適化オプション

PNG-24 形式は連続階調の画像の圧縮に適しています。ただし、ファイルサイズは JPEG 形式に比べてかなり大きくなります。PNG-24 形式を使用する利点は、画像内に 256 レベルの透明度を持たせることができることです。

画像内の透明ピクセルを最適化する方法を決定します。

ファイルが完全にダウンロードされるまでの間、画像が低解像度でブラウザーに表示されます。インターレース機能によって、ユーザーはダウンロード時間を短く感じ、処理が進行中であることを確認できます。ただし、インターレースを行うと、ファイルサイズは大きくなります。