Display‑P3 na Web 2025 — Fluxo de trabalho prático

Imagens de ampla gama podem melhorar muito fotos de produto e gráficos. Ao mesmo tempo, é essencial manter a compatibilidade com ambientes sRGB. Este guia resume o essencial, do preparo à entrega, incluindo tratamento em CSS/HTML e fallbacks, para evitar surpresas de cor.

Estratégia central

• Master: P3/16‑bit float (ou alta profundidade) com edições não destrutivas
• Entrega: fornecer image-p3 (AVIF/WebP) e image-srgb, alternando conforme a capacidade do cliente
• Normalização sRGB: incorporar ICC correto ou realizar conversão explícita de espaço de cor (evitar divergência entre tag/pixel)

Exemplo de pipeline de conversão

# Conversões explícitas com ImageMagick (ilustrativas)
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

Notas de CSS/HTML

• @media (color-gamut: p3) para priorizar miniaturas/heros em P3 quando houver suporte
• image-set() para alternar sRGB/P3 (pode combinar com type("image/avif"))
• Garanta contraste para textos/alt/fundos assumindo 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')
    );
  }
}

Armadilhas comuns

• Divergência entre ICC incorporado e espaço real dos pixels → saturação/tonalidade inesperadas
• Usar P3 apenas em miniaturas enquanto o corpo está em sRGB → desalinhamento visível na página
• Mistura de HDR/SDR → inconsistências de gama ao compor em CSS/Canvas

Checklist de QA

• Comparações A/B em vários navegadores/SOs
• Verificar ICC/canais com imagemagick identify -verbose
• Testes automatizados: diffs de screenshots e comparações de histograma

FAQ

• P: Devemos enviar todas as imagens em P3?

• R: Não. Limite P3 a ativos com benefício claro (hero/produto). Muitas imagens ficam ótimas em sRGB.

• P: Basta marcar P3 com tag?

• R: Alguns ambientes interpretam mal tags. Em caminhos críticos, prefira conversão explícita e garanta que o ICC final corresponda aos pixels.