webサイトに写真画像をアップすると色が変わる暗くなる！カラーマネージメントの基礎を理解しよう！

カラーマネージメントという単語、写真を趣味としていると必ず耳にする言葉ですね。

ただ、なんだか難しい。

私も3年近くカメラやブログをやっておきながら、ちゃんと理解することをずっと避けてきました。本当に基礎的なことすら分かっていませんでした。

ですが、webサイトに写真画像をアップすると色が変わるという問題を抱えており、それを解決しようと色々と調べてみたので記事にまとめてみたいと思います。

私もまだまだ勉強が必要なので基礎的なことを枝葉を省いてざっくりと書きますね。

Yourshotに写真画像を投稿すると色が狂う

あの格式高いナショナルグラフィックが運営する写真投稿サイト「Yourshot」。

2度目のDDを目指してしばしば写真を投稿しているのですが、写真をアップすると色が変わってしまうのです。

彩度が落ちるというか色褪せるというか・・・。

例えばこの写真です。

これをYourshotにアップすると、色あせた紫のような色になってしまいます。

これです。

手前が元画像、後ろがYourshotにアップした写真をブラウザ（Safari）で表示させたものです。

投稿すると写真が圧縮されるようなので繊細感や階調感が落ちるのは仕方ありませんが色が全然違ってしまっています。青から紫になっています。

ちなみに、当ブログ、500px、インスタグラム等に写真画像をアップした時には何も色の変化はありませんでした。

なぜか、Yourshotだけ色が変わる（今思えば住友不動産販売ステップフォトコンもwebで写真をアップすると色が変わっていたかもしれません）。

ちょっと知識のある方ならすぐに原因が分かるのでしょうが、私は何故なのか全然わかりませんでした。

この問題の解決に向けてカラーマネージメントについて考えてみます。

カラーマネージメントの基礎

ちなみに、カラーマネージメントとはざっくり言うと、異なるデバイス間で色が一致するようにする試みのことです。

写真は3色で作られる

光の三原色って聞いた事ありますよね。

すべての光の色はRed（赤）、Green（緑）、Blue（青）の組み合わせで出来ているというやつです（これをRGB色空間と言うらしい）。

この3色の明るさをそれぞれ少しずつ変化させることで、あらゆる色を作ることができます。

よく写真画像として扱われるjpegではRGB各色を256階調（0〜255段階）の明るさで変化させ色を表現しています（0が最も暗く、255が最も明るい）。

R（赤）だけの256階調の画像。

G（緑）だけの256階調の画像。

B（青）だけの256階調の画像。

この3枚を重ねると写真画像になります。

不思議ですね。

ちなみに、色はR:100 G:100 B:200のように表現されたりします。これは、R:100であれば「Red（赤）について256段階中の100の明るさ」であることを表しています。

では、R:0 G:0 B:255はどんな色だと思いますか!?

R:0 G:0 B:255はどんな色か

R:0 G:0 B:255はどんな色なのか。

RとGが0で最も暗い、言い換えると赤と緑の成分なし、一方でBが255で最も明るく表示されます。つまり、R:0 G:0 B:255は真っ青、一番の青色となります。

ただ、一番の青色と言われてもモニターによってマチマチですよね。

鮮やかな発色が売りのモニターなら派手めな色味かもしれません。

あるいは、自然な発色が売りのモニターなら落ち着いた色味かもしれません。

一体どれが正しいR:0 G:0 B:255なのか!?

このように、モニターによって色が変わってしまっては、意図した通りの色を表現できずに困りってしまいますね。

色にこだわって現像したとしても、自分以外のモニターで色が狂ってしまっては台無しです。

そこで、◯◯規格みたいな色を統一する国際標準みたいなものが作られました。

R:0 G:0 B:255だけだとばらばらな青色でしたが、「◯◯規格でR:0 G:0 B:255」と示されれば、皆んな同じ青色を表示することが可能となります。

そして、◯◯規格というのがカラープロファイル（ICCプロファイル）と呼ばれるものになります。

カラープロファイル（ICCプロファイル）

カラープロファイル（ICCプロファイル）は色の身分証明書なんて言われているようですね。

ただ、カラープロファイルも国際規格と言いながら幾つか存在します。ややこしい。

しかしながら、画像に主に使われているのがsRGBとadobeRGBの2つです。

sRGBは国際標準化団体のIEC（国際電気標準会議）が1998年に制定した標準規格。現在は標準規格として多くの環境で利用できる規格になっています。

