Uso de Display‑P3 en la Web 2025 — Flujo de trabajo práctico

Las imágenes de amplia gama pueden mejorar notablemente fotos de producto y gráficos. A la vez, hay que mantener compatibilidad con entornos sRGB. Este artículo resume lo esencial desde la creación hasta la entrega, incluido el manejo en CSS/HTML y los fallbacks, para evitar sorpresas de color.

Estrategia central

• Máster: P3/16‑bit float (o alta profundidad) con edición no destructiva
• Entrega: ofrecer image-p3 (AVIF/WebP) y image-srgb, conmutando según capacidad del cliente
• Normalización sRGB: incrustar ICC correcto o realizar conversión explícita de espacio de color (evitar desajustes etiqueta/píxel)

Ejemplo de pipeline de conversión

# Conversiones explícitas con ImageMagick (ilustrativo)
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/hero en P3 cuando haya soporte
• image-set() para alternar sRGB/P3 (se puede combinar con type("image/avif"))
• Asegurar contraste de textos/alt/fondos asumiendo 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')
    );
  }
}

Errores comunes

• Desajuste entre ICC incrustado y el espacio real de los píxeles → saturación/tonos inesperados
• Usar P3 solo en miniaturas mientras el cuerpo está en sRGB → desajuste visible dentro de la página
• Mezclar HDR/SDR → inconsistencias de gamma al componer en CSS/Canvas

Checklist de QA

• Comparaciones A/B en navegadores/SO variados
• Verificar ICC/canales con imagemagick identify -verbose
• Pruebas automáticas: diffs de capturas y comparaciones de histograma

Preguntas frecuentes

• P: ¿Debemos enviar todas las imágenes en P3?

• R: No. Limítalo a recursos con beneficio claro (hero/producto). Muchas imágenes funcionan bien en sRGB.

• P: ¿Es seguro enviar solo con etiqueta P3?

• R: Algunos entornos malinterpretan etiquetas. En rutas críticas, usa conversión explícita y asegura que el ICC final coincida con los píxeles.