Hatena::ブログ(Diary)

偽デジタル写真屋日報だったもの(冬眠中)

2007-03-07

[][]ブラウザにより表示される色が変わる話 ブラウザにより表示される色が変わる話を含むブックマーク ブラウザにより表示される色が変わる話のブックマークコメント

スルーしようかと思ってたんですけどRinRin王国だの変人窟だのの読者が多そうなサイトで取り上げられているのでこれは突っ込んでおかないとならんよなぁ、というわけで以下突っ込んでみます。本職の色屋さんが見るとちょっと文脈が怪しいところがあるかもしれませんがおおむね文章は外していない…はず。

ちなみに話題元は以下。

そもそもの大前提

  • W3Cでは、sRGBをStandard Color Spaceとするって考えてるようです。なのでWeb向けの画像を作る場合はsRGB基準で作るのが基本ちうか標準工程
  • 他の作業プロファイル(AdobeRGBとかProPhotoRGBとかAppleRGBとか)で作られたRGB画像は制作環境と同じ表示を期待する方が無駄なのでそのままWeb用に使うのはとっとと諦めるのが肝心です。
  • 現状写真に埋め込まれたICCプロファイルを解釈してモニタプロファイルに合わせた表示をしてくれるブラウザはSafari(並びにWebCoreを使うブラウザ類。代表例としてはシイラやOmniWebなど)とMacIE4.5*1以降(ただし環境設定においてColorSyncを適用させたもののみ)しかありません。
  • 上記環境においてのみ、Webブラウザ上でも他のColorSync対応アプリケーションで開いたときと同じ色再現が行われます。そのためsRGB以外の環境で作られた画像であってもICCプロファイルさえ埋め込んで正しいモニタプロファイルを作成した環境で見れば適切な色再現をColorSyncがやってくれます。
  • 他のWebブラウザはICCプロファイルを無視しsRGBと解釈して展開するものが基本的な動作です*2
  • そのためsRGB以外の環境で作られた画像を他のブラウザで展開すると適切な色再現が行われず、「色が違って見える!」という展開になります。

じゃあどうすればいいの?

AdobeRGBなど、非sRGB環境で作られた画像はとりあえずsRGBに変換しましょう。標準に合わせるのが一番安全。

f:id:mannin:20070307191421p:image

上はPhotoshopのメニュー。指定するのは「プロファイル変換」であって「プロファイルの指定」じゃありませんから要注意。

f:id:mannin:20070307191744p:image

で、プロファイル変換画面。ここで変換後のカラースペースをsRGBにしてやります。マッチング方法は「知覚的」が無難。「相対的な彩度を維持」でもいいかな。他の奴は写真以外の画像を変換するときに使うことがありますがあまり意識しなくてもいいです。

f:id:mannin:20070307192229p:image

で、保存するときにプロファイルを埋め込んであげれば比較的*3他の環境でもおかしくない色再現で表示される画像ができあがります。

やっちゃいかんこと

最初URLを挙げたblog2件に書かれている「モニタプロファイルに変換してICCプロファイルを埋め込んで保存」は間違ってもやっちゃいけません

いや確かにブラウザ表示とPhotoshopで色が合うんでやりたくなる気持ちは分かるんですよ。でもね、ちょっと考えてみてください。そのモニタプロファイルは他の大多数の人が見ているモニタのモニタプロファイルとは違いませんか?

そう、モニタプロファイルに変換ってのは「自分のところでだけ」表示色が合うだけで、他の閲覧環境でも合うようになるかってーとむしろ悪化する可能性が高いんですよ特に非MacOS環境。「俺の写真はsRGBの枠に留まらないんだ!」とか言いたい気持ちは分からんでもないですが現在のWeb上においてそういう発想は寝言にしかならないと思った方がいいです。

なんでMacだけICCプロファイルを解釈するブラウザがあるの?

でも元々OSにColorSyncっていうカラーマネージメント機構が搭載されてたってのは大きいでしょうね。あと、Macの場合モニタガンマを1.8に設定してるところが多いんで、そういう環境でも表示に問題を起こさないようにしたいという発想もあるのかもしれません。この辺はあくまでも妄想ですが。

Mac使いでFireFox使いなんだけど色がおかしいよ!なんとかしてよ!

無理。素直にSafari系ブラウザを使ってください。もしくはモニタプロファイルを6500k/ガンマ2.2目標で作ってFireFoxを使ってみてください。なんぼかマシになるはず。

2009/04/05追記:FireFox3系であればabout:configを編集することによってICCプロファイルを解釈できるようになりました。Mozilla Links 日本語版: Firefox 3 がカラーマネージメントをサポートGran Paradiso(次期 Firefox 3)最近の話題 - えむもじらあたりを参照のこと。

Windows環境においては色がちゃんと合わなくても諦めが必要?

現状においてはどこでも厳密に色が合って見えるってのを期待するのは難しいかなぁ。ただWin2000以降であればモニタプロファイルを(1台だけとはいえ)指定できるので同じターゲットでモニタをキャリブレートしているPC間ならそれほど誤差のない表示が期待できる可能性はあります。

OS標準の画像ビューアはXPあたりからICCプロファイルを見るようになってきているし、Vistaには新しいカラーマネージメント環境が搭載されるようになってきたりもしているので、今後Webブラウザ側でもOS側のカラーマネージメント環境の恩恵を受けられるようになってくるんじゃないのかなぁ、って気はしますね。

ただし

当然といえば当然ですが、モニタを調整せず適切なモニタプロファイルも作っていない環境においては「同じ表示色を期待」っていうこと自体が成立しません。なのでWebで見せる写真について厳密な色再現を期待する、ってのはあんまり真面目に追及しちゃいかんのじゃないかなぁと思いますよいや冗談でなく。

*1:バージョンは微妙にうろ覚え。MacIE4からだったかもしれない

*2MacのFireFoxはICCプロファイルを無視してモニタプロファイルで解釈する模様。あーややこしい!

*3:ここ重要。ある程度まで似た再現が行えることが期待される、程度に考えておくのが安全

支倉支倉 2007/03/08 02:47 色<うわぁありがとうでも頭が痛い知恵熱がががが…頑張ろう…orz

RyuichiXPRyuichiXP 2007/03/09 10:56 色についてまとめてられていて,大変参考になります.写真のみならず何でも当てはまりそうな内容ですよね.はてぶに登録させていただきます.

manninmannin 2007/03/10 15:23 結局カラーマネージメント周りについて学ぶってのは色について学ぶことを避けられないので、
「〜すれば簡単に解決!やったー!」みたいな方法論が取りにくいのですよ。
面倒でも最低限の理屈を抑えないと事故の元になっちゃうのが曲者だと思います。
色にまつわる世界の話は。