Photoshopの「Web形式で保存」の使い方

lecture

Photoshopで加工した写真などをWeb用に保存するときに使用するメニューが「Web用に保存」。
Web系の人はよく使用するメニューだと思います。「Web用に保存」であまり使用しないけれども気になっている項目についての説明です。

スポンサーリンク

GIF形式

GIF は、「ジフ」と読みます。均一色でディテールが鮮明な、線画やロゴおよび文字を使用したイラストを可逆圧縮形式ファイルフォーマットです。最大256色まで使えて透過GIFとGIFアニメーションがサポートしています。
米UNISYS社の特許権問題で一時利用が控えられ、その代替えとしてping形式が開発されるなどしましたが、現在は特許が失効して自由に使用されるようになっています。

GIF形式とPING-8形式の場合、概ね次の設定でOKです。減色方法は「特定」にしてカラーで色数を決める。グラデーションがあればディザありとして単色の場合はディザなし。透明部分があれば、透明部分にチェックを入れる。画像の境界線の微妙な部分はマットで調整。インターレスは使用しない。

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

GIF形式の最適化オプション

PhotoshopでGIF形式で保存する際の最適化オプションの使い方です。
save2
A:ファイル形式メニュー ここではGIF形式を選択しています。
B:減色アルゴリズムメニュー 通常は「特定」を選択しておけばよいでしょう。Gで256色まで表現できる色数を下げることによってわずかながらファイルのサイズを小さくすることができます。

減色アルゴリズムメニュー(AdobeのHelpより)

減色方法とカラー
カラールックアップテーブルの生成方法と、カラールックアップテーブルに必要なカラー数を指定します。 次のいずれかの減色方法を選択できます。
知覚的
肉眼で見たときに知覚度が高いカラーを優先して、カスタムカラーテーブルを作成します。

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

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

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

カスタム
ユーザーが作成または変更したカラーパレットを使用します。 既存の GIF または PNG-8 ファイルを開くと、そのファイルにはカスタムカラーパレットが使用されます。
Web およびデバイス用に保存ダイアログボックスのカラーテーブルパレットを使用して、カラールックアップテーブルをカスタマイズします。

モノクロ 2 階調、グレースケール、Mac OS、Windows
設定済みのカラーパレットを使用します。

C:ディザアルゴリズムメニュー ディザとは、コンピューターのカラー表示システムで使用できないカラーをシミュレートする方法です。フルカラーの画像を少ない色数でごまかす技術です。
グラデーションなど複雑な色が混じってない単一色が使用されている画像は、ディザをなしに設定します。
グラデーションが使用されている画像は、カラーバンドの発生を回避するためにディザが必要です。
Jはディザの適用量を決めます。

ディザ方法(AdobeのHelpより)

誤差拡散法
一般にパターンディザよりも目立ちにくいランダムパターンが適用されます。 ディザ効果は、隣接ピクセル上で拡散されます。
パターン
ハーフトーンに似た正方形のパターンを使用して、カラーテーブルにないすべてのカラーを適用します。
ノイズ
誤差拡散ディザと同様のランダムパターンが適用されますが、パターンが隣接ピクセル上に拡散することはありません。 「ノイズ」の場合は、カラーの継ぎ目ができません。

D:透明部分を作成のチェックボックス、J:マットについては以下引用を参照ください。

透明部分(AdobeのHelpより)

完全に透明なピクセルを透明にして、半透明なピクセルをカラーとブレンドするには、「透明部分」を選択して、マットカラーを選択します。
完全に透明なピクセルをカラーで塗りつぶし、半透明なピクセルを同じカラーにブレンドするには、マットカラーを選択し、「透明部分」を選択解除します。
マットカラーを選択するには、マットオプションのカラーボックスをクリックして、カラーピッカーでカラーを選択します。 または、マットメニューでオプションを選択します。オプションには、「スポイトツールカラー」(スポイトツールカラーボックスのカラーを使用する)、「描画色」、「背景色」、「白」、「黒」、「その他」(カラーピッカーを使用する)があります。

E:透明ディザ

