Using Display‑P3 on the Web 2025 — A Practical Workflow

Wide‑gamut images can significantly improve product photos and graphics. At the same time, you must maintain compatibility with sRGB environments. This guide summarizes the essentials from creation to delivery, including CSS/HTML handling and fallbacks, to avoid color surprises.

Core Strategy

• Master: P3/16‑bit float (or high‑bit depth) with non‑destructive edits
• Delivery: provide both image-p3 (AVIF/WebP) and image-srgb, switch based on client capability
• sRGB normalization: either embed correct ICC or perform explicit color‑space conversion (avoid tag/pixel mismatches)

Example Conversion Pipeline

# ImageMagick explicit conversions (illustrative)
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 Notes

• Use @media (color-gamut: p3) to prefer P3 thumbnails/heroes when supported
• Use image-set() to switch sRGB/P3 (optionally pair with type("image/avif"))
• Ensure contrast for text/alt/backgrounds assuming 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')
    );
  }
}

Common Pitfalls

• Mismatch between embedded ICC and actual pixel space → unexpected saturation/tonal shifts
• Using P3 only on thumbnails while body images are sRGB → visible page‑internal mismatch
• Mixing HDR/SDR → gamma inconsistencies when compositing in CSS/Canvas

QA Checklist

• A/B comparisons across mixed browser/OS environments
• Verify ICC/channels with tools like imagemagick identify -verbose
• Automated tests: screenshot diffs and histogram comparisons

FAQ

• Q: Should we ship all images as P3?

• A: No. Limit P3 to assets with clear benefit (hero/product). Many other images are fine as sRGB.

• Q: Is it okay to ship P3 with only a tag?

• A: Some environments misinterpret tags. For critical paths, prefer explicit conversion and ensure the final ICC matches the pixels.