ブラウザで P3 を強制表示させたい

<picture>
  <source type="image/avif" srcset="hero-p3.avif" media="(color-gamut: p3)">
  <source type="image/avif" srcset="hero-srgb.avif">
  <img src="hero-srgb.jpg" width="1200" height="800" alt="hero" />
</picture>

(color-gamut: p3) は端末側の広色域表示能力の目安。完全ではないため、重要要素だけ P3 を採用するなど限定運用が安全です。

Next.js（例）

<picture>
  <source srcSet={p3Avif} type="image/avif" media="(color-gamut: p3)" />
  <source srcSet={srgbAvif} type="image/avif" />
  <img src={srgbJpg} width={1200} height={800} alt="hero" />
</picture>

より Next/Image を使う場合は unoptimized かロスレスな色管理が必要です。既存の最適化レイヤーが ICC を落とす構成では、<picture> 手書きの方が安全なケースもあります。

確認手順

P3 対応端末と sRGB 限定端末で並べて比較
ヒストグラム/スポイトで飽和や剪断の有無を確認

実機比較の観点

スキントーンの赤寄り・黄寄りのズレ
ブランドカラーの飽和（P3 で「ベタ塗り」に潰れていないか）
グラデーションの階調破綻（ガンマ不整合や量子化ノイズ）

CI での差分検証

Storybook/Playwright で P3/非P3 プロファイルのスクリーンショットを比較
ΔE やヒストグラム差でしきい値を設定し、暴走を検知

// 疑似コード: 2 枚のスクリーンショット差分（Lab ΔE）
import { diffDE2000 } from 'some-color-lib';

function meanDeltaE(imgA: Uint8ClampedArray, imgB: Uint8ClampedArray): number {
  // ...RGB→Lab 変換して平均 ΔE を算出...
  return 1.8; // 例
}

if (meanDeltaE(p3Shot, srgbShot) > 3.0) {
  throw new Error('Color diff too large: please review P3 conversion');
}

FAQ

Q: ブラウザで P3 を強制表示させたい
A: 強制はできません。ICC と実機確認で確からしさを上げましょう。
Q: JPEG の ICC が消えます
A: 変換段で ICC を落とすツール/パイプがあります。--icc オプションや「メタデータ保持」をオンにして、最後に exiftool -icc_profile -G1 で在/不在を確認してください。
Q: sRGB と P3 のダブル配信は重くない？
A: 重要エリア限定で P3（ヒーロー/製品）にし、その他は sRGB のままにする折衷が現実解です。

まとめ

P3 を無理に“広く”配信しようとせず、重要要素に限定しつつ破綻を防ぐのが安全策です。

付録: 変換のミニパイプライン（例）

# sRGB 原版を P3 で現像、ICC を埋め込み
magick in_srgb.jpg -colorspace DisplayP3 -profile DisplayP3.icc out_p3.jpg

# AVIF へ変換（ICC 保持）
avifenc --icc out_p3.jpg out_p3.avif

# sRGB フォールバック
magick out_p3.jpg -colorspace sRGB -profile sRGB.icc out_srgb.jpg

追加の検査コマンド

# ICC の在/不在確認
exiftool -icc_profile -G1 out_p3.jpg out_p3.avif out_srgb.jpg

# sRGB/DisplayP3 の判定（簡易）
exiftool -ColorSpace -ProfileDescription out_p3.jpg

X で共有記事一覧へ

色