透明ディザ(AdobeのHelpより)

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

  • 「透明ディザなし」を選択すると、画像内の半透明なピクセルにディザは適用されません。
  • 「誤差拡散法透明ディザ」を選択すると、一般にパターンディザより自然なランダムパターンが適用されます。ディザ効果は、隣接ピクセル上で拡散されます。 このアルゴリズムを選択した場合は、ディザのパーセント値を指定して画像に適用するディザの度合いを制御します。
  • 「パターン透明ディザ」を選択すると、半透明なピクセルに対してハーフトーンに似た正方形のパターンが適用されます
  • 「ノイズ透明ディザ」を選択すると、誤差拡散法と同様のランダムパターンが適用されますが、パターンが隣接ピクセル上に拡散することはありません。 ノイズディザでは、継ぎ目が発生することはありません。

F:インターレス
ファイルが完全にダウンロードされるまでの間、画像が低解像度でブラウザーに表示されます。 インターレース機能によって、ユーザーはダウンロード時間を短く感じ、処理が進行中であることを確認できます。 ただし、インターレースを行うと、ファイルサイズは大きくなります。
K:Web スナップ
Web パレット内の最も近いカラーにシフトし、ブラウザーによる表示でカラーにディザが発生しないようにするための許容レベルを指定します。 高い値を指定するほど、シフトするカラー数が多くなります。 つまり、パーセントを変えることで、GIF画像に割り当てている色を、ウェブセーフカラーに近づけます。

カラーテーブルを設定したい場合はAdobeのHelpを参照してください。

M、N:カラーマネジメントを行う場合に設定します。通常はsRGBに変換にチェックを入れておきます。

PING-8形式

save3
GIF形式に比べて少し容量が軽いです。古いブラウザで透過PNGに対応していません。
また、アニメーション機能はありません。
最適化オプションはほとんどGIF形式と同様です。
「カラープロファイルの埋め込み」はカラーマネジメントを使用する時にチェックを入れます。

PING-24形式

save4
PNG-24 形式はグラデーションなどの画像の圧縮に適しています。ただし、ファイルサイズは JPEG 形式に比べてかなり大きくなります。 PNG-24 形式を使用する利点は、画像内に 256 レベルの透明度を持たせることができることです。
アニメーションには対応していません。
FireworksではPNG-24は透過には対応していません。PNG-32が透過に対応しています。Photoshopでは両方まとめてPNG-24としているようです。透明部分にチェックを入れるとPNG-32になっているようです。(未検証)

JPEG形式

save1
JPEG は、写真のような連続階調画像を圧縮するときの標準形式です。 画像を JPEG 形式として最適化する場合は、データを選択的に破棄する劣化圧縮(非可逆圧縮)が使用されます。24ビット(1670万色)まで扱うことができます。
ファイルを JPEG 形式で保存すると画像データが失われますので、オリジナルの画像はPSD形式などで別途保存しておくとよいです。

JPEG 用の最適化設定(Photoshop の場合)

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

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

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

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

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

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

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

WBMP

WBMP 形式は「ワイヤレス・ビットマップ」の略で、携帯電話(ガラケイ)などのモバイル機器向けの画像を最適化するための標準ファイル形式です。 WBMP は 1 ビットカラーをサポートしています。つまり、WBMP 画像には白黒のピクセルだけが含まれます。

ディザのアルゴリズムと割合は、アプリケーションのディザ処理の方法と程度を決定します。 最適な外観を作成するには、必要なディテールを得られる最低限のディザ率を使用してください。

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

ディザなし
ディザは適用されず、純粋な黒と白のピクセルで描画されます。

誤差拡散法
一般にパターンディザよりも目立ちにくいランダムパターンが適用されます。 ディザ効果は、隣接ピクセル上で拡散されます。 このアルゴリズムを選択した場合は、ディザのパーセント値を指定して画像に適用するディザの度合いを制御します。
注意: 誤差拡散ディザを使用すると、スライスの境界上に目立つ継ぎ目が発生することがあります。 スライス同士をリンクしておくと、リンクしたすべてのスライスにまたがってディザパターンが拡散されるため、継ぎ目が目立たなくなります。

パターン
ピクセル値はハーフトーンに似た正方形のパターンを適用して決められます。

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

タイトルとURLをコピーしました