📢おしらせ!

2024.01.16 Amazonの画像リンクが廃止になったみたいで、画像表示が壊滅的被害中...(現在様子見)。
2023.08.01 ランダム表示していた上部バナーの画像置き場に使っていたサーバーが使えなくなってしまって、現在固定表示に...。(連番で画像ファイルが置ける場所がないか探し中...)

🍤ニコニコ動画に揚げました!

2010年2月22日

Web画像にICCプロファイルを埋め込むべきかどうなのか

追記

2018.7.22 追記

CLIP STUDIO TIPS でカラープロファイルの説明してました( ˘ω˘)φ_
カラープロファイルとは?-カラープロファイル理論編-「新規作成と書き出し #10」 by セルシス公式/CELSYS - CLIP STUDIO TIPS
https://tips.clip-studio.com/ja-jp/articles/909

2018.8.15 追記

ICCプロファイルの話じゃないんだけど、モニターの色について分かりやすく解説してる漫画があったのでリンク張っておきま~す( ˘ω˘)φ_








【注意】以下の文章は、最近個人的に調べて思ったことを自分なりに整理するために書いたのですが、正しいかどうか分かりませんヽ(´ー`;)ノ 
ネットで調べても、けっこう違う事が書いてあったりしてよく分からなかったり…。
詳しい人に教えて欲しいとこなんですが、うちの周りでこれに関して一番詳しいのが自分という不具合。読まないほうがいいですが、読まれる方はそれを前提に読んでもらったほうがよいですヽ(´ー`)ノ


ICCプロファイルとは?

ICCプロファイルというのは知らない人のために簡単に説明すると、どんな環境でも同じ色で再現されるようにする役割があるデータのことで、画像ファイルに埋め込んでおくとPCはそれを参照して正しい色で再現してくれます(°▽°)

カラーマネージメントという単語で言われることもありますヽ(´ー`)ノ
Webに画像をうpしてる人、特に自分で描いた絵や撮った写真をうpしてる人は他人のモニタでは自分が思っている色と違う色で表示されてたりすると困りますよねヽ(´ー`)ノ

ICCプロファイルを埋め込むべきか?

あ、いま、

「んじゃ自分は絵とか描かないし関係ないやw」

 って思いましたね?(+゜ー゜)9m

ところがどっこい、
ICCプロファイルのことまでは知らなくていいとしても、同じ画像が同じ色で表現されているかどうかというのは誰にとっても重要なことではありますヽ(´ー`)ノ

例えばネットショッピングで、気に入った色の帽子があったから買っていざ家に届いたら思っていた色と違った、とかだと・・・(+ノ-';)

また、オンラインゲームをしていて目的地へ行く方法を教えているときに、

「赤色のワープに乗って移動してー」

と言ったら

「赤色のワープがどこにもない;;」

と永遠にさまよったあげく、よくよく聞いてみたらその人のモニタではやや紫色に見えていた、とか(+ノ-')(実話)

なので、時と場合によっては意思疎通が崩壊するので、カラーマネージメントというのは結構大事な話だとは思うのですが、Web画像に関しては昔はICCプロファイルは埋め込まないほうがいいという話だったと思いますヽ(´ー`)ノ
(Windowsはカラーマネージメントシステムがしっかりしていない上にブラウザ自体も未対応だったので)

