Guide de diffusion d’images P3 2025 — Bascules sûres vers sRGB et vérif sur appareils

Les appareils P3 se généralisent, mais le non‑P3 existe encore. Pour éviter les surprises, définissez comment proposer P3 avec un fallback sRGB solide.

Objectif minimal : « utiliser P3 sans casser la perception ». Ça passe par l’ICC, des JPEG/AVIF taggés, des patrons HTML/Next, et des diffs CI.

Articles associés : /fr/articles/color-management-srgb-p3-cmyk-handoff-2025 / Gestion des couleurs & stratégie ICC 2025 — Guide pratique pour une restitution fiable sur le Web

Bases d’export

• Toujours embarquer l’ICC pour les ressources P3
• Garder une version sRGB (double diffusion sur zones clés)
• Traiter dans un seul espace couleur pour éviter les conversions multiples

ICC

• P3 : intégrer Display P3 (D65 / 2°). Courbe proche du sRGB pour le tonemapping
• sRGB : profiler explicitement (non‑taggé = fragile et dépendant de l’environnement)

Formats/codecs

• Photo : AVIF/JPEG XL (si dispo) > WebP > JPEG. Vérifier la conservation ICC
• UI/illustrations : PNG/SVG. Gain P3 limité; vérifier contre dérives de palette
• Priorité : « P3 vs sRGB perçus similaires » — éviter sur‑saturation et peaux délavées

Patrons de diffusion

1. Composer type + srcset avec Srcset Generator
2. Basculer P3/sRGB via media/MIME. Si détection difficile, limiter P3 aux zones majeures (hero/produit)
3. Ajouter des diffs de captures en CI

HTML

<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) approxime la capacité wide‑gamut, avec des limites. Privilégier P3 sur les éléments à fort impact.

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>

Avec Next/Image, utiliser unoptimized ou des transformations color‑managed. Certains optimiseurs retirent l’ICC; le <picture> manuel peut être plus sûr.

Vérification

• Comparer sur un appareil P3 et un appareil limité sRGB
• Examiner dégradés et saturations/coupures

Points d’observation

• Peau virant rouge/jaune
• Sur‑saturation des couleurs de marque (aspect « peinture » à éviter)
• Banding de dégradés (gamma/quantification mal gérés)

Diff CI (idée)

import { diffDE2000 } from 'some-color-lib';

function meanDeltaE(imgA: Uint8ClampedArray, imgB: Uint8ClampedArray): number {
  return 1.8; // exemple
}

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

FAQ

• Q : Forcer le navigateur en P3 ? R : Non. Mieux vaut ICC + vérif matérielle.
• Q : JPEG perd l’ICC. R : Certains outils le retirent. Utiliser --icc/« préserver les métadonnées », puis vérifier avec exiftool -icc_profile -G1.
• Q : Double diffusion trop lourde ? R : Limiter P3 aux zones à fort impact; le reste en sRGB.

Résumé

Ne cherchez pas le « P3 partout ». Concentrez‑le là où ça compte et gardez un fallback sRGB robuste.

Annexe : mini pipeline

magick in_srgb.jpg -colorspace DisplayP3 -profile DisplayP3.icc out_p3.jpg
avifenc --icc out_p3.jpg out_p3.avif
magick out_p3.jpg -colorspace sRGB -profile sRGB.icc out_srgb.jpg

Contrôles

exiftool -icc_profile -G1 out_p3.jpg out_p3.avif out_srgb.jpg
exiftool -ColorSpace -ProfileDescription out_p3.jpg