Guia de entrega em P3 2025 — Fallback seguro para sRGB com verificação em dispositivos reais

Dispositivos recentes suportam P3 cada vez mais, mas ainda existem telas sem P3. Para evitar problemas, ofereça P3 junto com um fallback sRGB.

Abordagem prática para “usar P3 sem surpresas”: incorporação ICC, JPEG/AVIF com tag, exemplos em HTML/Next e diffs em CI.

Relacionado: /pt-BR/articles/color-management-srgb-p3-cmyk-handoff-2025 / Gerenciamento de Cor e Estratégia ICC 2025 — Guia prático para consistência de cores na Web

Básico de exportação

• Sempre incorpore ICC em assets P3
• Mantenha uma versão sRGB (entrega dupla em pontos-chave é aceitável)
• Procese em um único espaço de cor; evite conversões em múltiplas etapas

Tratamento de ICC

• P3: incorpore Display P3 (D65 / 2°). Trate a curva de tom próxima à do sRGB
• sRGB: incorpore o perfil explicitamente (sem tag é frágil e dependente do ambiente)

Dicas de formato/codec

• Foto: AVIF/JPEG XL (quando disponível) > WebP > JPEG. Confirme a retenção de ICC
• UI/ilustrações: PNG/SVG. Benefícios de P3 são limitados; valide contra mudança de paleta
• Prioridade: “P3 vs sRGB com aparência consistente” — evite super saturação ou desvios em pele

Padrões de entrega

1. Use Gerador de Srcset para compor type + srcset
2. Troque P3/sRGB por media query ou MIME. Se a detecção for difícil, limite P3 a hero/produto
3. Adicione diffs de screenshot no CI para detectar mudanças acidentais

Padrão em 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) aproxima capacidade wide‑gamut. Não é perfeito; prefira P3 apenas onde importa.

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

Com Next/Image, use unoptimized ou garanta transformações com gestão de cor; alguns otimizadores removem ICC. Nesses casos, <picture> manual pode ser mais seguro.

Verificação

• Compare em um dispositivo compatível com P3 e outro limitado a sRGB
• Cheque gradientes e comportamento de saturação/clip

O que observar em dispositivos reais

• Desvios vermelho/amarelo em tons de pele
• Super saturação na cor da marca (P3 não deve parecer “pintado”)
• Banding por tratamento incorreto de gama/quantização

Diff em CI (ideia)

// Pseudo: compare duas screenshots em Lab ΔE
function meanDeltaE(imgA: Uint8ClampedArray, imgB: Uint8ClampedArray): number {
  // ...converter RGB→Lab e média de ΔE...
  return 1.8; // exemplo
}

if (meanDeltaE(p3Shot, srgbShot) > 3.0) {
  throw new Error('Diferença de cor muito grande: revise a conversão P3');
}

FAQ

• P: Dá para forçar P3 no navegador? R: Não de forma confiável. Incorpore ICC e verifique no hardware.
• P: Meu JPEG perde ICC. R: Algumas ferramentas removem ICC. Use opções --icc/“preservar metadados” e verifique com exiftool -icc_profile -G1.
• P: Entrega dupla é pesada? R: Limite P3 a áreas de alto impacto (hero/produto). O restante fica em sRGB.

Resumo

Não tente “ir wide em tudo”. Use P3 onde importa e mantenha o fallback sRGB sólido.

Apêndice: mini pipeline (exemplo)

# Parta do master sRGB, converta para P3 e incorpore ICC
magick in_srgb.jpg -colorspace DisplayP3 -profile DisplayP3.icc out_p3.jpg

# Converta para AVIF preservando ICC
avifenc --icc out_p3.jpg out_p3.avif

# Fallback sRGB
magick out_p3.jpg -colorspace sRGB -profile sRGB.icc out_srgb.jpg

Checagens extras

# Presença de ICC
exiftool -icc_profile -G1 out_p3.jpg out_p3.avif out_srgb.jpg

# Leitura rápida de tags
exiftool -ColorSpace -ProfileDescription out_p3.jpg