AVIF vs PNG
Ambos guardan fotografías, pero con compromisos distintos. Estas son las diferencias reales y cómo decidir.
Short answer
Con contenido fotográfico AVIF gana por mucho, y además tiene modo sin pérdida. Con recursos pequeños de color plano (iconos, sprites, dibujo lineal sencillo) PNG suele seguir siendo más pequeño y siempre es más simple.
Why this comes up
Normalmente se llega aquí en una de dos situaciones: se tienen fotografías PNG desmesuradas y se busca el mayor ahorro posible, o se está rehaciendo una canalización de recursos y se duda de si AVIF puede sustituir a PNG en todas partes. La respuesta difiere mucho entre ambas, y es en la segunda donde falla casi todo el consejo generalista.
Comparación directa
| Propiedad | AVIF | PNG |
|---|---|---|
| Compresión | Con pérdida | Sin pérdida |
| Transparencia | Sí | Sí |
| Tamaño habitual | 40-55% de un JPEG equivalente | 300-500% de un JPEG equivalente |
| Compatibilidad | Todos los navegadores actuales; algunas aplicaciones de escritorio antiguas van por detrás | Se abre en cualquier parte, incluso en software de hace décadas |
| Suele venir de | Sitios web que optimizan su peso de carga | Capturas de pantalla, logotipos y gráficos |
What actually differs
AVIF tiene modo sin pérdida y la gente olvida que existe
Las comparaciones suelen enfrentar el AVIF con pérdida al PNG sin pérdida, lo que no mide lo mismo. El AVIF sin pérdida existe y en contenido fotográfico suele superar a PNG por un margen holgado siendo exacto byte a byte. Si su requisito es de verdad «sin pérdida», no tiene que quedarse en PNG: tiene que decir a qué modo de AVIF se refiere.
Con recursos diminutos y planos AVIF pierde a menudo
AVIF arrastra una sobrecarga de contenedor que un icono de 32×32 no puede amortizar, y sus herramientas de codificación están pensadas para la textura fotográfica que un gráfico simple no tiene. Un PNG pequeño de un icono de color plano sale con frecuencia más pequeño que el AVIF de la misma imagen, a veces bastante. Mida antes de convertir un juego de iconos; la regla general «AVIF es más pequeño» es una regla de fotografía.
Con PNG no hay pregunta de compatibilidad que hacerse
PNG se abre en todo, y así es desde los años noventa, sin alternativa de respaldo, sin elemento picture y sin negociación de contenido. AVIF necesita las tres cosas si una parte de su público usa un Safari antiguo. Para una imagen de cabecera grande, esa complejidad le compra bytes de verdad; para un icono de 2 KB no le compra nada y le cuesta un paso de compilación.
Which to use
Use AVIF for
Fotografías e imágenes grandes con mucho detalle en la web, donde reducir a la mitad o más está sobre la mesa y la alternativa de respaldo ya forma parte de su montaje.
Use PNG for
Iconos, sprites, logotipos, capturas de texto y cualquier cosa pequeña y plana donde la ventaja de AVIF desaparece y la compatibilidad universal sigue contando.