写真がアップロード後に色あせる理由｜sRGB変換

商品写真を編集し、赤は実物のセーターとぴったり合っていた。ストアにアップロードすると、その赤がレンガ色になって返ってきます。緑はオリーブ色に転びます。同じ画面で元のファイルを開くと、こちらは今も完璧です。

これは圧縮のせいではありませんし、プラットフォームが画像を「台無しにしている」わけでもありません。たいていの原因はカラープロファイルの不一致です。ファイルは自分の色をある言語で説明しているのに、ページはその数値を別の言語で読んでいます。

なぜ同じ数値から2つの違う色が生まれるのか

1つのピクセルは3つの数値です。200, 40, 40 が特定の赤になるのは、それをどのカラースペースで測っているかが分かってからです。Display P3はsRGBよりも赤の原色を外側へ押し出していて（x座標が0.64に対して0.68）、同じ3つ組がより深い赤を表します。Adobe RGB (1998)はsRGBの赤と青の原色をそのまま保ち、代わりに緑を伸ばしているので、余分に届く範囲は緑とシアンにあります。いずれにせよ、sRGBだと思い込んでいるブラウザにとって、その数値は別の意味になります。

プロファイルは、どの物差しを使ったかを書き添えたメモです。そしてそれが失われたとき、ウェブは有無を言わさず既定値に倒します。CSS Color Module Level 4は明確です。互換性のため、HTMLで指定された色と、タグの付いていない画像は、別途指定がないかぎりsRGBカラースペースにあるものとして扱わなければならない、と。タグの付いていないあなたのアップロード画像が「別途指定」をすることはないので、sRGBとして扱われます。

つまり、ファイルをAdobe RGBやDisplay P3で書き出したのに、途中でプロファイルが落ちてしまうと――再エンコードする処理経路、メタデータを削るコンバーター――広い色域の数値がsRGBとして読まれます。より狭い前提に押し込められた結果、彩度が落ちて出てくるわけです。これがあの色あせた見た目です。どの色が割を食うかは元のプロファイル次第で、sRGBと誤読されたAdobe RGBのファイルは緑とシアンの力強さを失い、Display P3のファイルはそれに加えて彩度の高い赤も落とします。ニュートラルな色はほとんど動きません。グレーの商品を撮ったパックショットでは何も起きず、コーラル色の水着では惨事になります。

画面ではなくファイルの問題だと確かめる

元のファイルとアップロードした画像を、1つのブラウザウィンドウに並べてください。

• 編集ソフトでは正しいのに、ブラウザでは平板に見える：プロファイルの問題です。
• ブラウザでは両方同じだが、編集ソフトでの見え方とは違う：編集ソフトが、ブラウザの無視する作業用カラースペースでプレビューしています。
• 自分のスマートフォンや同僚のノートPCでだけおかしい：ファイルではなくディスプレイの違いです。

次に、元のファイルをブラウザのタブにドラッグしてみます。ブラウザは埋め込まれたプロファイルを尊重します。手元のファイルが正しくてアップロードしたものが正しくないなら、タグを捨てたのはアップロードの経路です。

ファイルが持っているプロファイルを調べる

• macOS：プレビューでファイルを開き、ツールバーの情報ボタンをクリックする（またはCommand-Iを押す）と、「詳細情報」タブに画像のカラープロファイルが表示されます。
• Photoshop：ドキュメントのステータスバーにある矢印をクリックし、「ドキュメントのプロファイル」を選びます。
• Lightroom：書き出しダイアログのカラースペースのドロップダウンが、実際に納品した内容です。
• どのソフト、どのプラットフォームでも：ExifToolが表示してくれます――exiftool -ProfileDescription photo.jpg。

ウェブ向けなら、sRGB以外はすべて容疑者です。近年のiPhoneは広い色域で写真を撮影し、それに応じたタグをファイルに付けます。Appleはカメラの仕様に「写真とLive Photosの広色域キャプチャ」を挙げています。一部のAndroid端末にも広色域で撮影するオプションがあるので、ファイルを確認しましょう。

sRGBへ「変換」する――削除でも割り当てでもなく

よく似た名前の3つの操作は、まるで違うことをします。

• 削除（Strip） はラベルを取り除き、数値はそのままにします。広い色域のデータが確実にsRGBとして読まれることになるので、事態は悪化します。
• 割り当て（Assign） は計算し直さずにラベルを貼り替えるので、見た目が変わります。たいていは間違った方向にです。
• 変換（Convert） はすべてのピクセルを計算し直し、狭いカラースペースで許されるかぎり色を近いまま保ったうえで、sRGBのタグを付けます。

必要なのは変換です。Photoshopなら「編集 › プロファイル変換」、Lightroomなら書き出し時のカラースペースをsRGBに設定します。いちばん彩度の高い色は、わずかに動くものと考えておいてください。

逆のケース：スクリーンショットが派手すぎる

仕組みは同じで、向きが逆です。広色域ディスプレイで撮ったスクリーンショットは、そのディスプレイのカラースペースで色の値を記録します。macOSで撮ったスクリーンショットは、通常そのディスプレイのプロファイルが付いた状態で保存されますが、ほかのキャプチャツールは付けないこともあります。それをsRGBとして読み戻すと、同じ数値が実際に見えていたものより派手に描かれます。蛍光色の緑、日焼けした肌。直し方も同じです。

背景を差し替えるときに、これが効いてくる理由

プロファイルの不一致は、ここでは目立たないでは済まなくなります。remover.bgで切り抜きをブランドカラーの上に載せ、その画像を、CSSで同じ16進数を指定した色面の隣にページ上で並べてみてください。CSSの色はsRGBとして描かれます。

画像が別のタグを持っていれば、同じはずの色が2つの色味となって隣り合い、どうしても一致しません。アップロードの前にsRGBへ変換しておけば、この曖昧さを大もとから取り除けます。

純白は変換を経ても変わらないので、不一致だけでAmazon商品画像の白背景ルールのチェックに落ちることはありません。割を食うのは商品の色のほうです。そして形式は助けになりません。PNGもJPEGもWebPもプロファイルを運びますし、タグが失われればどれも誤読されます。背景を透過したPNGも例外ではありません。

次のアップロードの前に

書き出しのカラースペースを一度sRGBに設定してしまいましょう。実際に使っているプリセットの中で設定すれば、この問題は再発しなくなります。そのうえで、1枚のアップロード画像を元のファイルと同じ画面で見比べて抜き取り検査をします。色が保たれていれば、あなたの処理経路はきれいです。