ただ最近、ICCプロファイルに対応してるブラウザ(Firefox・Safari・Lunascape(Gekkoエンジンの場合))が出てきたので、ひょっとしたらWeb画像にもICCプロファイル埋め込んだほうがいいのか?ということになりまして(+ノ-')

んで最近この件に関してどうも気になったのでいろいろ調べたりしてたんですが・・・
まぁ話が長くなりそうなのでとりあえず結論から言うと…(+ノ-')

いまはまだ埋め込む必要性が薄い。

といったとこなんでしょうか?ヽ(´ー`)ノ

ICCプロファイル対応状況

まぁとりあえず、

「ICCプロファイルってなに?ヽ(´ー`)ノ」

って人は無理して埋め込まなくてもいいかもしれません(+ノ-')
シェアNo1のIEがICCプロファイルに対応してない時点で…というヽ(´ー`)ノ
→自分のブラウザがICCプロファイルに対応してるかどうかが気になる人はこのページみたいなサイトの写真を見たらいいかと思われますヽ(´ー`)ノ
IEで見ると見事に色がばらばらですヽ(´ー`)ノ
さらにPixivやTwitpicなどを確認したところ、ICCプロファイルを埋め込んだ画像をアップすると小さいサムネイル画像だけICCプロファイルが破棄されるという珍現象が起きてたりもします(+ノ-')
このページ をFirefoxで見ても左のサムネイルの色がおかしい。クリックするとあら不思議(IEだとクリックしたところで変わらない)
なのでまだまだWeb自体がICCプロファイルに対応しきれてないというのが現状のもようヽ(´ー`)ノ

ICCプロファイルがないと…

ただICCプロファイルがないということはカラーマネージメントが行われないということだと思うので、Webにうpした画像は他環境(他のモニタやMacなど)で見た場合に色が若干変わっていると思っていたほうがいいでしょう(+ノ-')

困ったことにモニタが表現できる色というのは性能や個体差によってばらばららしいのですヽ(´ー`)ノ

なのでそれを修正するためにICCプロファイルというのが重要になってくるのですが…ヽ(´ー`;)ノ

Mac ではOSレベルでカラーマネージメントシステムがしっかりしていてブラウザもICCプロファイル対応なので、ICCプロファイルが埋め込まれていればそれ を参照してほぼ正しい色になるらしいということを考えたら埋め込んでおくにこしたことはないのかもしれません(+ノ-')

将来的にWindowsのカラーマネージメントがしっかりすれば…なのですがまだまだ時間がかかりそうです(+ノ-')

ちなみに世間では不評のVistaでしたがカラーマネージメントという部分においてはかなり強化されていたようです。
(それでもMacと比較するとまだまだのようですが)

なので、そういった意味では将来のことを見据えるならいまからICCプロファイルを埋め込んでおくのもよいのかもしれない?ヽ(´ー`)ノ

普通の人は気にする必要はない…?

ただ現在ブラウザによってはICCプロファイルがなければsRGBとみなして色変換されるみたいなので、これが主流になれば「sRGB IEC61966-2.1」環境で作業している限りICCプロファイルを埋め込む必要はなくなるかもしれないのですが(+ノ-')

Photoshopの設定で作業用スペースが「AdobeRGB」とかならプロファイルを指定してやらないとsRGBに変換されたときに色が変わってしまうのでそういう場合は埋め込まないとやばいかもですが、そもそもWeb画像を作る際は作業用スペースを「sRGB IEC61966-2.1」にして作業したほうがいいという(+ノ-')

Web以外の用途のためにAdobeRGBとかで作った画像をネットにうpするときは、プロファイルを指定するなり変換するなりしないと色変わりますよ?
というとこでしょうかヽ(´ー`)ノ

左側はICCプロファイルなし、右側はICCプロファイル(sRGB)を埋め込んでいる
作業用スペースはsRGB。
なのでどちらも同じ色ヽ(´ー`)ノ

作業用スペースをAdobeRGBに切り替えるとICCプロファイルがない画像は色が変わってしまうが、ICCプロファイルがある画像だと色が保持されるヽ(´ー`)ノ
つまりAdobeRGBの色空間のモニタだとこれくらい変わるということ?



このへんの話は趣味で絵描いたりしてる一般人にとってはどうでもいい話なのでスルーしていいかもしれないヽ(´ー`)ノ

仮にPhotoshopを使っていたとしても初期設定は「sRGB IEC61966-2.1」だと思いますし、いちいちここをいじることはないと思いますし、ICCプロファイルをサポートしてないソフトだとそもそも sRGBの画像しか作れないと思いますしおすしヽ(´ー`)ノ


ふーむ…?

あ、いや
その件に関してちょと分からない点があるんだったヽ(´ー`)ノ
ICCプロファイルを埋め込む埋め込まないの前に、次のケースに気をつけたほうがいいかもしれない?

(以下に書くことはさらによく分からん状態のことなのですが)
Photoshopとか使ってる人で、自分のモニタに関連づけられているカラープロファイルがsRGBではないとき?
(例えばモニタ専用のプロファイルを自分で設定した場合?)

この場合Photoshopで作業用スペースを「sRGB IEC61966-2.1」にしていると画像の色がなんかおかしい。
何度確認してもおかしい。
FirefoxでICCプロファイルが埋め込まれた画像を見てもやっぱおかしい。
これはいったいどういうことなのかヽ(´ー`;)ノ

わかりやすくするために極端に色が変わるプロファイルをモニタに関連づけてみた。
見てのとおりPhotoshop上の色がおかしい、 カラーパレットの色すらおかしい。

モニタの色空間がsRGBじゃなくても作業用スペースをsRGBにしてたらsRGBの色で表現されるわけではないのか?ヽ(´ー`)ノ
モニタにsRGBじゃないICCプロファイルを関連づけてもモニタの色はsRGBに固定されたままだから変なことになっている??
→Photoshopで「プロファイルの指定」でプレビュー見ながらsRGBとモニタRGBで切り替えてやって微妙に色が変わるならこの状態になっている?もしまったく変わらなかったら「自分のモニタの色空間=sRGBの色空間」なのかも?)
→もしくはこのページ の「デフォルト色空間テスト」で「色空間指定無し画像」の色が「sRGB色空間」と同じでない場合?(もちろんICCプロファイル対応ブラウザで見ないとダメ)
この場合Webに画像をうpするのを前提で作業してる人はこのまま作業をすると色がおかしいまま作業していることに?
んで自分では正しいと思っている色が他のモニタで見ると確実に違って見える恐れ?ヽ(´ー`)ノ
この辺の設定がおかしいとICCプロファイルがどうのこうの以前の問題な予感がするんだけど何度調べてもいろいろ試してもいまいちよくわからない(+ノ-')
なのでこの話はいったん置いとくとして…



仮にICCプロファイルを埋め込んだところで…

どこまで他の人のモニタで見たときもまったく同じ色になっているかというと・・・
正直疑問ですヽ(´ー`)ノ

WindowでFirefoxを使っていたとして、ICCプロファイルが埋め込まれていた画像を見てたとしても、

モニタのキャリブレーションがちゃんとされてなければ意味がないというヽ(´ー`)ノ

んで、普通の人がモニタのキャリブレーションをやってるかというと・・・
やりませんよねヽ(´ー`)ノ

PCショップ等でモニタがずらっと並んでいるのを見たときにモニタの色がけっこうばらばらだったりすると思うのですが、キャリブレーションが行われていないモニタ同士だとあれくらいの差が出ることもあるということだと思いますヽ(´ー`)ノ

さらに最近知った話だと、
粗悪なモニタだと出荷時に明るさ・コントラスト・ガンマ値を極端にいじってぱっと見た目はきれいに見えるように設定されてることもあるそうです(+ノ-') (自社のモニタがきれいに見えるようにするために)

コントラストとかが高いと見た目はくっきりきれい見えるけど、あまりに極端だと明部と暗部の色情報がふっとんでしまうのでそうなるともうめちゃくちゃですヽ(´ー`)ノ
このへんの自分のモニタの設定が正しいかどうかを簡単にチェックするにはこのページのコントラストテストというとこを見てみればいいかと思いますヽ(´ー`)ノ
そうなるとICCプロファイルを埋め込まれていたところで・・・という(+ノ-')



ちなみに最近安物のモニタを買ったのですが前のモニタと比較してみました。

(携帯カメラで撮ったので写真の画質自体がちょと悪いですが)左が最近買ったモニタ。右は前まで使っていたモニタ。肌色がこれくらい違うとちょとひく(´Д`;)ヾ とある同じ部分を切り抜いてやると・・・

これくらい色味が違う部分も。こうなるともはや違う色(;゜□゜)
ぱっと見た目は右のほうが正しい色に見えるが・・・。

キャリブレーション後。古いモニタも若干コントラストが強めだったので修正してみたら二つのモニタがほぼ同じような感じに。微妙に色が違うけどまぁ一般レベルだと及第点?



なので本当はみんながモニタのキャリブレーションというのをやるべきなんでしょうが、モニタのキャリブレーションツールというのを買うとすると安くても3~4万くらいするので一般向けではないし、かといってソフトウェアキャリブレーションをするとなると難しすぎてsibouします。

あまり色の知識がない 人が中途半端にソフトウェアキャリブレーションをするとかえって色が変になるかもなので危険だと思われます(+ノ-')


なので、やっぱりWeb画像というのはうpするほうも見てるほうも
「正しい色で表示されていない可能性がある」
と思っていたほうがいいのでしょうヽ(´ー`)ノ

いやらしい…

あーかいぶ

れんらく ふぉーむ(試運転中)

名前

メール *

メッセージ *

ヽ(´ー`)ノ