ブラウザやPCによって画像の色が合わない！って時の対処
デザインを行って、書き出し、コーディングを行った後確認を行った時に、どうもブラウザによって色が合わない場合があります。というよりありました。
結論を最初にお伝えしておくと、ICCプロファイルが埋め込まれているとこのような現象が起こってしまう事があります。
Webに掲載する画像を想定していますので、印刷物の場合は解決方法などの工程などで異なる場合がございます。
ICCプロファイルとは
ICCプロファイルについて説明をしていこうとすると、長々となってしまいそうなことと、自分もそこまで理解しているわけではないので、Wikipediaから引用。
ICCプロファイルとは、カラーマネジメントにおいて、インターナショナル・カラー・コンソーシアム (ICC) の公表した標準に従い、色に関わる入出力機器や色空間を特徴付ける一連のデータである。プロファイルは特定機器の色特性や見た目の要求仕様を記述したもので、デバイスの入力と出力の色空間のマッピングや「プロファイル接続空間 (PCS)」で定義される。PCSとしてはCIELAB (Lab*) やCIEXYZがある。マッピングは表形式で示され、表にない値には内挿を行うか、変換のための一連のパラメータを用意する。
…こんな感じらしいです。イマイチ分かりませんが、要は色の入出力を行う際の指標、という感じでしょうか？
色が変わってしまう例
まずは色が変わってしまう例を載せておきます。
ブラウザによってはどちらも同じ色で見えるかと思いますが、IEやChromeでは右側が色褪せて見えるかと思います。
左の画像にはICCプロファイルを埋め込まず、右の画像には「Adobe RGB」というICCプロファイルを埋め込んでいます。
これを見るだけでは、ICCプロファイルを埋め込んだ方が色褪せてしまっているように感じてしまいますが、実は違います。
原因
ディスプレイやプロジェクタで扱うRGB系の代表的なICCプロファイルには、下記の2つがありますが、それぞれに表現できる色の範囲が定まっています。
- sRGB
- 国際標準規格で定まっているため、多くのデバイスで準拠されている。そのため、入力・出力の差異を少なくしやすい。
- Adobe RGB
- Adobe Systemsによって提唱されたモノで、sRGBに比べて表現できる色の幅が広い。印刷等のDTP分野で使われている事が多い。
解決方法
ICCプロファイルが埋め込まれてしまっている画像、特にAdobe RGBが利用されている画像の場合、まずはsRGBに変換すると大分差異が無くなります。
Photoshopを持っている場合は、「編集」>「プロファイル変換」で変換することが可能です。
また、CS4は分かりませんが、CS5では「Webおよびデバイス用に保存」の中の設定で「sRGBに変換」という項目があります。
この際に「カラープロファイルの埋め込み」のチェックは入れない様にしてください。
試していませんが、「縮小革命」というでも変換することが可能の様ですね。
（前回の記事のExif情報の削除も出来るみたいです）