Web画像にはどのカラープロファイルを使いますか？

WebではsRGBが標準です。すべてのブラウザが対応し、プロファイルが埋め込まれていない場合もsRGBとして扱います。複数のデバイスやプラットフォームで、比較的一貫した見た目になります。

別のモニターでスクリーンショットの色が変わるのはなぜですか？

モニターごとに色域と調整状態が異なるためです。Display P3のような広色域で撮った画像を標準的なsRGBモニターで見ると、広い色範囲を再現できず、色が控えめになったりずれたりする場合があります。

sRGBとDisplay P3の違いは？

sRGBは可視色のおよそ35%をカバーし、長年Webの標準として使われています。Display P3はsRGBより約25%多くの色を扱い、赤、緑、オレンジを鮮やかに表現できます。最近のApple製品や高性能モニターが対応しています。

PNGとJPEGはカラープロファイルに対応しますか？

はい。どちらもメタデータへICCカラープロファイルを埋め込めます。PNGは可逆でプロファイルを保持し、JPEGも標準メタデータから保持できます。ただし、容量削減時にプロファイルを取り除くツールがあり、色ずれの原因になります。

ファイルを小さくするためにカラープロファイルを削除してもよいですか？

削除して減るのは通常3〜5KBほどですが、ブラウザは画像をsRGBとして解釈します。別のプロファイルで作った画像から削除すると色が正しく表示されません。すでにsRGBの画像だけを対象にしてください。

カラープロファイルとは | 用語集

カラープロファイルは、画像内の色をどのように解釈して表示するかを定めるデータです。画面、ブラウザ、印刷機器が異なっても、色の見え方をそろえるために使います。

主なカラープロファイル

正式にはICCプロファイルと呼ばれ、画像内の色を標準化された色空間へ対応付けます。スクリーンショットとWeb画像では、次の3つがよく使われます。

sRGB（Standard Red Green Blue）はWebの標準色空間です。1996年にHPとMicrosoftが策定し、可視光のおよそ35%をカバーします。現在のブラウザ、OS、ディスプレイはすべてsRGBに対応します。Web画像にプロファイルがなければ、ブラウザはsRGBとして扱います。

Display P3は、iPhone、iPad、Retinaディスプレイ搭載MacなどのApple製品や、一部の高性能モニターで使われる広色域です。sRGBよりおよそ25%多くの色を扱い、赤、緑、オレンジを鮮やかに表現できます。対応するMacでは、スクリーンショットがDisplay P3で保存されます。

Adobe RGBはDisplay P3と近い広さを持ち、シアンから緑の範囲を重視した色空間です。主に写真の印刷や製版に使われます。Webのスクリーンショットで使うことはまれですが、業務用カメラの画像を扱うときに見かけます。

これらの関係を理解することが重要です。Display P3で作った画像には、sRGBでは表せない色が含まれます。適切に変換せずsRGBモニターで表示すると、色域外の色が収まる範囲へ変更され、色が控えめになったりずれたりします。

スクリーンショットで重要な理由

スクリーンショットは、撮影に使ったディスプレイのカラープロファイルを引き継ぎます。最近のMacではDisplay P3、一般的なWindows環境ではsRGBになる場合が多くあります。

そのため、MacでDisplay P3として撮ったスクリーンショットを、sRGBディスプレイのWindows PCで見ると、色が少し変わることがあります。P3で保存された鮮やかな色を狭いsRGBへ変換するため、彩度が下がって見える場合があります。

ドキュメント、デザインレビュー、クライアント向け資料でスクリーンショットを共有すると、この差が混乱を招きます。撮影した画面では鮮やかなブランドカラーでも、標準的なモニターでは少し異なる色に見えることがあります。

サーバー上のヘッドレスブラウザを使う自動撮影ツールは、通常sRGBで描画します。操作者のディスプレイに左右されないため、プロファイルの違いによるばらつきを抑えられます。

カラープロファイルとWeb

現在のブラウザにはカラーマネジメント機能があります。埋め込まれたICCプロファイルを読み、使用中のモニターに合わせて色を変換します。プロファイルが埋め込まれ、ブラウザが対応していれば、Display P3画像をP3とsRGBのどちらのモニターでも適切に表示できます。

CSSでは広色域を指定できます。color(display-p3 1 0.5 0)はP3色空間の色を直接指定します。color-gamutメディアクエリを使うと、ユーザーのディスプレイが広色域に対応するかを検出し、適した画像を表示できます。

一般的なWeb用途では、sRGBが安全な初期値です。広く対応され、特別な処理を必要とせず、予測しやすい結果になります。Display P3などの広色域は、対応ディスプレイで豊かな色を表現できますが、標準モニターで色がずれないよう慎重な処理が必要です。

繰り返し行う画像レビュー

異なる機器で同じ画像を確認すると、カラープロファイルが作業上の問題になります。P3対応Macから広色域画像を書き出し、別の人がsRGBディスプレイで比較すれば、「なぜこちらでは違って見えるのか」という確認が必要になります。撮影と書き出しのルールを統一すれば、そのような差を減らし、見た目のレビューを信頼しやすくできます。

よくある失敗

1つの制作物で複数のプロファイルを混ぜる。 sRGBとDisplay P3画像を同じデザインや文書で使うと、色の表示が不統一になります。Webなら通常sRGBなど、1つに決めてすべての画像を変換します。
容量削減時にプロファイルを削除する。 画像圧縮ツールがICCプロファイルを削ることがあります。Display P3画像から削除すると、ブラウザがsRGBとして解釈し、色の彩度が変わります。
スクリーンショット比較でプロファイル差を無視する。 異なる機器で撮った画像をビジュアル回帰テストに使うと、プロファイルの違いを変更として誤検出する場合があります。すべて同じプロファイルと描画条件で撮ります。
すべてのモニターが同じ色を表示すると考える。 プロファイルが正しくても、モニターの調整状態は異なります。標準プロファイルを使い、見る人の機器によって色精度が変わることを共有します。

カラープロファイル