一方で、adobeRGBはあのAdobeが提唱した規格です。こちらも1998年に発表されており、特に国際規格として標準化されているわけではありませんが、多くの環境で利用される規格となっています。

そして、sRGBとadobeRGBの2つのカラープロファイルには重要な違いがあります。それは表現できる色の範囲（色域）が異なることです。

上の図で内側の青い三角がsRGBの色域で、外側の黄色い三角がadobeRGBの色域です。

adobeRGBの方が色域が遥かに広いですね。特に、adobeRGBはsRGBに比べると青から緑にかけての色域が広い。それだけ多くの色を表現可能なわけです。

そして、この色域の違いにより同じRGB値でも異なる色が表示されるという現象が起きます。

カラープロファイルの違いによる色の違い

例えば、「R:32 G:52 B:65」という色。

青緑色なのですが、実は「sRGBのR:32 G:52 B:65」と「adobeRGBのR:32 G:52 B:65」では違った色味になります。

こんな感じ。

結構違いますよね!?

「sRGBのR:32 G:52 B:65」は暗い色褪せた印象です。一方で、「adobeRGBのR:32 G:52 B:65」は色が比較的はっきりしています。

というように、同じRGB値をsRGBとadobeRGBで表した場合、一般的にsRGBの方が暗く褪せた印象の色味になります。なぜそうなるかと言うと、sRGBとadobeRGBの色域の広さが違うからです。

そして、これが前記した「Yourshotに写真画像を投稿すると色が狂う（暗くなる）」の原因につながってきます。

ちなみに、「adobeRGBのR:32 G:52 B:65」と同じ見た目の色をsRGBで表そうとすると、おおよそ「sRGBのR:8 G:49 B:64」とRGB値が変わります。

RGB値が違いますが、ほとんど同じに見えますね。

Yourshotに写真を投稿すると色が狂う原因はこれだった

調べてみると私がYourshotにアップした画像にはadobeRGBのカラープロファイルが埋め込まれていました（画像にメタデータにカラープロファイルを付加することを「埋め込む」と言うらしい）。

これが色を狂わせていたのですが、その過程を考えるとこうです。

例えば上画像の矢印の先の1ピクセルについて、「adobeRGBのR:32 G:52 B:65で表示して」という情報があったとします。

これをweb側（サーバー側!?あるいはブラウザー側!?）ではそのまま「adobeRGBのR:32 G:52 B:65」とは表示せず、adobeRGBのカラープロファイルを外して「sRGBのR:32 G:52 B:65」として表示するという現象が起きてしまいます。

そうすると色が変わって表示されてしまいますね。

本来は右の色で表示させたいのに、左の色で表示されてしまいます。

このようなことが写真画像全体で起こり写真の色が狂うという現象を引き起こしていたわけです。

それですごく大事なことですが、今のところweb標準はsRGBとなっています。したがって、上のようにsRGB以外のカラープロファイルを設定した画像をweb上で見ると元画像の色とは違った見え方になることが多いです。

これで解決

これを解決するにはアップする画像にadobeRGBのカラープロファイルではなく、sRGBのカラープロファイルを埋め込んであげれば良しです。

方法としては、Lrでは書き出しの際にカラースペースでsRGBを選択してあげるだけで良いです。

これで書き出します。

そうすると、さきほどの矢印の先の1ピクセル。

カラープロファイルを変えることで、今度は「sRGBのR:8 G:49 B:64」という色情報に変換されます（adobeRGBでは「adobeRGBのR:32 G:52 B:65」でした）。

そして、「sRGBのR:8 G:49 B:64」という色情報は、web上でもそのまま「sRGBのR:8 G:49 B:64」と表示されるので色狂いは起きません（正確には閲覧するブラウザーなどによっても微妙に色が変わってしまうようなので一筋縄にはいきませんが）。

webではsRGBのカラープロファイルを埋め込む、これで問題解決です！

ちなみに、同様にadobeRGBを使っていたのに500pxでは色が狂わなかった理由は分かりません・・・。

まとめ

今までなぜadobeRGBのカラープロファイルを使っていたのか謎です。ちゃんと知っておかないとダメですね！

Yourshotでもほとんどの写真の色が褪せた感じになっているので、これを本来の色で表示できてさえいればDDに選ばれていたかもしれません（違う）。

あとプンリンターとのカラーマネージメントもしっかり勉強したいです！