Panduan pengiriman gambar P3 2025 — Fallback aman ke sRGB dengan verifikasi di perangkat nyata

Perangkat terbaru makin sering mendukung P3, tetapi non‑P3 masih ada. Untuk menghindari masalah, putuskan cara menawarkan P3 bersama fallback sRGB.

Pendekatan minimal dan praktis agar “pakai P3 tanpa kejutan”: penyematan ICC, JPEG/AVIF bertag, contoh HTML/Next, dan diff screenshot di CI.

Terkait: /id/articles/color-management-srgb-p3-cmyk-handoff-2025 / Manajemen Warna & Strategi Profil ICC 2025 — Panduan Praktis untuk Konsistensi Warna Web

Dasar ekspor

• Selalu sematkan ICC untuk aset P3
• Simpan versi sRGB (pengiriman ganda di titik penting boleh)
• Lakukan pemrosesan di satu ruang warna; hindari konversi bertingkat

Penanganan ICC

• P3: sematkan Display P3 (D65 / 2°). Perlakukan gamma dekat kurva nada sRGB
• sRGB: sematkan profil secara eksplisit (tanpa tag itu rapuh dan tergantung lingkungan)

Tips format/kodek

• Foto: AVIF/JPEG XL (jika ada) > WebP > JPEG. Konfirmasi retensi ICC
• UI/ilustrasi: PNG/SVG. Manfaat P3 terbatas; validasi terhadap pergeseran palet
• Prioritas: “Tampilan P3 vs sRGB tetap cukup konsisten” — hindari saturasi berlebih atau pergeseran warna kulit

Pola pengiriman

1. Gunakan Generator Srcset untuk menyusun type + srcset
2. Alihkan P3/sRGB via media query atau MIME. Jika sulit dideteksi, batasi P3 ke hero/produk saja
3. Tambahkan diff screenshot di CI untuk mendeteksi perubahan tak sengaja

Pola 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) memperkirakan kemampuan wide‑gamut. Tidak sempurna; lebih baik gunakan P3 hanya di elemen penting.

Contoh 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>

Dengan Next/Image, gunakan unoptimized atau pastikan transformasi yang dikelola warna; beberapa optimizer menghapus ICC. Dalam kasus itu, <picture> buatan tangan bisa lebih aman.

Verifikasi

• Bandingkan di perangkat yang mendukung P3 dan perangkat yang terbatas sRGB
• Periksa gradien dan perilaku saturasi/klip

Apa yang dilihat di perangkat nyata

• Pergeseran bias merah/kuning pada warna kulit
• Warna brand yang terlalu jenuh (P3 tidak boleh terlihat “dicat”)
• Banding dari penanganan gamma/kuantisasi yang keliru

Diff CI (ide)

function meanDeltaE(imgA: Uint8ClampedArray, imgB: Uint8ClampedArray): number {
  return 1.8; // contoh
}

if (meanDeltaE(p3Shot, srgbShot) > 3.0) {
  throw new Error('Perbedaan warna terlalu besar: tinjau konversi P3');
}

FAQ

• T: Bisakah memaksa browser ke P3? J: Tidak dapat diandalkan. Sematkan ICC dan verifikasi di perangkat.
• T: JPEG saya kehilangan ICC. J: Beberapa alat menghapus ICC. Gunakan opsi --icc/“preserve metadata” dan verifikasi dengan exiftool -icc_profile -G1.
• T: Apakah pengiriman ganda berat? J: Batasi P3 ke area berdampak tinggi (hero/produk). Sisanya tetap sRGB.

Ringkasan

Jangan coba “lebar di mana‑mana.” Gunakan P3 di tempat penting dan jaga fallback sRGB tetap solid.

Lampiran: mini pipeline (contoh)

magick in_srgb.jpg -colorspace DisplayP3 -profile DisplayP3.icc out_p3.jpg
avifenc --icc out_p3.jpg out_p3.avif
magick out_p3.jpg -colorspace sRGB -profile sRGB.icc out_srgb.jpg

Pemeriksaan tambahan

exiftool -icc_profile -G1 out_p3.jpg out_p3.avif out_srgb.jpg
exiftool -ColorSpace -ProfileDescription out_p3.jpg