Utiliser Display‑P3 sur le Web 2025 — Workflow pratique

Le large gamut peut nettement améliorer les photos produits et les visuels. En parallèle, la compatibilité avec les environnements sRGB reste indispensable. Ce guide résume l’essentiel, de la création à la diffusion, y compris le traitement CSS/HTML et les fallbacks, afin d’éviter les surprises colorimétriques.

Stratégie de base

• Master : P3/16‑bit float (ou grande profondeur) avec édition non destructive
• Diffusion : proposer image-p3 (AVIF/WebP) et image-srgb, basculer selon les capacités du client
• Normalisation sRGB : intégrer l’ICC correct ou effectuer une conversion explicite d’espace colorimétrique (éviter les incohérences étiquette/pixel)

Exemple de pipeline de conversion

# Conversions explicites avec ImageMagick (illustration)
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

Notes CSS/HTML

• @media (color-gamut: p3) pour privilégier les miniatures/visuels P3 lorsque supportés
• image-set() pour basculer sRGB/P3 (peut être couplé à type("image/avif"))
• Contrastes texte/alt/arrière‑plans garantis en supposant 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')
    );
  }
}

Pièges courants

• Décalage entre ICC intégré et espace pixel réel → saturation/tonalité inattendues
• P3 uniquement sur les miniatures alors que le contenu est en sRGB → incohérence visible dans la page
• Mélange HDR/SDR → incohérences de gamma lors des compositions CSS/Canvas

Checklist QA

• Comparaisons A/B sur un panel de navigateurs/OS
• Vérifier ICC/canaux via imagemagick identify -verbose
• Tests automatisés : diff de captures et comparaisons d’histogrammes

FAQ

• Q : Faut‑il diffuser toutes les images en P3 ?

• R : Non. Limitez P3 aux visuels à fort impact (hero/produit). Beaucoup d’images sont très bien en sRGB.

• Q : Suffit‑il d’ajouter une étiquette P3 ?

• R : Certains environnements interprètent mal les balises. Sur les parcours critiques, préférez une conversion explicite et garantissez l’adéquation ICC/pixels.