Display‑P3 im Web 2025 — Praxis‑Workflow

Wide‑Gamut‑Bilder können Produktfotos und Grafiken deutlich aufwerten. Gleichzeitig muss die Kompatibilität zu sRGB‑Umgebungen erhalten bleiben. Dieser Leitfaden bündelt die wichtigsten Punkte von Erstellung über Auslieferung bis CSS/HTML‑Handhabung und Fallbacks, um Farbüberschreitungen zu vermeiden.

Grundstrategie

• Master: P3/16‑Bit‑Float (oder hohe Bittiefe) mit nicht‑destruktiver Bearbeitung
• Auslieferung: sowohl image-p3 (AVIF/WebP) als auch image-srgb bereitstellen, abhängig von Client‑Fähigkeiten umschalten
• sRGB‑Normalisierung: korrektes ICC einbetten oder explizite Farbraumkonvertierung durchführen (Tag/Pixel‑Mismatch vermeiden)

Beispiel‑Konvertierungspipeline

# Explizite Konvertierungen mit ImageMagick (beispielhaft)
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‑Hinweise

• @media (color-gamut: p3) bevorzugt P3‑Thumbnails/Hero‑Visuals bei Unterstützung
• image-set() zum Umschalten sRGB/P3 (optional mit type("image/avif") kombinieren)
• Kontrast für Text/Alt/Hintergründe unter sRGB‑Annahme sicherstellen (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')
    );
  }
}

Häufige Fallstricke

• Diskrepanz zwischen eingebettetem ICC und tatsächlichem Pixel‑Farbraum → unerwartete Sättigungs‑/Tonwertverschiebungen
• P3 nur bei Thumbnails, Inhalt in sRGB → sichtbare Inkonsistenz innerhalb der Seite
• HDR/SDR‑Mischung → Gamma‑Inkonsistenzen bei CSS/Canvas‑Komposition

QA‑Checkliste

• A/B‑Vergleiche über verschiedene Browser/OS
• ICC/Kanäle mit imagemagick identify -verbose prüfen
• Automatisierte Tests: Screenshot‑Diffs und Histogramm‑Vergleiche

FAQ

• F: Sollten wir alle Bilder als P3 ausliefern?

• A: Nein. Beschränken Sie P3 auf Assets mit klarem Mehrwert (Hero/Produkt). Viele Bilder sind als sRGB völlig ausreichend.

• F: Reicht es, P3 nur zu taggen?

• A: Manche Umgebungen interpretieren Tags falsch. Auf kritischen Pfaden bevorzugt explizit konvertieren und sicherstellen, dass ICC und Pixel übereinstimmen.