Display‑P3 di Web 2025 — Alur kerja praktis

Gamut lebar dapat meningkatkan foto produk dan grafis secara nyata. Namun kompatibilitas dengan lingkungan sRGB tetap wajib. Panduan ini merangkum hal‑hal penting dari pembuatan hingga distribusi, termasuk penanganan CSS/HTML dan fallback, agar warna tetap konsisten.

Strategi inti

• Master: P3/16‑bit float (atau kedalaman tinggi) dengan penyuntingan non‑destruktif
• Distribusi: sediakan image-p3 (AVIF/WebP) dan image-srgb, pilih berdasarkan kemampuan klien
• Normalisasi sRGB: sematkan ICC yang benar atau lakukan konversi ruang warna eksplisit (hindari ketidakcocokan tag/piksel)

Contoh pipeline konversi

# Konversi eksplisit dengan ImageMagick (ilustratif)
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

Catatan CSS/HTML

• @media (color-gamut: p3) untuk memprioritaskan thumbnail/hero P3 saat didukung
• image-set() untuk beralih sRGB/P3 (bisa dipasangkan dengan type("image/avif"))
• Pastikan kontras untuk teks/alt/warna latar dengan asumsi 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')
    );
  }
}

Jebakan umum

• Ketidakcocokan antara ICC tertanam dan ruang warna piksel → saturasi/tonal tidak terduga
• P3 hanya untuk thumbnail sementara konten utama sRGB → ketidakselarasan warna dalam halaman
• Mencampur HDR/SDR → ketidakkonsistenan gamma saat komposisi CSS/Canvas

Daftar periksa QA

• Perbandingan A/B di berbagai browser/OS
• Verifikasi ICC/kanal dengan imagemagick identify -verbose
• Tes otomatis: diff tangkapan layar dan perbandingan histogram

FAQ

• T: Haruskah semua gambar dikirim sebagai P3?

• J: Tidak. Batasi P3 pada aset yang jelas manfaatnya (hero/produk). Banyak gambar cukup sRGB.

• T: Apakah cukup menandai P3 dengan tag saja?

• J: Beberapa lingkungan salah menafsirkan tag. Untuk jalur kritis, lakukan konversi eksplisit dan pastikan ICC akhir sesuai piksel.