皆さんはデジタル写真の色の調整にどれほどの労力を割いておられるだろうか。デジタルカラーに詳しくなくても、iPhoneで見るのと他のスマホで見るのとでは色が違うという話は、ツイッターのコスプレイヤーの間でもよくツイートされている。

ブログを更新しようと、Photoshopで写真をレタッチしてJPEG保存し、アップロードした。するとなんだか色がおかしい。アレ？こんなくすんだ色だったかな？

問題の箇所は薄い水色のストライプの壁。色がパソコンのプレビュー画像よりもやや暗く、くすんでいる。他にも白いシーツの部分や、白ホリゾントの光が余り回っていなくて薄い水色に描写されている部分がやや暗みがかっている。この記事の前の直近3つの記事に掲載している写真が該当しているので、興味のある方は参考にして頂きたい。

初めはTIFF形式とJPEG形式の違いかと思った。16bitと8bitの違い、すなわち階調の違いでJPEG保存したときに滑らかな階調が端折られて、色がくすんで見えるのかと思った。しかし二つの画像を比較してみると、色に違いは見られない。そもそも通常のパソコンのディスプレイでは、8bitまでしか表示されないそうだ。

そこで次に、ブログに写真データをアップロードする際に自動的に画質を低下させているのではないかと疑った。ところがこちらも画質が劣化しているようには見えない。

ワードプレスブログに上げるとサムネイルの画質を自動的に90％に圧縮するのが原因か？ → ×

そういえば3年ほど前、ブログを見てくれている親しい仲のコスプレイヤーさんから、iPhoneだとサムネイル画像の表示が荒いと言われた。そこで検索してみると、アップロードする際にサムネイルの画質を自動的に圧縮して劣化させるのが原因で、ワードプレスのfunction.phpに或る一行を付け足すと解決すると載っていたので、その通りにやってみると、サムネイルがボンヤリと見える問題は解決した。

WordPressにアップロードしてリサイズされたJPG画像の画質を1行のコードで改善させる(外部サイト：kachibito)

後にiMacに買い換えた時、1ピクセルに4ピクセル詰め込んで表示させるRetinaディスプレイで自分のブログを見ると、画像がボンヤリと見えるようになった。この時は、ブログ用に保存する際に画像サイズを今までの2倍に設定して（長辺1024ピクセル→2048ピクセル）、画質をPhotoshopで言うところの65％に下げて保存し（Canon DPPでは画質10段階のうちの1で保存）、ファイルサイズの圧縮に努めた。画像は2048ピクセルの大きさで画質の粗もやや目に付くが、これを1024ピクセルに縮小表示させているので、画質の粗は目立たないというカラクリだ。試しに画質100％と65％、二つの画像を並べて表示しても画質の違いは分からなかった。

ようやくここまで巧く対策できたと思ったら、今度は色あいによって薄暗く色が落ちてしまうという問題の発生だ。

カラープロファイルが原因ではないかと、sRGB埋め込みありとなしで保存してアップロードしてみたが、暗くくすむ問題は変わらなかった。やや黄色みが加味される。薄青い部分がまるで古い蛍光灯を薄く当てたような色味に変色する。

カラープロファイルの問題なら、色は全体的に彩度が抜け落ちたように薄くくすむはずだが、薄水色や白っぽい灰色の部分以外は問題なく表示されている。ライティングが綺麗に当たっている顔や衣装はほとんど色味に変化は見られない。

ワードプレスのアップデートで何か仕様が変わったのだろうかと、以前上げた写真をファイル名を変えてアップロードし、並べて表示させてみたが、色味に変化はなかった。問題の生じた写真と異なり、薄水色っぽい部分のない写真だったからだろう。

デジタル写真は難しい。例えばキャリブレーションモニタという正確な色を出す専用の高価なモニターがある。しかしこのモニターで調節したところで、ブログに写真を上げて色が変わってしまうのなら、何のために調節したんだろうという話になる。印刷は滅多に行わないし、仕事として写真をやっているわけでもない。

色の違いはこれだけに留まらない。iMacの代表的なウェブブラウザはSafariだが、他にもGoogleChromeや、Firefox、OperaなどがMac用に提供されている。ところがSafariとFirefoxでも、写真の色の見え方が異なってくる。Firefoxの方が彩度が濃くなるのだ。試しに自分のブログで表示させてみたら、結構色味が濃くなっていた。許容範囲内ではあったので胸をなで下ろしたが。

