PNG vs WebP vs AVIF: qué formato de imagen usar realmente

Elige cualquier imagen de cualquier web y hay muchas probabilidades de que sea PNG, WebP o AVIF. El viejo debate JPEG-contra-PNG se ha convertido silenciosamente en una decisión a tres, y la respuesta correcta depende menos del dogma de calidad que de qué es la imagen y a dónde va. Aquí va la versión práctica — la misma regla que aplicamos cuando publicamos imágenes nosotros.

La historia en 30 segundos

• PNG (1996) — el caballo de batalla sin pérdida. Cada píxel sobrevive intacto, la transparencia de 8 bits es impecable y todo dispositivo de este siglo lo abre. Su debilidad: la compresión sin pérdida de contenido fotográfico ocupa mucho.
• WebP (Google, 2010) — diseñado para adelgazar imágenes web. Tiene modo con pérdida y modo sin pérdida, ambos con transparencia. Safari aguantó hasta la versión 14 (2020), el último obstáculo real; hoy es seguro en todas partes.
• AVIF (Alliance for Open Media, 2019) — el derivado de imagen fija del códec de vídeo AV1. Comprime más que nada anterior, soporta 10/12 bits y HDR, y alcanzó cobertura práctica de navegadores (Chrome, Firefox, Edge, Safari 16.4) en 2023. Sus costes: codificación lenta y un ecosistema aún madurando.

Cómo se comparan donde importa

	PNG	WebP	AVIF
Compresión	Solo sin pérdida	Con y sin pérdida	Con y sin pérdida
Transparencia	Sí (alfa)	Sí (ambos modos)	Sí
Tamaño típico de foto vs JPEG	2–3× mayor	25–34% menor	40–50% menor
Profundidad de color	8 bits (RGB 24)	8 bits	8/10/12 bits, HDR
Velocidad de codificación	Rápida	Rápida	Lenta (5–10× PNG)
Soporte en navegadores	Universal	Universal desde 2020	Chrome/Firefox/Edge/Safari 16.4+
Ecosistema fuera del navegador	Universal	Bueno, creciendo	Irregular
Animación	No (para eso APNG)	Sí	Sí

La fila del tamaño de foto es el titular: convertir una foto JPEG típica a WebP la reduce aproximadamente un 25%, y a AVIF aproximadamente la mitad, a la misma calidad visual. Para un sitio que sirve miles de imágenes, esa diferencia se mide en euros de ancho de banda y décimas de segundo de carga.

La regla de decisión que usamos

1. Capturas, logos, arte lineal, todo lo de bordes duros → PNG o WebP sin pérdida. Los formatos con pérdida emborronan los colores planos y los bordes nítidos de los gráficos de interfaz — ya has visto la captura «borrosa». PNG mantiene el texto al píxel. Si importa el tamaño y el destino acepta WebP, el WebP sin pérdida gana al PNG por un 20–30% con fidelidad idéntica.

2. Fotos para la web → WebP, o AVIF si controlas la cadena. Nadie debería publicar una fotografía como PNG en una web; suele pesar 5–10 veces más que un WebP bien hecho a calidad visual idéntica. WebP es el valor seguro con soporte universal. AVIF aprieta más y trata mejor los degradados (atardeceres, tonos de piel), pero su lentitud de codificación lo hace ideal para convertir al publicar, no al vuelo.

3. Fotos que se editarán o archivarán → PNG (o conserva el formato original). PNG es el formato de intercambio seguro para editar: sin pérdida, puedes reabrir y guardar sin pérdida generacional. Nunca archive el máster en un formato con pérdida.

4. Adjuntos de correo, formularios, software antiguo → JPEG o PNG. El soporte gana a la eficiencia cuando hay un receptor desconocido de por medio. Los AVIF rebotan hoy en bastantes formularios igual que lo hacía WebP hace una década.

La advertencia de compatibilidad, honesta

El soporte en navegadores no es todo el ecosistema. WebP lo abre cualquier visor decente. AVIF fuera de los navegadores es más desigual: Windows necesita un códec de la Store (las versiones modernas lo traen), macOS Sequoia+ lo abre en Vista Previa, pero bastantes apps de terceros y plugins de CMS aún no lo decodifican. Es la historia de HEIC repetida: el software moderno va bien, el antiguo se queja.

Por eso el flujo pragmático al publicar es: másters en PNG (o el formato original), derivados en WebP/AVIF. Convertir es barato y local — nuestros PNG a WebP y PNG a AVIF ejecutan los codificadores en tu navegador, así una carpeta de originales jamás sale de tu máquina mientras generas ambas derivadas. Y para volver — un AVIF que alguna herramienta no traga, un WebP que quieres editar — WebP a PNG te da una copia de trabajo sin pérdida, y la guía de formato de PNG cubre los detalles.

¿Y JPEG XL?

Verás mención ocasional de JPEG XL (JXL) como heredero de todo: sin pérdida mejor que PNG, con pérdida mejor que AVIF, más la bala de plata de transcodificar JPEG bit a bit. Técnicamente es excelente. También está ausente de Chrome y Safari, lo que para publicar en la web lo deja en territorio de archivistas, no de páginas en producción. Lo cubrimos en la guía de formato JXL si tienes curiosidad; el resumen honesto es «observar, no adoptar todavía».

FAQ

¿WebP tiene peor calidad que JPEG?

No — WebP al mismo tamaño de archivo se ve mejor que JPEG, o igual de bien pesando menos. La mala prensa temprana vino de codificadores agresivos de hace una década. Los codificadores modernos son maduros; los artefactos solo aparecen empujando la calidad muy abajo.

¿Por qué mi PNG es tan enorme?

Porque PNG es sin pérdida y las fotos son ruido. Una foto de 12 megapíxeles tiene millones de píxeles sutilmente distintos que la compresión sin pérdida debe describir exactamente — eso es caro. Una captura de ventana de colores planos comprime de maravilla como PNG; la foto de un bosque, no. Convierte la foto a WebP.

¿Puedo usar AVIF como único formato web?

Hoy, seguro que no — los navegadores ya están, pero los pipelines de subida, los clientes de correo y las herramientas no. Sirve WebP (o JPEG) de respaldo junto a AVIF, que es exactamente para lo que existe el <picture> moderno. Si tu audiencia es 95% Chrome moderno (algunos paneles internos lo son), AVIF único es defendible.

¿Convertir PNG a WebP pierde calidad?

En modo WebP sin pérdida, nunca — el decodificador reconstruye exactamente los mismos píxeles. En modo con pérdida, sí, como JPEG. La mayoría de herramientas «PNG a WebP» usan con pérdida por defecto; la nuestra te deja elegir, y para gráficos con texto o transparencia recomendamos sin pérdida.