このトピックでは、画像とアニメーション GIF の書き出しの様々なオプションについて説明します。

Web グラフィック形式

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

JPEG 最適化オプション

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

web_optimization
最適化設定 A、ファイルフォーマットメニュー B、圧縮品質メニュー C、最適化メニュー

画質

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

最適化

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

プログレッシブ

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

注意:

プログレッシブ JPEG 画像を表示するには、より多くの RAM が必要になります。Web ブラウザーによっては、プログレッシブ JPEG 画像を表示できない場合もあります。

ぼかし

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

カラープロファイルの埋め込み(Photoshop)または ICC プロファイルの埋め込み(Illustrator)

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

マット

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

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

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

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

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

以下のオプションに加えて、画像のカラーテーブルでカラーの数を調整することもできます。 **string not required**GIF および PNG-8 画像のカラーテーブルのカスタマイズを参照してください。

GIF_preset
GIF オプション

劣化(GIF のみ)

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

注意:

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

減色方法とカラー

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

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

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

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

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

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

注意:

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

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

ディザ方法とディザ

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

swb_gif_dither
ディザが 0 %の GIF 画像(左)、100 %の GIF 画像(右)

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

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

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

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

透明部分とマット

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

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

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

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

注意:

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

swb_transparency_matte
透明部分とマットの例

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

透明ディザ

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

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

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

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

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

swb_pattern_dither
パターン透明ディザの例(左)と Web ページの背景に適用した例(右)

インターレース

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

Web スナップ

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 が割り当てられ、レッドと同じ場所に位置します。
  • 「輝度で並べ替え」を選択すると、カラーの輝度または明るさに基づいて並べ替えられます。
  • 「使用頻度で並べ替え」を選択すると、画像内のカラーの出現頻度に基づいて並べ替えられます。

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

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

  1. 現在カラーテーブルでカラーを選択している場合は、カラーテーブルパレットメニューから「すべてのカラー変更を解除」を選択します。

  2. 次のいずれかの操作を行って、カラーを選択します。

    • Web およびデバイス用に保存ダイアログボックスでスポイトツールカラーボックスをクリックし、カラーピッカーからカラーを選択します。

    • Web およびデバイス用に保存ダイアログボックスでスポイトツールを選択し、画像をクリックします。

  3. 次のいずれかの操作をします。

    • カラーテーブルで「新規カラー」オプションをクリックします。

    • カラーテーブルパレットメニューで「新規カラー」を選択します。

    • カラーテーブルパレットにカスタムカラーを追加するには、Ctrl キー(Windows)または Command キー(Mac OS)を押しながら新規カラー追加の操作を行います。

      新しいカラーがカラーテーブルに表示され、そのカラーがロックされていることを示す白い四角形が右下隅に表示されます。 カラーテーブルがダイナミックな場合、元のカラーが左上に表示され、新しいカラーが左下に表示されます。

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

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

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