ブラウザだけではない。パソコンやスマホなどのデバイスによっても色は変わってくるし、ディスプレイの経年劣化によっても色味は変わる。デジタルの色は追求すればするほど、次から次へと発生する面倒な問題に絡め取られることになる。

さて、写真の薄水色や白っぽい灰色の部分をブログにアップロードするとなぜ色味が薄暗くくすんでしまうのか、自分としてはライティングを解説しているので、色味が落ち込んでしまうのは重要な問題でもあるのだが、解決策の糸口が掴めないでいる。仮に1行付け足したコードがPHPのバージョンアップで機能しなくなり、圧縮比率が変わったからと言って、色まで変わったりするだろうか。気休めに以前ソフマップで購入して余り読み進めていなかったデジタル写真に関する良書でも読んでみようか。

サーバーが原因？比較検証実験をしてみる

胸のモヤっと感が収まらないので、検証して原因を突き詰めてみることにした。同じ画像をツイッターやワードプレスでないサイト、別のサーバーに上げて比較検証してみる。

• ツイッター拡大表示は綺麗。ツイッターサムネイル表示は薄水色部分が薄暗い。ツイッターサムネイルのスクショiMacプレビュー表示は綺麗。
• サイトアップロードは薄水色部分が薄暗い。
• 当ブログを介してのアップロードは薄水色部分が薄暗い。
• 当ブログと同じサーバーの、別サイトに上げてみる。ブログから上げるのと変わらない。
• 別のサーバーに上げてみると、iMacのプレビュー画像と変わらない明るさ。

サーバーの問題か？

画像の薄青っぽい部分が薄暗くなる原因を仮定

• サーバーの使用容量や転送量の上限を超えた為に自動的に圧縮された？
• 縮小表示されると圧縮されるため？
• 16bitと8bitの違い？

原因は背景の色の違いによる目の錯覚だった！

しかしどうも目の錯覚のような気がしてきた。iMacのプレビュー画像とブラウザに表示されている画像を重ねて、表示を切り替えてみると、そんなに違いは見られない。iMacにデフォルトで入っているアプリ「デジタルカラーメーター」で二枚の写真のほぼ同じ箇所をスポイドしてみたが、こちらも色の数値はほとんど変わらない。

縞模様による錯覚か、試しにプレビュー画像の背景を黒から白に変えてみると、あら不思議。今度はiMacのプレビュー画像の薄水色の箇所の方が、ブログに上げた写真よりも薄暗く見えるようになった。

よく比較してみると、iMacのプレビュー画像と同じ明るさで見えた写真は、背景が黒い。対して薄青っぽい部分が暗く淀んで見えていた写真はすべて背景が白だった。画像の隅がたまたま薄いくすんだ色で、その隣り合わせの背景が白だったから、寄りくすんだ色に見えたという事か。

ということで、原因は画像外の背景の色だった。背景が白だと薄水色部分が落ち込んだ色に見え、背景が黒だと同じ箇所が明るく見える。

ということで一件落着。ということは明るめの白っぽい写真を表示するときは背景が黒、暗い写真を表示するときは背景は白の方が良いという事だろうか。その疑問はまた次回に譲るとして、とりあえず今回の件をまとめておきたい。

今回の問題の原因と解決策

• 写真が全体的にくすんで見えるのは、画像保存時のカラープロファイルの設定の問題。→ カラープロファイルをsRGBにして画像保存。
• 写真の薄青い部分がくすんで見えるときは、背景の色による錯覚。→ 背景の色を白から黒に変える。
• 写真がボンヤリと見えるのは、アップロード時に自動的に圧縮されて画質が低下している、もしくはRetinaディスプレイ表示に対して画像サイズが小さいのが原因。→ 画像サイズを表示サイズの2倍にする。（表示サイズ横幅1000ピクセルの場合は、2000ピクセルのサイズで保存する）もしくは表示サイズを小さくする。

Windowsの通常のディスプレイではどう見えるだろうか。Retinaディスプレイは高精細だから今回このような問題が生じた可能性もある。6年間使っていたWindows機がディスプレイの方からお亡くなりになられたので確認する術がない。

背景食で写真の色の見え方が変わるという事は、写真の色味を編集しているときも背景選びが重要という事になる。そういえばLightroomやCanon DPPもプレビュー画像の背景色を選ぶことが出来たが、目に優しいといった理由よりも、こういう目の錯覚による色の見え方の違いに対処するという理由もあるのだろうか。ちなみにDPPでは初期値の背景色は、濃いめの灰色になっている。