WebでのDisplay-P3活用とsRGB落とし込み 2025 — 実務ワークフロー

広色域の表示は製品写真やグラフィックで顕著に効果を発揮します。一方で sRGB 環境との両立 が不可欠です。本稿では、生成から配信、CSS/HTML の扱い、フォールバックまで、事故を避けるための要点をまとめます。

基本戦略

• マスター: P3/16bitフロート or 高ビット深度でノンデストラクト編集
• 配信: image-p3（AVIF/WebP）と image-srgb を用意し、クライアント能力で出し分け
• sRGB 正規化: ICC埋め込み or 明示的色空間変換（タグ不一致を避ける）

変換パイプライン例

# ImageMagick による明示変換（疑似例）
magick input-p3.tif \
  -colorspace RGB -alpha on \
  -profile DisplayP3.icc \
  -profile sRGB.icc \
  -define webp:lossless=false -quality 82 output-srgb.webp

magick input-p3.tif \
  -profile DisplayP3.icc \
  -define heic:speed=3 -define heif:primary=true output-p3.avif

CSS/HTML の注意点

• @media (color-gamut: p3) で P3 サムネイル/ヒーローの優先出し分け
• image-set() で sRGB/P3 の切替（例: type("image/avif") を併用）
• alt テキストや背景色は sRGB 想定でコントラスト比を確保（WCAG 2.2）

.hero {
  background-image: image-set(
    url('/img/hero-srgb.avif') 1x type('image/avif'),
    url('/img/hero-srgb.webp') 1x type('image/webp')
  );
}

@media (color-gamut: p3) {
  .hero {
    background-image: image-set(
      url('/img/hero-p3.avif') 1x type('image/avif'),
      url('/img/hero-p3.webp') 1x type('image/webp')
    );
  }
}

実運用の落とし穴

• 埋め込みICCと実画素の不整合 → 予期せぬ彩度・階調崩れ
• サムネイルだけP3で本文がsRGB → ページ内で色ズレ
• HDR/SDR の混在 → CSS/Canvas での合成時にガンマ不整合

QA チェックリスト

• ブラウザ/OS 混在環境での A/B 比較
• imagemagick identify -verbose 等でICC/チャンネルを検証
• 自動テスト: スクリーンショット差分とヒストグラム比較

FAQ

• Q: すべての画像をP3で配信すべき？

• A: いいえ。効果が大きいヒーロー/製品写真に限定し、他は sRGB で十分な場合が多いです。

• Q: P3タグ付きのままでも問題ない？

• A: 一部の環境では誤解釈リスクがあります。重要導線は明示変換し、ICC 埋め込みは最終出力で整合させてください。