sRGB変換とICCプロファイル（Webで“色が変わる”問題の最短解）

Webの既定はsRGB。Display-P3/AdobeRGB のまま配布すると、環境次第で派手/くすむが起きます。解決はシンプルで、まずピクセル自体をsRGBに変換し、その後で圧縮や書き出しを行うこと。ICCを「付ける/外す」よりも前に、色域の正規化が最短解です。

要点（TL;DR）

まず素材の色空間を確認（P3/AdobeRGB/sRGB）。
プロファイル変換でピクセルを sRGB に正規化（付与/削除は後で判断）。
書き出し：写真=WebP 80–85、ロゴ/図=PNG or WebP Lossless。
最終は /compressor と /compare で容量と見え方を確定。

1. なぜ“色が変わる”のか

Wide Gamut を sRGB 環境で表示 → 自動圧縮/マッピングの差で派手/くすむ。
ICC未対応のアプリ/ビューワ → プロファイル無視で想定外の表示。
Canvas/OS/端末差 → 色管理の挙動差で微妙にズレる。

原則

配布物はすべて sRGB に統一。ICCは“あってもなくても sRGB と等価に見える”状態まで持っていくのが無難です。

2. 最短フロー（変換 → 検証 → 書き出し → 圧縮）

色空間の確認：プロパティ/情報パネルで P3/AdobeRGB/sRGB を確認。HEIC などは HEIC最適化ガイドも参照。
sRGBへプロファイル変換：ピクセル色域を sRGB に。ICC付与/削除はこの後で決める（差が無ければ削除可）。
検証：一般的な sRGB ディスプレイ/ブラウザでプレビュー。肌/空/グラデの転びを確認。
書き出し：写真=WebP 80–85（互換はJPEG 85）、ロゴ/図=PNG or WebP Lossless。 /convert と /compressor を活用。

3. ツール別：sRGB変換レシピ

A. ImageMagick（バッチ）

# ICCを用いた正規変換（sRGB.icc のパスは環境に合わせて）
magick in.jpg -profile sRGB.icc out_srgb.jpg

# ICC省略の簡易変換（実務で十分なケースも多い）
magick in.jpg -colorspace sRGB -strip out_srgb.jpg

# PNGロゴをsRGB化して可逆保存
magick in.png -colorspace sRGB -strip out_srgb.png

B. Photoshop

編集 → プロファイル変換：変換先に sRGB IEC61966-2.1
書き出し：WebP/JPEG/PNG。必要に応じ ICCを含める/strip を比較。

4. 実装・運用の注意（CWV/CLSを崩さない）

寸法の明示：img に width/height（または aspect-ratio）を指定（CLS対策）。
srcset/sizes：実表示幅に寄せる（過剰な 2x 配信を回避）。→ レスポンシブ画像ガイド
ファイル名ハッシュ：差し替え時は v2/v3 などの指紋でキャッシュ更新。
ICCの扱い：sRGB化後は ICC あり/なしを比較し、差が無ければ -strip で軽量化。

5. よくある落とし穴（回避策）

ICCを“付けるだけ”問題：色域は変わらない。プロファイル変換が必要。
Wide Gamutのまま圧縮：環境差でズレる。まず sRGB へ。
ブラウザ差の過信：色管理は万能ではない。正規化で揺れ幅を最小に。

6. 公開前チェック（10項目）

素材の色空間（P3/AdobeRGB/sRGB）を把握した。
ピクセルをsRGBに変換した（ICC付与だけで終えていない）。
写真=WebP 80–85／ロゴ/図=PNG or WebP Lossless を守った。
破綻（にじみ/バンディング/リング）をチェック（必要なら対策集）。
img にwidth/heightを付与し、広告はプレースホルダで高さ確保。
srcset/sizes を実表示幅に最適化。
ICCあり/なしを比較し、差が無いならstripで軽量化。
差し替え運用のためファイル名ハッシュを採用。
Before/After を /compare で 1:1 確認。
本番の CWV（field data）に悪化が無い。

7. まとめ：まず“sRGBへ正規化”が近道

Webでの色ズレは、環境の差異を完全になくすことはできませんが、sRGBへ統一するだけで大半を解消できます。そのうえで /compressor と /convert を活用し、品質と容量の落とし所に素早く到達しましょう。