![見出し画像](https://assets.st-note.com/production/uploads/images/92260277/rectangle_large_type_2_13af81ea48abe779954cc4d94e1fea87.png?width=1200)
noteと色域
noteに画像をアップすると色が変わってしまう問題。
原因は「カラープロファイル」でした。
私は写真やイラストには「Display P3」や「Adobe RGB」というプロファイルをよく使いますが、アップロードすると「sRGB」レベルまで彩度が落ちてしまうようです。
「Adobe RGB」でアップロード。彩度が低下。
![](https://assets.st-note.com/img/1669756385758-EHNlxxqNe8.png?width=1200)
「sRGB」に変換してアップロード。こちらは色に変化なし。
![](https://assets.st-note.com/img/1669756392245-oh6wjMti7z.png?width=1200)
どちらも同じ色に見えますが、「AdobeRGB」はアップロードによって彩度が落ち、「sRGB」はプロファイル変換によって彩度が落ちたため、結果同じような色になりました。
ダウンロードしてみると、カラープロファイルが消えていました。
![](https://assets.st-note.com/img/1669758608240-zjJWScwAM8.png?width=1200)
これを「Safari」は「sRGB」として表示するようですが、カラープロファイルが埋め込まれていない画像の扱いはWebブラウザーによっても異なるそうです。
以下の記事では、主なブラウザーのカラープロファイルの対応状況を詳しく検証されています。
フリー素材
今回の記事に使ったイラストです。色の比較など、ご自由にお使いください。
「PNG形式」を「ZIP形式」に圧縮しています。
macOS Ventura 13.0.1
Safari 16.1
とりにえさをあたえるぼたん