当記事は現在執筆途中であり、正式版ではありません。記載ミスや実際と異なる情報などがありましたらコメント欄でご指摘ください。ブラウザの開発に関わっている方、開発をウォッチしている方からの情報は特に歓迎します。

(2019年2月23日更新)今回は全面的な書き直しではなく、「続・まとめ」公開後の状況を反映させたアップデート版になります。

Webを通じて触れることのできる、色々な方のコンテンツ・作品を自分の環境において発信者の意図に沿ったかたちで閲覧・鑑賞できているかを考えるためのひとつの材料としてこの記事を活用していただければ幸いです。

ご覧になる際は以下の点にご注意ください。

  • 記載の情報は執筆時点での最新情報です。必ず記事の投稿・更新日時を確認してください。
  • 表に記載のバージョン番号は当方にて確認を行ったバージョンを示します。記載のバージョン以降仕様が変更された、という意味ではありませんのでご注意ください。
  • 複数のプラットフォームに対応したブラウザについてはWindows版の情報を記載しています。他のプラットフォームでは状況が異なる可能性があります(読者からの情報提供があればできるだけ反映させるようにします)。
  • 検証環境はWindows 10 Home 1809です。他のバージョンのWindowsで検証済みかつ結果の異なるものについてはその旨記載します。

ざっくりまとめると……

  • 現行のOSを使っているならば、あなたもカラーマネジメント表示対応ブラウザを使っています。もはや他人事ではありません
  • モニタのプロファイル作成はv2・Matrixタイプで
  • Firefoxユーザーはプライマリモニタで鑑賞を
  • CMYK画像はRGBに変換してからのアップロードを

カラーマネジメント表示対応の道程

詳細な年月日まで調べ切れませんので順番だけ示しておきます。モバイル(スマホ)向けは含みませんのでご注意。

  1. Mac版Internet Explorerが埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  2. Safariが埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  3. Firefox3がカスタム版Little CMS使用によるカラーマネジメント表示対応、埋め込みプロファイルを持たない画像や非画像はsRGBと見なすが、カラーマネジメント表示自体がデフォルトでオフになっていた
  4. Firefox3.5でカラー変換エンジンをLittle CMSから独自開発のqcmsに変更。カラーマネジメント表示がデフォルトで有効化されるが、プロファイルを持たない画像や非画像はSafariやMacIEと同様にスルーする仕様に変更
  5. Firefox8でv4プロファイル・LUTプロファイルを使用可能にするオプション設定(デフォルトでオフ)が追加される
  6. Internet Explorer9で埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  7. Chrome16でMac版のみ埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  8. Opera12でLittle CMS2使用による埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  9. Chrome22でMac版以外も埋め込みプロファイルを持つ画像のカラーマネジメント表示に対応
  10. Blinkを採用したOpera15公開
  11. OS X 10.8へのアップグレードに伴いSafariにて埋め込みプロファイルのない画像や非画像がsRGBと見なされる仕様に変更
  12. Chrome61で埋め込みプロファイルのない画像や非画像がsRGBと見なされる仕様に変更

主要ブラウザの対応状況

HTML要素への対応
画像非画像プロファイルを持たない画像
Internet Explorer 11スルースルー
Edgeスルースルー
Firefox 65sRGB(要設定変更)sRGB(要設定変更)
Google Chrome 72sRGBsRGB
Opera 58sRGBsRGB
Opera 12スルースルー
Safari 7sRGBsRGB
プロファイルの対応

MatrixプロファイルLUTプロファイルv4プロファイル
Internet Explorer 11
Edge
Firefox 65○(要設定変更)(注)○(要設定変更)
Google Chrome 72
Opera 58
Opera 12
Safari 7
注)LUTプロファイルは画像埋め込みのみ
モニタプロファイル

プライマリモニタからの取得マルチモニタ対応
Internet Explorer 11×(sRGB固定)n/a
Edge×(sRGB固定)n/a
Firefox 65○(設定で指定可能)×
Google Chrome 72
Opera 58
Opera 12×(sRGB固定)n/a
Safari 7未調査
その他

CMYK JPEG画像変換エンジン
Internet Explorer 11Microsoft CMM
EdgeMicrosoft CMM
Firefox 65qcms
Google Chrome 72○(埋め込みプロファイルがある画像に限る)qcms?
Opera 58○(埋め込みプロファイルがある画像に限る)qcms?
Opera 12未調査Little CMS2
Safari 7Apple CMM

解説と補足

HTML要素への対応

最初の表は、カラーマネジメント表示が行われる対象についてまとめたものです。ICCプロファイルが埋め込まれた画像については、カラーマネジメント表示対応のブラウザすべてが対象としているので問題ないでしょう。しかし非画像のHTML要素とプロファイルを持たない画像の扱いは混乱が生じました。