カラーのシフト

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

  1. カラーテーブル内のカラーをダブルクリックして、初期設定のカラーピッカーを表示します。

  2. カラーを選択します。

    スウォッチの左上に元のカラーが表示され、右下に新しいカラーが表示されます。 スウォッチの右下にある小さい四角形は、そのカラーがロックされていることを示しています。 Web セーフカラーにシフトすると、スウォッチの中央に白い菱形が表示されます。

  3. シフトしたカラーを元のカラーに戻すには、次のいずれかの操作をします。

    • シフトしたカラーのスウォッチをダブルクリックします。 元のカラーがカラーピッカーで選択されます。 「OK」をクリックしてカラーを元に戻します。

    • カラーテーブルでシフトしたカラーを Web シフトしたカラーも含めてすべて元に戻すには、カラーテーブルパレットメニューを選択します。

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

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

  1. 最適化した画像またはカラーテーブルからカラーを選択します。

  2. 次のいずれかの操作をします。

    • カラーテーブルパレットで、「Web パレットにシフト / シフト解除」ボタンをクリックします。

    • カラーテーブルパレットメニューから「選択カラーを Web パレットにシフト / シフト解除」を選択します。スウォッチの左上に元のカラーが表示され、右下に新しいカラーが表示されます。スウォッチの中央にある小さな白い菱形 は、カラーが Web セーフカラーであることを示しています。スウォッチの右下にある小さな四角形は、カラーがロックされていることを示しています。

  3. シフトに許容レベルを設定するには、「Web スナップ」に値を入力します。 高い値を指定するほど、シフトするカラー数が多くなります。

  4. Web シフトした色を元に戻すには、次のいずれかの操作を行います。

    • Web シフトしたカラーをカラーテーブルで選択し、カラーテーブルパレットで、「Web パレットにシフト / シフト解除」ボタンをクリックします。

    • カラーテーブル内のすべての Web シフトしたカラーを元に戻すには、カラーテーブルパレットメニューから「すべてのカラー変更を解除」を選択します。

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

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

  1. 最適化した画像またはカラーテーブルからカラーを選択します。

  2. 次のいずれかの操作をします。

    • カラーテーブルパレットで、透明にマップボタン をクリックします。

    • カラーテーブルパレットメニューから「選択カラーを透明にマップ / マップ解除」を選択します。

      マップした各カラーの右下に透明グリッド が表示されます。スウォッチの右下にある小さい四角形は、そのカラーがロックされていることを示しています。

  3. 透明を元の色に戻すには、次のいずれかの操作をします。

    • 元に戻すカラーを選択し、透明にマップボタン をクリックするか、カラーテーブルパレットメニューから「選択カラーを透明にマップ / マップ解除」を選択します。

    • すべての透明にマップされたカラーを元に戻すには、「すべての透明カラーをマップ解除」を選択します。

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

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

注意:

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

  1. カラーテーブルでカラーを選択します。

  2. 次のいずれかの操作を行って、カラーをロックします。

    • ロックボタン をクリックします。

    • カラーテーブルパレットメニューから「選択カラーをロック / ロック解除」を選択します。

    ロックされた各カラーの右下隅に、白い四角形 が表示されます。

  3. 次のいずれかの操作を行って、カラーのロックを解除します。

    • ロックボタン をクリックします。

    • カラーテーブルパレットメニューから「選択カラーをロック / ロック解除」を選択します。

    スウォッチから白い四角形が消えます。

選択したカラーの削除

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

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

  1. カラーテーブルでカラーを選択します。

  2. 次のいずれかの操作を行って、カラーを削除します。

    • 削除アイコン をクリックします。

    • カラーテーブルパレットメニューから「カラーを削除」を選択します。

カラーテーブルの保存

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

  1. カラーテーブルパレットメニューから「カラーテーブルを保存」を選択します。

  2. カラーテーブルに名前を付け、保存先を選択します。初期設定では、カラーテーブルファイルの拡張子は .act(Adobe カラーテーブル)になります。

    GIF 画像または PNG 画像の最適化オプションを選択するときにこのカラーテーブルを使用できるようにするには、Photoshop フォルダーにある最適化カラーフォルダーにカラーテーブルを保存します。

  3. 「保存」をクリックします。

    注意:

    テーブルを再び読み込むと、すべてのシフトしたカラーが左上と右下の分割表示がない完全なスウォッチとして表示され、ロックが解除されます。

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

  1. カラーテーブルパレットメニューから「カラーテーブルを保存」を読み込みます。

  2. 読み込むカラーテーブルが格納されているファイル、つまり Adobe カラーテーブルファイル(.act)、Adobe スウォッチファイル(.aco)または GIF ファイル(ファイルに埋め込まれたカラーテーブルを読み込む場合)を選択表示します。

  3. 「開く」をクリックします。

PNG-24 最適化オプション

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

透明部分とマット

画像内の透明ピクセルを最適化する方法を決定します。  GIF 画像と PNG 画像の透明度の最適化を参照してください。

PNG_24
PNG-24 オプション

インターレース

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

関連項目

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー