HDR im Web war zehn Jahre Theorie

Schon seit 2016 sprechen Format-Komitees über HDR-Bilder im Web. AVIF kann seit 2019 HDR, JPEG XL seit 2021. Praktisch sah man auf Webseiten aber bis 2024 fast nie ein echtes HDR-Bild. Drei Faktoren haben das geändert: HDR-Displays sind in der breiten Masse angekommen (jedes moderne Smartphone, jedes MacBook seit 2021), Smartphone-Kameras nehmen native HDR auf (iPhone 12+, Pixel 7+, Galaxy S22+), und Browser haben Color-Management mit HDR-Support implementiert (Chrome 124+, Safari 17.4+).

Wer eine kurze Format-Einordnung sucht, findet sie in unserem AVIF-vs.-WebP-vs.-JPEG-XL-Beitrag; hier geht es konkret um HDR-Auslieferung.

Die zwei Wege zu HDR im Web

2026 stehen zwei strukturell verschiedene Ansätze zur Verfügung:

  • Native HDR-Formate (AVIF, JPEG XL) mit 10-Bit-Codierung, BT.2020- Farbraum und PQ/HLG-Transferfunktion. Funktioniert nativ, wo unterstützt — aber HDR-Pfad ist binär: entweder voll HDR oder gar nicht.
  • Gain Maps (Ultra HDR von Google, Adaptive HDR von Apple). Ein klassisches SDR-JPG plus eine eingebettete Graustufen-Karte, die pro Pixel beschreibt, wie viel Helligkeits-Boost auf einem HDR-Display angewendet werden soll. Eleganter Fallback-Pfad: SDR-Decoder ignorieren die Gain Map und sehen das Standard- Bild.

Ultra HDR (Gain Maps) — Googles pragmatischer Pfad

Google führte mit Android 14 (2023) das Ultra-HDR-Format ein, das auf dem ISO-Standard für Gain Maps (ISO/CD 21496-1) basiert. Pixel 8 und neuere Galaxy- Phones produzieren Ultra-HDR-JPGs als Standard. Die Datei ist ein normales JPG mit eingebetteter XMP-Spec und einer JPEG-XL- oder JPG-codierten Gain-Map als Sekundär-Bild.

Browser-Support 2026: Chrome 124+ (Mai 2024), Edge nach Chromium-Update, Firefox 131+ (Oktober 2024). Safari behandelt Ultra-HDR-JPGs als normale JPGs (ignoriert die Gain Map). Performance: Datei nur 5–15 % größer als ein vergleichbares SDR-JPG, da die Gain Map gut komprimiert ist. Wann: Smartphone-Foto-Galerien, Foto-Portfolios, alles wo Foto- Inhalte primär konsumiert werden.

AVIF mit BT.2020 und PQ — der direkte Pfad

AVIF kann nativ 10-Bit, 12-Bit oder höhere Farbtiefen mit BT.2020-Farbraum und PQ (HDR10) oder HLG-Transferfunktion codieren. Encoding via libavif, sharp mit AV1-Plugin, oder Adobe Camera Raw 17+.

Browser-Support 2026: Chrome 113+, Safari 17.4+, Firefox 130+ — also breit verfügbar, aber jünger als der SDR-AVIF-Support. Performance:HDR-AVIF ist 10–25 % größer als SDR-AVIF wegen der höheren Bit-Tiefe. Wann: wenn du ein vollständig HDR-natives Foto-Bundle ausliefern willst — vor allem in Galerie-Apps und Foto-Marktplätzen.

JPEG XL HDR — der ambitionierte Pfad

JPEG XL bringt 32-Bit-Float-HDR pro Kanal mit — die höchste Präzision der drei Formate. Das ist Overkill für Display-Auslieferung, aber Gold für Foto-Archive und Kompetitions-Workflows. Apple-Plattformen (macOS Sonoma+, iOS 17+) zeigen JPEG-XL-HDR nativ; Chrome und Firefox unterstützen es seit 2025.

Auslieferungs-Strategie 2026

Eine moderne HDR-Auslieferungs-Pipeline kombiniert die drei Ansätze. Die richtige <picture>-Reihenfolge:

<picture>
  <source srcset="foto-hdr.avif" type="image/avif">
  <source srcset="foto-ultrahdr.jpg" type="image/jpeg">
  <img src="foto-sdr.jpg" alt="…" width="1600" height="900">
