modoのレンダリング画像をAdobeRGBとsRGBにカラー設定を変えてモニタプロファイルで読み込んでそれぞれのプロファイルに変換したものを、プロファイル付きと無しでjpeg保存したものとWeb書き出しでjpegにしたものを、
そのままDreamweaverでレイアウトしたもの
http://www.yoshii.com/test070930/test-1.html
と
iWebでレイアウトしたもの。
http://web.mac.com/hiroshiyoshii/test/Photos.html
MacでもPC両方でSafariとFirefoxで見てみたので間違いないと思うけど、やはりiWebの画像はプロファイルのあるなしに関わらず、かなり暗く表示されるようだ。う〜ん。どう判断すりゃ。
まあ、このあたりのことは気にし始めたらきりがないので、気にしないのがいちばんなんだけど。便利さは捨てがたいけど、色を気にする人はiWebは使わないほうがいいのかもしれん。
●追加でこれ↓をテストしてみたところ、意外なことがわかった。
http://www.yoshii.com/test070930/test-2.html
なぜか、FirefoxとIEではsRGBだけが（ちょっと彩度上がり気味なものの）元の色に近い感じで表示された。つまりsRGBのプロファイルしか効かないようだ（SafariではAdobeRGBも近い色になる）。やはりこれ常識だったのかな。結論としては、Webに使う画像にはsRGBのプロファイルをつけるのがいいらしい。ん〜。面倒だけど、yoshii.comやブログ画像もできれば差し替えたい。
■追記
コメントのところで助言などいただきまして、実験しなおしての結論。
●Webに使う画像にsRGBプロファイルをつけると、Mac/PCのFirefoxやPCのIEではPhotoshop上とほぼ同じ色で表示させることができる。
●iWebで作成したページの画像はかなり暗く変色してしまう。が、iWeb2.02アップデート以降は暗くならないようになった。
iWebで作成（更新前）
iWebで作成（2.02にアップデート）
●BloggerではAdobeRGBプロファイルをつけた画像を投稿すると、サムネール画像が自動的にプロファイル無しにな り（破棄される？）、クリックして開く大きい画像ではプロファイルがついたままで表示されていたようだ。今までSafariもFirefoxも Bloggerのサムネールと本画像の色が異なるのはしかたないと思ってたけど、sRGBプロファイルをつけて投稿してみたところ、Firefoxではサ ムネールと本画像の色が同一に表示されるようになった（TDW_1519のカエルをsRGBの画像に差し替えた。それ以前の画像はサムネールと本画像の色がちがうので見てみて）。Safari2ではサムネールと本画像はぜんぜん色がちがうが、サム ネールの色はsRGB付き画像のようにちゃんと表示される。どういうことなんだこりゃ。sRGB付き画像を使えばMac版のSafari2と3ベータ以外 では何も問題ないことだけは確か。
16 件のコメント:
うちでWeb用の制作をする場合、AdobeRGBで完成した素材を、色の校正ツールでsRGBターゲットに調整し、書き出し、とやってますね。
結構お金のかかってそうなサイトでも、AdobeRGBのタグ付き画像を時々見かけるので、常識って程ではなさそうです。
商用サイトだのに「社長のモニタだと暗いから、もっと明るくしてよ」ってお客さんとの遭遇率がもう何年も変わりないので、なんぞの革新が無いと諦め半分ではあります。
21さんへ〜
う〜ん。Webのプロはそうやってるのですね。
Webで使う画像は「AdobeRGBプロファイルをPhotoshopのプロファイル変換でsRGBに変換して、プロファイル付きで書きだし」かなと。
プロファイルはつけないってことで統一しちゃうのもアリだとは思うけど。
MacユーザなのでWinで確認してませんが、確かに「iWebでレイアウトしたもの。」ページではかなり暗く表示されています。
不思議だったので当方でも確認してみました(^o^)
yoshiiさんが公開している「そのままDreamweaverでレイアウトしたもの」ページの画像を当方のiWebで配置し公開してみました。
http://web.mac.com/i.apple/TEST/Photos.html
ところが暗くならず「そのままDreamweaverでレイアウトしたもの」ページと同じ色合いになってます。（私の環境だけ？？）
う〜ん(?_?)
どうやらyoshiiさんの「iWebでレイアウトしたもの。」ページの画像で、埋め込まれているはずのプロファイルが埋め込まれていないようです。
そこに原因があるかもです。
ちなみに「そのままDreamweaverでレイアウトしたもの」では、プロファイルがきちんと埋め込まれています。
そして、わたしが公開しているiWeb上の画像は、プロファイルが埋め込まれて公開出来ていますので、埋め込んだ画像ならDreamweaverでもiWebでも同じ色合いになるはずです。
「iWebでレイアウトしたもの。」ページのプロファイルが外れているのか不思議です。
ちなみに当方はiWeb '08 ver2.02を使って書き出しました。
secondlifeさんへ〜
わざわざありがとうございます。なんででしょうね？
あ、ひょっとしてと思ってソフトウェアアップデートをかけてiWeb2を2.02に更新して、同じ画像から同じような写真ページを作ってみました。
http://web.mac.com/hiroshiyoshii/test2/Photos.html
なんと、暗くなるのが直ってます。不具合だったのかー！！
ただ、MacのSafariで表示するとプロファイル付きの画像はAdobeRGBもsRGBも青みの強い緑色になってます。Photoshop上ではハデな黄緑色なのですが。
FirefoxとPCのIEではAdobeRGBもsRGBもほぼPhotoshopと同じ色になっています。
で、なんと！！Windows版のSafariベータではFirefoxやIEと同じ色で表示されます。Mac版のSafari3ベータでは2と同じに青みの強い緑色に表示されます。こっちも改良してよね〜って感じ。
申し訳ありません、勘違いでコメントした上、誤解までさせてしまいました。
吉井さんの仰る通り、「色の校正ツールでsRGBターゲットに調整し」は大間違いで、「AdobeRGBプロファイルをPhotoshopのプロファイル変換でsRGBに変換して、プロファイル付きで書きだし」が正解です。「色の校正ツール」は使っちゃだめと言ってる方でした。
お詫びに、では無いですが、プロファイル周りについてもう少し。
自社で画像を書き出す際は、プロファイルの有無を用途で変えてます。それそのもので完結した作品などの画像は、プロファイル有り。サイト自体のパーツとなる画像には、プロファイル無し。これ結局は、Safari対策です。
パーツ画像の場合、最終的にレンダリングされるカラーが、背景やボーダーなどの要素と同様の入出力をしてもらわないと大変困ります。が、Safariはプロファイル有りの画像をきちんとマネージメントしてくれる為、画像のみが違う出力に。
CMYKにタグつけない方が安全、ってのに近い嫌な話ですが、PNGのガンマといい、Safariが混ざると画像処理の手間が増えます…。
混乱させるようなコメント、本当にごめんなさい。
21さんへ〜
いえいえ。僕もあんまりよくわかってないので手探りで実験って感じなんでいろいろ試すので大丈夫です。Webに上げる画像のプロファイルについてはとりあえずsRGBをつけとけば（現行バージョンのSafariを除いて）大丈夫そうだというのははっきりしました。
で、Safariでの表示だけ変という件ですが、昨日見たときはすごい違和感あったのですが、なぜかそれほど違和感なくなってます（MacBookのSafari3ベータだけ変な気がする）。ガンマをいつもの2.2からMac標準の1.8にしてみたらさらに違和感なくなりました。ひょっとするとAppleのソフトではAppleRGBを優先する仕組みがあるのかもしれません。
>で、Safariでの表示だけ変という件ですが、昨日見たときはすごい違和感あったのですが、なぜかそれほど違和感なくなってます。
ですよね〜。
仰るようにプロファイルが埋め込まれた画像は、Photoshop上の画像とSafari上の画像が同じになるはずです。逆に同じにならないとおかしいです。
カラーマネージメントは、異なる機器やソフトウェア同士の色を適正に伝える仕組みです。PhotoshopとSafariは、カラマネに対応してるため、Photoshopで生成した画像を正確にSafariに伝え、同じ色に見えるはずです。
逆にFirefoxやプロファイルを埋め込まないSafari上の画像など、カラマネに対応してない環境では、Photoshopの画面上と多少異なっているのが正解です。
もし、埋め込み画像がPhotoshop上の画像とSafari上の画像で異なる場合は、Photoshop上の設定などなど、他に問題があると考えていいと思います。
試しに、2007/09/27の記事「TDW_1516」の拡大画像（AdobeRGB埋め込み画像）をPhotoshopで開いてSafari上の画像と比べてみてください。カラマネに対応しているため同じ色合いに見えるはずです。
これは、sRGB埋め込み画像も同じ結果になります。
一方、カラマネに対応してないFirefoxで見ると、赤が暗く見えます。埋め込まれたプロファイルを無視し、モニタプロファイルで直接色を見ているためです。
Safariの場合は、埋め込みプロファイルをきちんと認識し、その色情報をモニタプロファイルにに伝えることが出来るので色が一致します。
ちょっと試してみてください〜(^o^)/
なんか混乱してきましたが、再度実験してみたところ（Macのみ）
・AdobeRGBの画像---Safari2ではPhotoshopと同じに表示できるが、Firefoxではカラマネがかかってないくすんだ表示になる。
・sRGBの画像---Safari2ではPhotoshopと同じに表示できる。FirefoxではカラマネがかかってPhotoshopに近い表示になるが、なぜかプロファイルなしの画像もsRGBカラマネがかかったのと同じ表示になる。
・Mac版のSafari3ベータでは、プロファイル付き画像もPhotoshopとはぜんぜんちがう色になる。
もうね、キリがないのでダラダラと書きますが、
WindowsのブラウザはIE・Firefox・Safariベータでほぼ共通した見え方をする。今までIE・Firefoxはカラーマネジメントは効いてないと思っていたけど、同じ画像をプロファイル有りと無しで保存したものがブラウザ上で明らかに色がちがう、ということはカラマネは働いているということ。で、わからないのが、同じ画像をプロファイル無しで、PhotoshopでJpeg保存するのとWeb用に書き出しするのとで、ブラウザ上で色が違って見えること。「iWeb2.02」ページの右端上下のカエルは明らかに違う色に見える。
う〜ん、ちゃんと実験に適したいろんな色を含んだ画像を作って、厳密に調べてみないと何がなんだかわからない〜。
>・sRGBの画像---Safari2ではPhotoshopと同じに表示できる。FirefoxではカラマネがかかってPhotoshopに近い表示になるが、なぜかプロファイルなしの画像もsRGBカラマネがかかったのと同じ表示になる。
そうなんですよ。Web用の画像をsRGBにするというのは、そこにポイントがあるんですよ(^o^)
sRGBの色空間で作成された画像が、プロファイルの有無にかかわらず、カラマネに対応してないFirefoxでも、近似値で表示されるのは、一般的にモニタの色空間がsRGBに準拠して作られているからです。
（最近では、より大きな色空間AdobeRGBに対応した高価なモニターも登場してきています）
Photoshop上で最終レタッチをする場合sRGB色空間上で作業すれば、一般的なモニター色空間で作業をしているのと一緒になり、カラマネに未対応環境でも近似値で表示させることが可能です。
もちろん、カラマネに対応している環境の方が、より近似値、同じモニタ内であれば同じ色が再現されます。
私の場合、modoでレンダリングした画像をWeb用に保存するんだったら...
1.レンダリング画像をPhotoshopでモニタプロファイルを指定して開く。あるいは、開いたあとにプロファイルの指定を行う。このときのモニタプロファイルは、modoでレンダリング画像を確認したモニタのプロファイルです。（これで、modo上のレンダー画像の色味とPhotoshopで開いたレンダー画像の色味が一致）
2.その後sRGB IEC61966-2.1にプロファイル変換。（これで、modoでレンダリング画像を確認したモニター色空間を一般的なモニタ色空間にします）
3.sRGB IEC61966-2.1色空間上で、最終レタッチや色補正で仕上げる。（一般的なモニタ色空間上で作業をしている状態）
4.プロファイルを埋め込んでWeb用に保存（21さんが仰るように、その画像で完結する一枚の絵の場合）
この作業フローならmodo上のレンダリング画像→Photoshop→カラマネ対応環境（safariなど）というように、色が正確に次の媒体に伝達されます。
まさに、カラーマネージメントの醍醐味ですね。
カラマネ未対応環境（Firefox）でも、近似値で再現されますし、今のところがわたしが考えるベストなやり方だと思っています。
しかし、WindowsのIEやFirefoxはMacのFirefoxと同じ考え方が成り立つと思ってましたが、そうでもないのかな?!
会社ではWinも使ってるので、暇なときにでも検証してみよっかな〜。
カラーマネージメントは深いです(。。)(゜゜)ウンウン
>同じ画像をプロファイル無しで、PhotoshopでJpeg保存するのとWeb用に書き出しするのとで、ブラウザ上で色が違って見えること。「iWeb2.02」ページの右端上下のカエルは明らかに違う色に見える。
ちょっと、わたしも気になったので、TDW_1519のサムネイル画像（プロファイルなし画像）を使って、2種類の方法でjpeg書き出しを行いました。
けど、色は一緒ですね。
Web上に掲載されているTDW_1519のサムネイル画像をつかって書き出してみても色が変わるでしょうか？
ちなみに、Mac版のPhotoshop CS2 ver.9.0.2でテストした結果です。
>>けど、色は一緒ですね。
これ、原因わかりました。
AdobeRGBをプロファイル無しで保存、と
AdogeRGBをsRGBにプロファイル変換した上で（見かけの色は変わってない）、プロファイル無しで保存、
の違いのようです。プロファイルが無ければ素の色かと思ったら、見かけの色を変えずにプロファイル変換するということは、元の色を変えていることになるようですね。
>>私の場合、modoでレンダリングした画像をWeb用に保存するんだったら...
カラマネ非対応のソフト、特に3Dソフトで作成した画像のカラマネについて、
1と2はAdobeRGBで同じことをやっていました。その後の手順は、今までそのままAdobeRGBプロファイルをつけて保存していたところを、sRGBにプロファイル変換してJpg保存するアクションを作って対応することにしました。ボタンを一回押すだけでWeb用画像が作れるのでラクです。
Mac版サファリと古いMac用 IEはカラマネ対応ですが、他のブラウザは、有無を言わさずsRGBとして表示しますね。
で、画像にプロファイルを埋め込む方法と、タグで記述する方法があったように記憶していますが、想像ですが・・・iWebはタグで指定しているのでは？
私は、PhotosopでｓRGBに変換してプロファイルつけてます。
蛸林さんへ〜
>>有無を言わさずsRGBとして表示しますね。
そのようですね。sRGBを意識してプロファイルをつける人と、ぜんぜんカラマネを使ってない人の両極端の人が正しく表示させられるようです。僕みたいな中途半端の人の画像は全滅です。
>>iWebはタグで指定しているのでは？
タグとかわからないですが、ソースを見てみたところ、それらしいタグは無いようです。
通りすがりで失礼します。私もwebのカラマネに関しては、アタマを痛めておりまして、皆さんほどいろいろ検証をしたわけではないのですが、一般的に言われているのは、、
secondLife さんの言われている通り、「一般的にモニタの色空間がsRGBに準拠して作られている」のに加え、ブラウザもAdobeRGBに対応してない。との事で、私も基本web上の画像は全てsRGBで。という認識で取り扱っております。
入稿される素材はほとんど印刷物用に補正されてる写真などですので、sRGBに変換してから再度補正などして、プロファイルを埋め込んだ状態にしてます。
webに特化したカラマネの話はあまり聞けないので、こういう場はとてもありがたいです。機会がありましたら、このテーマでセミナーを。。絶対行きます！なんて。。失礼しました。
通りすがりさんへ〜
iWebの色が変ということがきっかけになって、いろんなことがわかりました。とりあえず、Web上のカラマネに関しては「画像にsRGBを埋め込み」する以外にこちら側でコントロールできることはほとんど無い、というのがわかっただけでも大収穫。
まあ、低品質なモニタなどでも表示できるようにかなり狭く設定された護送船団方式のようなsRGBなわけで、そのうちAdobeRGB対応機器が増えて高級を謳うようになるかも。そしたらあらゆるブラウザはAdobeRGBに対応せざるを得なくなるでしょうね。
コメントを投稿