これまで、ブログに掲載する画像はImageOptimで最適化してきた。これは画像の軽量化という意味もあるが、むしろExifを除去したいという動機の方が大きい。除去されるデータはカラープロファイルも例外ではなく、ImageOptimに通すと画像の色が変わることがある*1のは気づいていたものの「こまけぇこたぁいいんだよ!!」で見過ごしていた。というわけで、今までの記事の画像は色合いが正しいとは限らないのである。すまん、みんな！
ところで、筆者、iPhoneを買う。最近のiPhone（7以降）には広色域ディスプレイが搭載されており、撮影された画像にも「Display P3」というプロファイルが埋め込まれている。そのため、ImageOptim後の色のくすみ方が半端ないことになった。そこで、本腰を入れて対応を検討してみることにした。
Web用画像のカラープロファイルの検討
単純に考えると、最適化後にカラープロファイルを埋め込めば理想的な環境では本来の色味で表示される。ただ、現実はそんな単純な話ではない。ブラウザがカラープロファイルを解釈してくれるとは限らないし、解釈の仕方も異なるからである。閲覧者の環境も色々。さて、取り得る対応は3つある。
（説明する自信がないのでカラープロファイルについては以下を参照していただきたい。多少古くなっているが）
本来のカラープロファイルを埋め込む
閲覧者の環境を信用する方法。Display P3だったらそのように埋め込む。
先進的な対応でもある。ブラウザ、OS、ディスプレイが揃っていたら最高の体験が提供できる。しかし、ブラウザによってはプロファイルはガン無視されるので、その場合プロファイルを剥がしたのと同じことになる。冒頭で述べたように色のくすんだ画像にしかならない。
時期尚早なので、この選択は却下。
sRGBに変換し、sRGBプロファイルを埋め込む
sRGBに変換し、念のためsRGBプロファイルを埋め込んでおく方法。プロファイルを持たないのにsRGB以外だと思うアクロバティック解釈に対応できる。
sRGBに変換し、何も埋め込まない
sRGBに変換し、どうせ無視されるなら初めから埋め込まないという方法。
さて、どうしよう。
Appleの場合
MacBook Pro (2018)の製品ページの画像*2を見てみた。「sRGB IEC61966-2.1」が埋め込まれていた。2番目のパターン。
ImageOptim開発元の意見
3番目のパターン。一読の価値あり。
Use sRGB instead of ICC color profiles — ImageOptim
Convert images to the sRGB profile, but don't embed it
CSSの場合
CSSの色空間はsRGBだそうです。なので、同じカラーコードのbackgroundと画像を並べた場合、画像がsRGBじゃないと変なことになる。
ページスピードの面
カラープロファイルは数KBある。数KBだが、画像の最適化やソースコードのminifyの努力を吹っ飛ばすには十分。
結論
当分の間、sRGBに変換し、何も埋め込まないことにする。
sRGBに変換する方法
今までのは余談で、書いておきたかったのはこれ。Mac付属アプリケーションの場合です。プレビュー.appじゃできない？
重要なのは初めにsRGBに変換しておくこと。その後、煮るなり焼くなり好きに編集し、ImageOptimに通す。
スクリーンショットにもプロファイルが付いているので同様に処理する。
GUI
結果を確認しながらできる。
ColorSyncユーティリティで開き、「プロファイルに合わせる」「sRGB IEC61966-2.1」を選択して「適用」。
CLI
まとめて処理する場合便利。
sips (scriptable image processing system)というコマンドがあります。
sips -m '/System/Library/ColorSync/Profiles/sRGB Profile.icc' image.jpgできることはカラーマネジメントだけでなく、画像の拡縮、クロップ、パッド等も。詳しくはman sipsを。
ドラッグ＆ドロップ
/Library/Scripts/ColorSync/Match.appにドラッグ＆ドロップするもよしダブルクリックで起動するもよし。同じところにいろいろあるよ。
というかsipsこれで知りました。
補遺
いろいろ語っているけど変換方法以外、あまり自信ないっす。
ブラウザのカラープロファイル対応状況は自分で調べて。Safari（というかMac）はプロファイル読むし付いていない画像はsRGBと解釈するとか。
