Guía de entrega P3 2025 — Fallback seguro a sRGB y verificación en dispositivos

P3 crece, pero aún hay dispositivos sRGB. Define cómo ofrecer P3 junto con un fallback sRGB sólido para evitar sorpresas.

Objetivo: «usar P3 sin romper». Embebe ICC, genera JPEG/AVIF etiquetados, usa patrones HTML/Next y añade diffs en CI.

Relacionado: /es/articles/color-management-srgb-p3-cmyk-handoff-2025 / Gestión de color correcta y estrategia ICC 2025 — Guía práctica para colores web consistentes

Exportes básicos

• Siempre embebe ICC en recursos P3
• Mantén versión sRGB (doble entrega en zonas clave)
• Procesa en un solo espacio para evitar cadenas de conversiones

ICC

• P3: Display P3 (D65/2°)
• sRGB: perfila explícitamente (untagged es frágil)

Formatos/codecs

• Foto: AVIF/JPEG XL (si hay) > WebP > JPEG. Verifica ICC
• UI/ilustración: PNG/SVG. Ganancia P3 limitada; vigila cambios de paleta
• Prioridad: «P3 vs sRGB coherentes» — evita sobre‑saturación y tonos de piel raros

Patrones de entrega

1. Compón type + srcset con Generador de Srcset
2. Conmuta P3/sRGB por media/MIME; si es difícil, limita P3 a héroes/producto
3. Añade diffs de capturas en CI

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>

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>

Verificación

• Dispositivo P3 vs sRGB
• Gradientes/saturación/clipping