Webの標準に従うならば、CSSの仕様で指定のRGB値はsRGBであるとされていますので、これらの要素はsRGBとみなされモニタのカラースペースに変換されるのが「正しい」と言えますが、カラーマネジメント表示対応で先行したMac版Internet ExplorerとSafariがプロファイルを持つ画像のみ変換を行うという実装をして以来、長らくそれが「事実上の標準」仕様として定着してきた経緯があります。Firefoxも意図したものか偶然かはともかく当初はWeb標準に沿った仕様を採用していたところ、後にデフォルトの設定を事実上の標準に合わせる仕様変更を行っています。

ところが、これまでカラーマネジメント表示対応を先導してきたと言えるSafariがOS X 10.8搭載のバージョン6で非画像・埋め込みプロファイルのない画像をsRGBとして扱うようになりました。その後しばらくはブラウザの動向に変化はありませんでしたがGoogle Chromeもバージョン61で追随。Microsoft Edgeも近い将来Chromeと同じBlinkエンジンに移行するとされていますので、残るはFirefoxのみという状況になりつつあります。

プロファイルの対応

2つ目の表は、各ブラウザがカラー変換エンジンを通して扱うことのできるプロファイルの仕様について比較しています。

Matrixプロファイル
Matrixプロファイルはモニタ用のプロファイルとしては一般的なもので、カラー変換に関係のない情報が含まれていなければ数100バイト~数キロバイトのファイルサイズとなります。Adobe RGBやsRGBなど作業用・データ交換用のRGBプロファイルも基本的にこのタイプとなります。
LUTプロファイル
LUTプロファイルはグレースケールのプロファイルやモニタのRGBプロファイル以外で使用されるタイプのプロファイルで、ファイルサイズは数100キロバイト~数メガバイトになります。通常Webで流通する画像でLUTプロファイルが埋め込まれることはありませんが、モニタのプロファイル作成時にうっかりLUTプロファイルを作成する設定にしてしまうとブラウザによっては適切なカラーで表示できないことになりますので注意してください。
v4プロファイル
ICCバージョン4系の仕様に含まれるタグやデータ型に対応していれば○ということになります。アプリケーションがv4プロファイルに対応していくこと自体は正しい流れだと思いますが、Webの世界においてはまだまだv2プロファイルで間に合っている感が強いですから現状で非対応だとしても低い評価を下すのは早計でしょう。

念のため補足しておきますが、MatrixかLUTかの区別とv2かv4かの区別はそれぞれ別の話です。したがってv2プロファイルにもv4プロファイルにもMatrixかLUTかの区別が存在するということになります。

モニタプロファイル

3つめの表はカラーマネジメントされたコンテンツをモニタのカラースペースにきちんと変換できるかどうかを示すものです。モニタの規定のプロファイルを適切に取得できれば問題ありませんが、取得できない(しない)場合は別のプロファイルが代わりに使われることになるため不適切な変換結果となってしまいます。

また、マルチモニタ環境ではそれぞれのモニタのプロファイルを取得した上で、さらにブラウザウインドウがどのモニタ上にあるのかを判断してそのモニタのカラースペースへと変換できなければなりません。万全を期すならばウインドウが複数のモニタにまたがって配置されているケースも考慮すべきなので、シングルモニタ環境より対応コストはずっと高くつくことになります。

CMYK画像

かつてはCMYK JPEG画像は表示できない、あるいは簡易なRGB変換により不適切なカラーで表示されるブラウザが多かったのですが、近年ではプロファイルが埋め込まれたものに関してはおおむね適切に表示されるようになってきています。

プロファイルが埋め込まれていない画像については、国・地域によって標準的(または一般的)なプロファイルが異なるため、本来使用されるべきプロファイルとは異なるプロファイルで代替されたり、簡易変換になってしまう(Blink系ブラウザ)ので注意が必要です。

それ以外にも、ファイルサイズが大きくなる、Webサービス側で不適切な処理が行われるリスクがある、なども考慮すると、Web用の画像はあらかじめRGBに変換を済ませておくのが望ましいといえるでしょう。

ブラウザ毎の対応状況・解説

Internet Explorer

バージョン89
画像×
プロファイルのない画像スルー
非画像スルー
LUTプロファイルn/a
v4プロファイルn/a
モニタプロファイルn/asRGB
変換エンジンn/aMicrosoft CMM

Internet Explorerはバージョン9で画像のカラーマネジメント表示に対応しました。プロファイルが埋め込まれていない画像や非画像に関しては変換を行わず元のRGB値を維持します。

現行バージョンの11に至るまで、モニタのカラースペースではなくsRGBへと変換されてしまう既知の問題があります。高色域モニタのユーザーには影響が大きく問題を認識されている方も多いと思われますが、わかりにくいというだけでモニタのプロファイルを設定している全てのユーザーに等しく影響がありますので、画像コンテンツをきちんと表示させたい用途では使用を避けた方がよいでしょう。

個人的な推測となりますが、IE9は画像のカラーマネジメント表示に対応させたというよりは画像の処理をGDI+ベース(?)からWICベースに移行した結果として副作用的に対応してしまった、もしくは移行したついでに小規模な修正を追加して簡易的に対応させたというのが真相なのではないかという気がしています。言い換えると「元々正攻法できちんと対応させるつもりがなかった」のではないかということですね。もちろん、指摘しているのはIE開発チームの怠慢の可能性であってWindowsはクソであるとかいう話ではありませんのであしからず。

