Matriz 2025: AVIF vs WebP vs JPEG (y cuándo PNG o JXL)
Guía de selección de formato: calidad percibida, compatibilidad, peso, coste de CPU y fallback en 2025.
Esta matriz responde a:
- ¿Qué formato elegir según tipo de contenido y objetivo (SEO, peso, transparencia)?
- ¿Cuándo vale el encode más lento de AVIF frente a WebP?
- ¿Dónde sigue vigente JPEG por coste/compatibilidad?
- Acceso rápido a acciones: Convertir | Comprimir | Redimensionar
Objetivo
Proveer una matriz clara para elegir formato óptimo según tipo de contenido, restricciones de CPU, compatibilidad y objetivos de Core Web Vitals.
1. Resumen ejecutivo
- AVIF: Mejor compresión con texturas complejas; encode más lento.
- WebP: Balance velocidad/calidad; ubiquidad establecida.
- JPEG (clásico): Súper rápido encode/ decode; peor eficiencia a igual calidad perceptual.
- PNG: Solo para transparencia sin pérdida / píxeles exactos.
- JXL (en progreso): Potencial técnico alto; soporte todavía parcial (verificar estado 2025 antes publicar definitivo).
2. Matriz de decisión (borrador)
| Criterio | AVIF | WebP | JPEG | PNG | JXL |
|---|---|---|---|---|---|
| Eficiencia compresión | Alta | Media-Alta | Media | Baja (lossy no) | Muy Alta* |
| Velocidad encode | Lenta | Media | Muy rápida | N/A | Lenta* |
| Transparencia | Sí | Sí | No | Sí | Sí* |
| Animación | Sí (limitada) | Sí | No | No | Sí* |
| Soporte navegador | Alto 2025 | Muy alto | Universal | Universal | Parcial* |
| Arte lineal / UI | Bueno (con tune) | Bueno | Regular (banding) | Excelente | Bueno* |
| Fotos complejas | Excelente | Muy bueno | Aceptable | No eficiente | Excelente* |
| Decodificación energía | Media | Baja-Media | Baja | Baja | TBD* |
| (* Verificar y actualizar al publicar.) |
3. Flujo recomendado
- Detectar capacidades (Accept, feature tests).
- Servir AVIF si soportado y tamaño supera umbral reducción significativa.
- Fallback WebP si AVIF no soportado.
- JPEG baseline como último recurso fotografía.
- PNG únicamente cuando exige transparencia o pixel-perfect.
4. Heurísticas prácticas
| Caso | Elección principal | Notas |
|---|---|---|
| Hero fotografía | AVIF | Revisar artefactos en degradados |
| Galería miniaturas | WebP | Calidad ~80, reduce CPU encode masivo |
| UI con transparencia | PNG / WebP | WebP si no precisa pixel-perfect |
| Capturas texto nítido | WebP (lossless) | O AVIF con quantización fina |
| Animaciones ligeras | WebP animado | Evitar GIF |
5. Métricas a recolectar
- Ratio bytes ahorrados (JPEG → AVIF / WebP).
- VMAF p95 vs referencia.
- Tiempo encode p50/p95 (ms) por formato en infra real.
- Impacto batería en móviles (tests A/B).
6. Consideraciones de implementación
- Pipeline híbrido: preprocesar AVIF; generar WebP y JPEG fallback.
- Control granular de quality (separar photographic vs graphic).
- Guardar metadatos (EXIF crítico) según política.
- Reintentar encode AVIF con menor esfuerzo si CPU saturada.
7. Riesgos
| Riesgo | Mitigación |
|---|---|
| Encode AVIF lento en build | Paralelizar + caché incremental |
| Artefactos en degradados | Ajustar params (CQ, subsampling) |
| Soporte desigual JXL | Feature detection + skip |
8. Próximos pasos antes publicación
- Insertar tabla real con tamaños ejemplo (fotografía, UI, screencap).
- Validar soporte JXL en Safari/Chromium (estado Q3 2025).
- Añadir snippet código negociación formato.
Conclusión
La matriz permite decisiones reproducibles basada en métricas, evitando debates subjetivos y alineando eficiencia con experiencia de usuario.