Web 画像のディザ

最終更新日 : 2021年4月27日

ディザ

ほとんどのWeb画像は、24ビットカラーディスプレイ(1,600万色以上を表示)を使用するデザイナーによって作成されますが、一部のユーザーは8ビットカラーディスプレイ(256色のみを表示)のコンピューターでWebページを閲覧します。その結果、Web画像には一部のコンピューターでは利用できない色が含まれることがよくあります。コンピューターは、表示できない色をシミュレートするためにディザリングと呼ばれる技術を使用します。ディザリングは、異なる色の隣接するピクセルを使用して、第三の色があるように見せます。例えば、赤色と黄色がモザイクパターンでディザされて、8 ビットカラーパネルに含まれていないオレンジ色の錯覚を作り出すことがあります。

ディザ処理による連続階調のシミュレート

メモ

web パネルの色を使用して、256 色を表示できる Windows または Mac OS システムで表示したときに色がディザされないようにします。オリジナル画像を作成する場合は、カラーピッカーを使用してWebセーフカラーを選択できます。

画像を最適化する際は、2 種類のディザリングが発生する可能性があることを覚えておいてください:

アプリケーションのディザ処理

Photoshop Elements が現在のカラーテーブルにない色をシミュレートしようとするときに、GIF および PNG-8 画像で発生します。ディザリングパターンを選択してアプリケーションディザを制御したり、テーブルに色を追加してアプリケーションディザを回避したりできます。

ブラウザーのディザ処理

8ビットカラーディスプレイ(256カラーモード)を使用するWebブラウザーが、8ビットカラーパネルにない色をシミュレートしようとするときに発生します。ブラウザーのディザ処理は、GIF、PNG または JPEG 画像で行われます。 Photoshop Elements では、画像内の選択した色を web セーフカラーにシフトすることで、ブラウザーディザの量を制御できます。カラーピッカーで色を選択するときに、web セーフカラーを指定することもできます。

アプリケーションのディザ処理は、GIF および PNG‑8 画像でプレビューできます。 主にべた塗りの画像は、ディザリングなしでも良好に機能する場合があります。逆に、連続階調カラー(特にカラーグラデーション)を含む画像では、カラーバンディングを防ぐためにディザリングが必要な場合があります。

Web 画像でのディザの制御

画像を開き、ファイル/web 用に保存を選択します。
最適化設定を選択します。
ディザテキストボックスに値を入力するか、ディザメニューの矢印をクリックして表示されるスライダーをドラッグします。
ディザの割合は、画像に適用されるディザリングの量を制御します。ディザリングの割合が高いと、画像により多くの色と詳細が表示されますが、ファイルサイズが大きくなる場合もあります。最適な圧縮と表示品質を得るには、必要なカラー詳細を提供する最低割合のアプリケーションディザを使用してください。

ディザのプレビュー

Photoshop Elements または 8 ビットカラーディスプレイ(256 カラーモード)を使用するブラウザーで、ブラウザーディザを直接プレビューできます。

画像を開き、ファイル>Web用に保存を選択します。
最適化設定を選択します。
Photoshop Elements でディザをプレビューするには、web 用に保存ダイアログボックスのドキュメントパネルメニューからブラウザーディザを選択します。(メニューを表示するには、最適化された画像の右上角にある三角形をクリックします。)
ディザをブラウザーでプレビューするには、次の手順に従います。
  • コンピューターのカラーディスプレイを 8 ビットカラー(256 色)に設定します。カラーディスプレイの変更について詳しくは、オペレーティングシステムのドキュメントを参照してください。

  • Web用に保存ダイアログボックスの「プレビュー」メニューからブラウザーを選択します。