HDR e Display‑P3 na Web em 2025 — Guia prático

Resumo

Telas wide‑gamut tornam Display‑P3 atraente, mas sRGB continua sendo a linha de base. Este guia mostra como entregar P3/HDR com fallbacks LDR/sRGB robustos — da produção à entrega e QA.

Fundamentos: Gamut, Transferência, ICC

• sRGB: base de compatibilidade
• Display‑P3: gamut mais amplo (LDR)
• HDR: PQ/HLG; para stills, sempre forneça fallback LDR
• ICC: define o espaço de cor; sem ICC o render é indefinido

Tonemapping HDR→LDR

• Suavize highlights (roll‑off) e preserve sombras
• Use >8‑bit; em 8‑bit aplique dithering

Estratégia de formatos (2025)

• AVIF 10‑bit: eficiente e com gamut amplo → primeira escolha
• WebP 8‑bit: bom fallback LDR
• JPEG: mantenha sRGB para compatibilidade máxima; JPEG em P3 é arriscado
• JPEG XL: promissor, suporte ainda limitado

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

Padrão HTML (fallback em camadas)

<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 do produto" fetchpriority="high" />
  
</picture>

Detecção 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 de produção

1. Mantenha master em P3/HDR (≥10‑bit)
2. Gere LDR/sRGB seguro
3. Exporte AVIF (P3/10‑bit, preservar ICC) + WebP/JPEG (sRGB)
4. Retenha apenas metadados necessários; respeite privacidade
5. QA em dispositivos reais sRGB/P3; automatize diffs de screenshot

Notas de tonemapping

• Evite clipping em highlights
• Proteja croma em alta luminância
• Faça dithering ao reduzir para 8‑bit

Entrega (delivery)

• Para LCP use fetchpriority="high"; considere preload as=image
• Defina width/height para evitar CLS
• srcset/sizes corretos para prevenir 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 do produto"
  fetchpriority="high"
/>

Diferenças por navegador/SO

• Safari: gerenciamento de cores consistente
• Chrome/Edge: melhorando; sensível às configurações do SO
• Windows: tratamento de ICC varia por app; teste em hardware real

Dicas para 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();
}

// Escrever duas variantes P3/SDR e publicar no CDN (exemplo)
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 & regressão visual

• Compare screenshots sRGB vs P3
• Monitore limiares SSIM/ΔE; detecte desvios grandes
• Mantenha contraste WCAG‑AA em elementos de UI

// Medição de SSIM (exemplo conceitual)
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 ≈ idêntico
}

Acessibilidade

• P3/HDR não pode prejudicar legibilidade
• Atenção ao brilho no modo escuro; faça fallback para LDR se preciso
• Alt‑text informativo tanto em LDR quanto P3

Checklist

• [ ] Limitar P3/HDR a visuais chave
• [ ] Sempre entregar fallback sRGB
• [ ] Preservar ICC em visuais importantes
• [ ] Automatizar regressão multi‑dispositivo
• [ ] Documentar tonemapping
• [ ] Ajustes corretos no CDN/optimizer

Estudos de caso

• Hero e‑commerce: P3/AVIF → mais vivacidade; sizes mantém LCP estável
• Mídia fotográfica: pipeline P3, entrega dupla (P3/AVIF e sRGB/WebP), QA Windows/Chrome
• Sites de marca: logos em sRGB, P3 para backgrounds

Perguntas frequentes

• P: Migrar tudo para P3?

  • R: Não. Use em heros/visuais importantes; miniaturas ficam em sRGB.

• P: JPEG em P3 é ok?

  • R: Prefira AVIF/WebP; mantenha JPEG em sRGB.

• P: HDR para imagens está pronto?

  • R: Só com fallback LDR robusto; entrega dupla é prática recomendada.

• P: Remover ICC para reduzir bytes?

  • R: Em imagens não críticas, sim; em visuais chave, preserve ICC.

• P: Cores “lavadas” no Windows/Chrome

  • R: Configurações variam; projete baseline sRGB e trate P3 como aprimoramento.

• P: CMS/otimizador remove o ICC

  • R: A opção “remover ICC” pode estar ativa. Para fluxos P3, use perfis/ajustes que preservem o ICC.