</picture>

Browser mit AVIF-HDR-Support nehmen die erste Source. Browser ohne AVIF-HDR, aber mit Ultra-HDR-Decoder (Chrome 124+) fallen auf Ultra-HDR-JPG zurück — und nutzen die eingebettete Gain Map. Browser ohne HDR-Support sehen das SDR-JPG. Drei Stufen, robust.

Display-Erkennung im Browser

Eine subtile Falle: nicht jedes Gerät, das HDR-Bilder dekodieren kann, hat auch ein HDR-fähiges Display. Wer ein 2014er-iMac mit Safari 17 öffnet, sieht den AVIF-HDR-Inhalt — aber sein SDR-Monitor stellt nur tonemapped dar.

Die CSS-Media-Query (dynamic-range: high) erlaubt die Erkennung. Damit kannst du HDR-Inhalte nur an Geräte ausliefern, die sie wirklich darstellen können:

@media (dynamic-range: high) {
  .hero { background-image: url("hero-hdr.avif"); }
}
@media (dynamic-range: standard) {
  .hero { background-image: url("hero-sdr.jpg"); }
}

Encoding und Workflow

Wer HDR-Bilder produzieren will, hat 2026 mehrere Wege:

  • Smartphone-Direkt-Export. Jedes iPhone 12+ und Pixel 7+ exportiert Fotos in HDR. Übertragung via AirDrop/Files behält den HDR-Pfad.
  • Lightroom Classic / Camera Raw. Adobe-Pipelines unterstützen HDR-Export zu AVIF und JPEG XL seit Camera Raw 15.4 (2023).
  • Sharp + libavif. Im Node.js-Build-Pipeline kann sharp mit .toFormat('avif', { bitdepth: 10, ... }) HDR-AVIFs generieren.
  • Photoshop 25+. Direkter HDR-Export-Pfad mit Tone-Mapping- Kontrolle für die SDR-Fallback-Variante.

Die häufigsten HDR-Fallen

  • Falscher Color-Space-Header. Ein 10-Bit-Bild ohne BT.2020-ICC- Profil interpretiert der Browser als sRGB — Ergebnis ist ein knallig-überzogenes Bild. Profil zwingend einbetten.
  • HDR-Bilder in falschen Kontexten. Helle HDR-Highlights neben normalem SDR-UI-Text wirken wie Bühnenlicht im Theater — der UI-Text sieht absurd dunkel aus. HDR-Inhalte besser in Full-Bleed-Bereichen platzieren.
  • Tone-Mapping vergessen. Wer keinen SDR-Fallback baut, lässt ältere Geräte mit gequetschten Highlights stehen.
  • Datei-Größe unterschätzen. 10-Bit-HDR-AVIFs sind im Schnitt 15–25 % größer als 8-Bit-SDR-AVIFs. Für mobile Auslieferung relevant.

Wann HDR die richtige Wahl ist

  • Foto-Portfolios und Galerien. Foto-Inhalt ist die ganze Aufmerksamkeit — HDR-Highlights und tiefere Schatten zeigen sich voll.
  • E-Commerce für Premium-Produkte. Schmuck, Uhren, Hochwertige Mode profitieren messbar.
  • Foto-Tutorial-Seiten. Belichtungs-Beispiele, RAW-Pipelines.

Nicht ideal: Marketing-Banner mit Text-Overlay, UI-Screenshots, alles mit reduzierter Anzeige-Latenz-Anforderung. HDR ist eine Foto-Aufrüstung, kein Universal-Schalter.

Was 2027 bringt

Zwei Entwicklungen sind sichtbar: erstens Adaptive HDR, das pro Pixel je nach Display-Helligkeit dynamisch zwischen SDR- und HDR-Wert interpoliert — Apple hat in iOS 18 erste Implementierungen gezeigt. Zweitens HDR im CSS-Backround-Image als regulärer Render-Pfad, bislang ist es ein Sonder-Pfad in Chromium.

Quellen

Android — Ultra HDR Image Format · ISO/CD 21496-1 — Gain Map Specification · AVIF Spec — HDR10 Support · MDN — dynamic-range media query · ITU-R BT.2020 · ITU-R BT.2100 (HDR Standards) · Apple — HDR Image Rendering Options · web.dev — AVIF.