参考

Firefox

バージョン233.58
画像×
プロファイルのない画像スルーsRGBsRGB(要設定変更)
非画像スルーsRGBsRGB(要設定変更)
LUTプロファイルn/a×○(要設定変更)
v4プロファイルn/a×○(要設定変更)
モニタプロファイルn/a○(設定で直接指定可)
変換エンジンn/aLittle CMSqcms

Firefoxはバージョン3で初めてカラーマネジメント表示に対応しましたが、この時点ではデフォルトで無効化されており、ユーザーによる設定変更が必要でした。パフォーマンスへの影響が懸念されたためということもあるでしょうし、バージョンアップで表示に変化が生じてバグではないかと騒がれるのを避ける意図もあったかもしれません。

バージョン3.5では、パフォーマンスの改善や脆弱性対策のタイムラグなどの都合によりLittle CMS(バージョン1.xのカスタム)から独自開発のqcmsへと変換エンジンが変更されました。その影響でICCプロファイルの対応度については後退してしまったものの、後のバージョンではオプション扱いながら改善してきています。

また、同じく3.5以降では変換の対象をデフォルトで埋め込みプロファイル付きの画像に限定する「事実上の標準」に合わせた仕様変更とセットでカラーマネジメント表示のデフォルト有効化が行われています。

カラーマネジメント関連の設定

ロケーションバーにabout:configと入力して設定ページに入り、gfx.color_managementで始まる項目の値を変更する方法と、Configuration Maniaなどのアドオンから変更する方法とがあります。設定項目は以下の通りです。

display_profile
お使いのモニタのプロファイルのフルパスを指定します。値が空の場合はプライマリモニタの既定のプロファイルを起動時に取得します。
mode
0はカラーマネジメント表示を行いません。1は全てのHTML要素を対象にカラーマネジメント表示を行い(プラグインなど例外あり)、2はタグ付けされた(プロファイルが埋め込まれた)画像のみを対象にカラーマネジメント表示を行います。
rendering_intent
各コンテンツのカラースペースからモニタのカラースペースへ変換する際のレンダリングインテントを指定します。-1は画像ファイルの指定に従う(詳細未確認)、0は知覚的、1は相対的な色域を維持、2は彩度、3は絶対的な色域を維持に対応します。
enablev4
ICCプロファイルの対応互換性を改善します。デフォルト値のfalseで問題ないですが、本来カラーマネジメント表示になるはずなのにならないコンテンツがある場合はtrueに変更すると改善する可能性があります。

LUTプロファイルの対応

現行バージョンのFirefoxではLUTプロファイルは画像埋め込みの場合に限り有効です。モニタのプロファイルにLUTプロファイルを作成・設定している場合は無視されsRGBのプロファイルで代用されますのでご注意を。Argyll(DispcalGUI)であればMatrix/LUT両方の情報を持ったプロファイルを作成できますので、必要であればそのようにしておくとよいでしょう。

以下参考:

Google Chrome

バージョン1516(Mac)22(Win/Linux)61
画像×
プロファイルのない画像スルーsRGB
非画像スルーsRGB
LUTプロファイルn/a未調査×
v4プロファイルn/a未調査×
モニタプロファイルn/a未調査
変換エンジンn/a未調査qcmsqcms?

Google ChromeはFirefox向けに開発がスタートしたqcmsを採用し、バージョン22より画像のカラーマネジメント表示に対応しました。例外的に、Mac版に関してはバージョン16から対応となっているため、こちらはqcmsを使わずOS側のAPIを使用している可能性があります。

プロファイルを持たない画像や非画像のHTML要素に関してはバージョン61よりsRGBと見なすよう仕様変更されています(設定変更で旧仕様に戻すことも可能→現在は戻せません)。その後マルチモニタ環境への対応(62)やプロファイルが埋め込まれたCMYK JPEG画像の表示(64)などの改善もみられますが、一方でTwitterなどでは更新後のトラブルを訴える声も散見されるようになっています(一部はカラーマネジメントへの不理解によるものもあるでしょうが、カラー変換の不具合やモニタプロファイルとの互換性に関わる問題と思しき内容もみられます)。

Opera

バージョン1212.1015
画像×
プロファイルのない画像スルー
非画像スルー
LUTプロファイルn/a×
v4プロファイルn/a×
モニタプロファイルn/asRGB
変換エンジンn/aLittle CMS2qcms

OperaはPrestoエンジンベースの12.10においてLittle CMS2を採用して独自にカラーマネジメント表示対応を果たしましたが、モニタのプロファイルを取得しない(できない?)問題を残したままバージョン15にてBlinkエンジンベースへと移行しました。Blinkエンジンはqcmsによる画像のカラーマネジメント表示対応ですので、現行バージョンではその仕様に沿った挙動を示しています。以降、カラーマネジメント関連の仕様はGoogle Chromeにおおむね追随していると考えられますので、上記の表では調査を省略しています。

Safari

(あとで書く)