Elegir entre PNG, JPEG, WebP y AVIF

[object Object]

Las fotografías van en JPEG, WebP o AVIF. Las capturas de pantalla, los logotipos, los iconos, los diagramas y todo lo que tenga color plano o texto nítido van en PNG, o en el modo sin pérdidas de WebP. Si necesitas transparencia, eso descarta JPEG por completo. Si hoy estás eligiendo un formato para la web y puedes servir más de uno: AVIF primero, WebP como alternativa y el JPEG o el PNG original para lo muy antiguo.

Esa es toda la decisión. El resto explica por qué, para que sepas cuándo no se aplica la regla general.

En qué es bueno de verdad cada formato

FormatoCompresiónTransparenciaAnimaciónMejor paraPeor para
PNGSin pérdidasSí, alfa completoNoCapturas de pantalla, logotipos, iconos, dibujo lineal, todo lo que lleve textoFotografías, donde los archivos se vuelven enormes
JPEGSolo con pérdidasNoNoFotografías, cuando importa la compatibilidad universalBordes duros, color plano, texto, todo lo que vayas a volver a editar
WebPCon o sin pérdidasSí, en los dos modosSustituto general de PNG y de JPEG en la webSoftware anterior a 2020, más o menos
AVIFCon o sin pérdidasLos archivos más pequeños para fotografías, gamut amplio y alto rango dinámicoCodificar rápido, y el software antiguo que no puede abrirlo

Sin pérdidas significa que la imagen decodificada es idéntica bit a bit a la que entró. Con pérdidas significa que el codificador tira información de forma permanente a cambio de un archivo más pequeño, y lo que recuperas es una aproximación.

PNG es sin pérdidas y siempre lo será. Su compresión funciona prediciendo cada píxel a partir de sus vecinos y comprimiendo después las diferencias, lo cual es magnífico cuando hay grandes áreas idénticas o que se repiten, y malo cuando cada píxel difiere ligeramente, como en una fotografía. Una foto guardada como PNG suele ser de cinco a diez veces más grande que un buen JPEG de la misma imagen, sin ninguna ventaja visible.

JPEG es con pérdidas y no tiene canal alfa, así que no puede almacenar transparencia en absoluto. Divide la imagen en bloques, convierte cada uno en información de frecuencia y descarta el detalle fino al que tu ojo es menos sensible. Eso funciona de maravilla en fotografías de tono continuo y mal en los bordes duros, donde produce esos halos tenues y ese ruido de mosquito que se ven alrededor del texto guardado como JPEG.

WebP y AVIF son formatos contenedor modernos derivados de códecs de vídeo. Los dos hacen con y sin pérdidas, los dos admiten transparencia alfa completa y los dos funcionan en todos los navegadores mayoritarios actuales. AVIF suele comprimir más que WebP, sobre todo con ajustes de calidad baja, y maneja gamuts de color amplios y profundidades de bits mayores. La contrapartida es el tiempo de codificación, que puede ser bastante más lento, y una compatibilidad algo más estrecha fuera de los navegadores, en aplicaciones de escritorio y herramientas de imagen antiguas.

Transparencia

Solo PNG, WebP y AVIF pueden almacenar un canal alfa real, es decir, que cada píxel lleva su propio valor de opacidad. Eso es lo que permite que un logotipo quede limpio sobre cualquier color de fondo.

Si conviertes una imagen transparente a JPEG, la transparencia tiene que ir a alguna parte. La mayoría de herramientas la aplanan sobre blanco, algunas sobre negro, y solo descubrirás cuál cuando la imagen aparezca sobre un fondo de color con un recuadro blanco alrededor. Si conoces el color de fondo final, aplánala sobre ese color a propósito en lugar de dejar que el conversor adivine.

Cuándo va bien con pérdidas y cuándo no

Con pérdidas va bien para la entrega final de contenido fotográfico al tamaño en el que se va a mostrar realmente. Con ajustes de calidad sensatos, la pérdida es genuinamente difícil de ver.

Con pérdidas es mala idea cuando:

  • La imagen lleva texto, líneas finas o áreas grandes de color plano. Los artefactos de compresión se acumulan justo en los bordes duros.
  • El archivo es un máster de trabajo que vas a editar y volver a exportar más adelante.
  • La imagen se va a ampliar, o se va a etalonar con fuerza después, lo que amplifica cualquier cosa que hiciera el codificador.
  • Importan los valores exactos de los píxeles, como en trabajo científico, médico o forense, o en una captura de pantalla de la que alguien va a leer cifras.

Por qué volver a guardar un JPEG lo empeora una y otra vez

Cada vez que un JPEG se decodifica y se vuelve a guardar, el codificador cuantiza datos que ya estaban cuantizados, y el error de redondeo se acumula. No es que la calidad se reduzca dos veces respecto al original; es que los artefactos que introdujo la primera pasada se tratan ahora como detalle real de la imagen y se aproximan a su vez.

Guardar con un ajuste de calidad más alto no lo deshace. El detalle que se eliminó en el primer guardado ya no está. Recodificar a calidad 95 a partir de un archivo de calidad 60 solo produce un archivo más grande que conserva fielmente los artefactos de calidad 60. Si editas una imagen repetidamente, guarda el máster en un formato sin pérdidas y exporta un JPEG, WebP o AVIF al final.

Tamaños que cabe esperar

Son reglas generales, no mediciones, y las cifras reales varían muchísimo según el contenido de la imagen. Para una fotografía típica con la misma calidad percibida, cuenta con que JPEG sea la referencia, con que WebP se quede alrededor de una cuarta parte por debajo y con que AVIF baje todavía más, y la diferencia se ensancha cuanto más comprimes. Para gráficos planos, el WebP sin pérdidas suele ganarle al PNG, a veces de largo. El ruido y la textura fina inflan todos los formatos con pérdidas, así que una foto con grano nunca va a comprimir como una toma limpia de estudio.

Redimensiona antes de comprimir

La mayor ganancia casi nunca está en el formato. Está en las dimensiones. Una imagen servida a 4000 píxeles de ancho y mostrada en una columna de 800 píxeles carga unas veinticinco veces más datos de píxel de los que necesita, y eso no lo arregla ningún codificador. Redimensiona a aproximadamente el tamaño en el que se va a mostrar (el doble, si apuntas a pantallas de alta densidad), luego elige el formato y después ajusta la calidad hasta que apenas puedas ver la diferencia, y retrocede un paso.