P3‑Bildauslieferung 2025 — Sichere sRGB‑Fallbacks mit Realgeräte‑Verifikation

P3‑fähige Geräte nehmen zu, Nicht‑P3 existiert aber weiterhin. Entscheide, wie P3 mit stabilem sRGB‑Fallback angeboten wird.

Ziel: „P3 nutzen ohne Überraschungen“. Dafür: ICC einbetten, getaggte JPEG/AVIF, HTML/Next‑Beispiele und CI‑Diff‑Checks.

Verwandt: Farbmanagement & ICC — sRGB/Display‑P3/CMYK Handoff 2025 / Korrektes Farbmanagement & ICC-Strategie 2025 — Praxisleitfaden für stabile Webbild-Farben

Export‑Basics

• ICC für P3 stets einbetten
• sRGB‑Variante bereithalten (Doppelauslieferung an Schlüsselflächen)
• Verarbeitung in einem Farbraum abschließen (Mehrfachkonvertierungen vermeiden)

ICC

• P3: Display P3 (D65 / 2°) einbetten; Tonkurve sRGB‑ähnlich behandeln
• sRGB: Profil explizit einbetten (untagged ist fragil)

Formate/Codecs

• Foto: AVIF/JPEG XL (falls verfügbar) > WebP > JPEG. ICC‑Erhalt prüfen
• UI/Illustration: PNG/SVG. P3‑Nutzen begrenzt; Palettenverschiebungen prüfen
• Priorität: „P3 vs. sRGB ausreichend konsistent“ — Über‑Sättigung/Hautton‑Shift vermeiden

Auslieferungsmuster

1. type + srcset mit Srcset Generator kombinieren
2. P3/sRGB via Media/MIME umschalten; falls Erkennung schwierig, P3 auf Hero/Produkt begrenzen
3. Screenshot‑Diffs in CI hinzufügen

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) schätzt Wide‑Gamut‑Fähigkeit ab, ist aber nicht perfekt; P3 auf wichtige Elemente fokussieren.

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>

Mit Next/Image unoptimized oder farbverwaltete Pipelines nutzen; einige Optimierer entfernen ICC.

Verifikation

• Auf P3‑fähigem und sRGB‑limitiertem Gerät vergleichen
• Gradienten und Sättigung/Clipping prüfen

Beobachtungspunkte

• Hauttöne mit Rot/Gelb‑Shift
• Markenfarben, die „angemalt“ wirken (Über‑Sättigung)
• Gradient‑Banding (Gamma/Quantisierung falsch gehandhabt)

CI‑Diff (Idee)

import { diffDE2000 } from 'some-color-lib';
function meanDeltaE(a: Uint8ClampedArray, b: Uint8ClampedArray){return 1.8}
if (meanDeltaE(p3Shot, srgbShot) > 3.0) throw new Error('Color diff too large');

FAQ

• Browser zu P3 zwingen? — Nein. ICC einbetten und real prüfen.
• JPEG verliert ICC? — Tools können ICC droppen. --icc/„Metadaten erhalten“ und mit exiftool prüfen.
• Doppel‑Auslieferung zu schwer? — P3 auf High‑Impact‑Zonen begrenzen.

Zusammenfassung

Kein „überall P3“. Dort nutzen, wo es zählt, sRGB‑Fallback solide halten.