HDR & Display‑P3 di Web 2025 — Panduan Praktis

Ringkasan

Display wide‑gamut membuat Display‑P3 menarik, tetapi sRGB tetap baseline. Artikel ini memandu pengiriman P3/HDR yang aman dengan fallback LDR/sRGB, dari produksi, delivery, hingga QA.

Dasar: Gamut, Transfer, ICC

• sRGB: baseline kompatibilitas
• Display‑P3: gamut lebih lebar (LDR)
• HDR: PQ/HLG; untuk gambar diam, selalu sediakan fallback LDR
• ICC: menetapkan ruang warna; tanpa ICC, rendering tak terdefinisi

Tonemapping HDR→LDR

• Jaga highlight roll‑off halus; lindungi detail bayangan
• Gunakan >8‑bit; untuk 8‑bit pakai dithering

Strategi Format (2025)

• AVIF 10‑bit: efisien, mendukung gamut luas → pilihan utama
• WebP 8‑bit: fallback LDR yang bagus
• JPEG: sRGB untuk kompatibilitas maksimum; JPEG P3 berisiko
• JPEG XL: menjanjikan, dukungan belum universal

Saran: AVIF (P3/10‑bit) → WebP (sRGB) → JPEG (sRGB)

Pola HTML (fallback berlapis)

<picture>
  <source srcset="/hero-p3-10bit.avif" type="image/avif" />
  <source srcset="/hero-srgb.webp" type="image/webp" />
  <img src="/hero-srgb.jpg" width="1200" height="630" alt="Visual produk" fetchpriority="high" />
  
</picture>

Deteksi P3 (CSS/JS)

@media (color-gamut: p3) {
  :root { --brand-accent: color(display-p3 0.95 0.2 0.2); }
}
:root { --brand-accent: #e53935; }

const supportsP3 = matchMedia('(color-gamut: p3)').matches &&
  CSS.supports('color', 'color(display-p3 1 0 0)');
if (supportsP3) document.documentElement.classList.add('p3');

.p3 .hero-img { content: url('/hero-p3-10bit.avif'); }
.hero-img { content: url('/hero-srgb.webp'); }

Pipeline Produksi

1. Simpan master P3/HDR (≥10‑bit)
2. Turunkan LDR/sRGB yang aman
3. Ekspor AVIF (P3/10‑bit, pertahankan ICC) + WebP/JPEG (sRGB)
4. Simpan metadata seperlunya; hormati privasi
5. QA di perangkat sRGB/P3 nyata; otomatisasi diff screenshot

Catatan Tonemapping

• Hindari clipping highlight
• Jaga chroma pada luminans tinggi
• Dithering saat turun ke 8‑bit

Delivery

• Untuk LCP gunakan fetchpriority="high"; pertimbangkan preload as=image
• Tetapkan width/height untuk mencegah CLS
• srcset/sizes yang tepat untuk mencegah oversizing

<img
  class="hero-img"
  src="/hero-srgb.webp"
  srcset="/hero-srgb-640.webp 640w, /hero-srgb-960.webp 960w, /hero-srgb-1280.webp 1280w"
  sizes="(min-width: 1024px) 960px, 90vw"
  width="1200" height="630"
  alt="Visual produk"
  fetchpriority="high"
/>

Perbedaan Browser/OS

• Safari: manajemen warna cukup konsisten
• Chrome/Edge: meningkat; sensitif ke setelan OS
• Windows: penanganan ICC bervariasi antar aplikasi; uji di perangkat nyata

Tips Next.js/Build

import sharp from 'sharp';
async function exportAvifP3(input: Buffer) {
  return sharp(input).withMetadata().avif({ quality: 50, chromaSubsampling: '4:4:4', effort: 6 }).toBuffer();
}

// Tulis dua varian P3/SDR dan publikasikan di CDN (contoh)
export async function buildAssets(masterPath: string) {
  const master = await fs.promises.readFile(masterPath);
  const p3 = await exportAvifP3(master); // P3/AVIF
  const sdr = await exportSrgbWebp(master); // sRGB/WebP
  await fs.promises.writeFile('public/hero-p3-10bit.avif', p3);
  await fs.promises.writeFile('public/hero-srgb.webp', sdr);
}

QA & Regresi Visual

• Bandingkan tangkapan layar sRGB vs P3
• Lacak ambang SSIM/ΔE; deteksi deviasi besar
• Pertahankan kontras WCAG‑AA untuk UI

// Pengukuran SSIM (contoh konseptual)
import { ssim } from 'ssim.js';

async function compare(aPath: string, bPath: string) {
  const a = await loadImage(aPath);
  const b = await loadImage(bPath);
  const { mssim } = ssim(a, b);
  return mssim; // 1 ≈ identik
}

Aksesibilitas

• P3/HDR tidak boleh menurunkan keterbacaan
• Perhatikan silau di mode gelap; fallback ke LDR bila perlu
• Alt‑text harus jelas baik di LDR maupun P3

Checklist

• [ ] Batasi P3/HDR pada visual kunci
• [ ] Selalu kirim fallback sRGB
• [ ] Pertahankan ICC untuk visual penting
• [ ] Otomatiskan regresi lintas perangkat
• [ ] Dokumentasikan tonemapping
• [ ] Pastikan pengaturan warna CDN/optimizer benar

Studi Kasus

• Hero e‑commerce: P3/AVIF → warna lebih hidup; sizes menjaga LCP
• Media foto: pipeline P3, pengiriman ganda (P3/AVIF & sRGB/WebP), QA Windows/Chrome
• Situs brand: logo tetap sRGB, P3 untuk latar belakang

FAQ

• T: Apakah semua gambar perlu P3?

  • J: Tidak. Fokus pada hero/visual penting; thumbnail tetap sRGB.

• T: JPEG P3 aman?

  • J: Prioritaskan AVIF/WebP; JPEG tetap sRGB.

• T: Apakah HDR untuk gambar diam sudah siap?

  • J: Hanya jika ada fallback LDR yang kuat; pengiriman ganda adalah praktik realistis.

• T: Bolehkah menghapus ICC untuk hemat byte?

  • J: Untuk gambar non‑kritis ya; untuk visual kunci pertahankan ICC.

• T: Warna terlihat pudar di Windows/Chrome

  • J: Setelan OS/Browser bervariasi; desain baseline sRGB, P3 sebagai peningkatan.

• T: CMS/optimizer menghapus ICC

  • J: Opsi “hapus ICC” mungkin aktif. Untuk jalur P3, gunakan profil/pengaturan yang mempertahankan ICC.