PNG, JPG, WebP o AVIF: un árbol de decisión

La mayoría de las guías de formatos responden a la pregunta “qué formato de imagen debería usar” con una tabla técnica y un encogimiento de hombros. Lees sobre profundidad de color y submuestreo de croma y terminas sabiendo menos que cuando empezaste. Esto es lo contrario. Busca tu imagen más abajo, sigue la rama y usa el formato que te toque al final. Una recomendación por caso, más la concesión que en realidad estás aceptando.

Resumen: Las fotos van en AVIF o WebP. Los gráficos de colores planos y todo lo que necesite transparencia van en PNG, o en WebP cuando el tamaño importa. JPG solo cuando algo más adelante en la cadena no pueda leer nada más nuevo. AVIF es el más pequeño, pero tiene la compatibilidad más reciente.

Empieza por lo que es la imagen

La compresión se divide en dos bandos, y el bando decide casi todo.

Los formatos con pérdida (JPG, WebP, AVIF) descartan detalles que tu ojo apenas nota para hacer los archivos más pequeños. Geniales para fotografías, donde los datos son irregulares y una pérdida pequeña es invisible. Pésimos para una captura de pantalla con texto nítido, donde la pérdida aparece como un emborronamiento alrededor de cada letra.

Los formatos sin pérdida (PNG) conservan cada píxel exactamente. Perfectos para colores planos, bordes nítidos y transparencia. Un derroche para fotos, donde “conservar cada píxel” significa un archivo enorme.

Así que la primera pregunta nunca es “qué formato es el mejor”. Es “qué estoy mirando”.

El árbol de decisión

¿Es una fotografía?

Una foto de cámara, una toma de producto, un render con textura. Mucho color, degradados suaves, nada de texto definido.

Usa AVIF. Genera el archivo más pequeño a una calidad dada y maneja los degradados de cielos y piel sin las bandas en bloques que muestran los formatos más antiguos. Si no puedes garantizar que el navegador o la app de quien lo vea estén actualizados, exporta WebP, o conserva un JPG como respaldo universal. La concesión es la compatibilidad: AVIF se lee en todo lo moderno, pero es el más nuevo de los cuatro, así que algún cliente antiguo despistado podría atragantarse. WebP es el punto medio seguro. JPG es el mínimo que todo lee.

Elijas lo que elijas aquí, no uses PNG. Una foto en PNG suele ser entre tres y cinco veces más grande que la misma imagen en JPG, sin ningún beneficio visible.

¿Es una captura de una interfaz, texto o un diagrama?

Bordes nítidos, texto legible, grandes zonas de un solo color.

Usa PNG. La compresión con pérdida destroza los bordes definidos, así que JPG convierte el texto negro sobre blanco en una neblina gris de artefactos. PNG mantiene las letras nítidas y comprime bien los fondos planos. Si la captura es pesada y controlas quién la verá, WebP en su modo sin pérdida hace el mismo trabajo ocupando menos. La concesión de PNG es el tamaño de archivo en capturas recargadas, pero aquí gana la legibilidad.

¿Es un logo, un icono o un gráfico de colores planos?

Pocos colores, rellenos sólidos, quizá un fondo transparente.

Usa PNG, o WebP cuando lo quieras más pequeño y controles dónde se carga. Ambos mantienen los bordes limpios y ambos admiten transparencia. Si el gráfico es geometría realmente simple y puedes usar vectores, SVG le gana a todos estos, pero ese es un tipo de archivo completamente distinto y no es algo en lo que conviertas un raster después de los hechos. La concesión: PNG tiene compatibilidad universal y es algo más grande, WebP es más pequeño y algo menos universal.

¿Necesita un fondo transparente?

Un producto recortado, un logo sobre una sección de color, una pegatina.

Usa PNG o WebP, nunca JPG. JPG no tiene canal alfa en absoluto, así que la transparencia se reduce a un relleno sólido, casi siempre blanco. Este es el error de formato más común con diferencia: alguien guarda un recorte como JPG y le sale una caja blanca alrededor. AVIF también admite transparencia y vale la pena si la imagen es además fotográfica. Para gráficos planos con transparencia, PNG es la opción por defecto y WebP es la alternativa más pequeña.

¿Hay un límite estricto de tamaño de subida?

Un formulario que rechaza cualquier cosa de más de unos pocos megabytes, un tope de adjunto de correo, un marketplace que limita las fotos de los anuncios.

Usa AVIF si el destino lo acepta, si no WebP, y si no JPG con un ajuste de calidad más bajo. Estos tres te permiten cambiar un poco de calidad visible por mucho menos peso, y AVIF te da el mayor margen antes de que las caídas de calidad se hagan evidentes. Evita PNG cuando luchas contra un límite de tamaño, salvo que la imagen sea de colores planos, porque la compresión sin pérdida en una foto se pasa del límite de largo. La concesión es la pérdida por generaciones, que vemos más abajo.

¿Se mueve?

Un bucle corto, un clip de reacción, un logo animado.

Usa WebP para animación. El WebP animado es muchísimo más pequeño y de mucha mayor calidad que el viejo GIF animado, con color completo en lugar del techo de 256 colores del GIF. AVIF también puede animarse y ocupa aún menos, con una compatibilidad algo más limitada. La respuesta honesta para cualquier cosa más larga que un par de segundos es un archivo de vídeo de verdad (MP4 o WebM), que vuelve a ser más pequeño, pero para un bucle corto de verdad el WebP animado es la elección. La concesión frente al GIF no es ninguna que merezca la pena mencionar; el GIF solo sobrevive por costumbre.

La tabla comparativa

	JPG	PNG	WebP	AVIF
Compresión	Con pérdida	Sin pérdida	Ambas	Ambas
Ideal para	Fotos (respaldo)	Color plano, texto, transparencia	Fotos, gráficos, animación	Fotos, tamaño mínimo
Transparencia	No	Sí	Sí	Sí
Animación	No	No	Sí	Sí
Tamaño de archivo relativo (foto)	Referencia	Mucho mayor	~25-35 % menor	~50 % menor
Compatibilidad de navegadores	Universal	Universal	Muy amplia	Amplia, la más reciente

Las cifras de tamaño de archivo son aproximadas y dependen de la imagen, pero el orden se mantiene: AVIF le gana a WebP, que le gana a JPG en fotos, y PNG no está en esa carrera porque resuelve un problema distinto.

La pérdida por generaciones, la trampa de la que nadie te avisa

Cada vez que guardas una imagen con pérdida (JPG, WebP o AVIF en modo con pérdida), descarta un poco más. Edita un JPG, guarda, vuelve a abrir, edita, guarda de nuevo, y estarás comprimiendo datos ya comprimidos. Los artefactos se acumulan. La imagen se vuelve borrosa y con manchas tras unas pocas rondas.

Dos reglas te mantienen a salvo. Conserva un original en un formato sin pérdida (PNG, o el raw de la cámara) como tu copia maestra, y exporta copias con pérdida a partir de ella en lugar de editar la copia con pérdida una y otra vez. Y convierte desde tu fuente de mayor calidad, no desde una copia que ya ha sido apretada. Convertir un JPG cansado a AVIF no deshace el daño que el JPG ya hizo; solo lo congela.

Entonces, ¿cuál?

• Foto para un sitio moderno: AVIF, con WebP o JPG como respaldo.
• Foto que vas a enviar por correo o a entregar a ciegas: JPG.
• Captura de pantalla, diagrama o imagen de texto: PNG.
• Logo o gráfico plano, con o sin transparencia: PNG, o WebP para ahorrar peso.
• Cualquier cosa que pelee contra un límite de tamaño: AVIF o WebP con una calidad sensata.
• Un bucle corto: WebP, o un vídeo de verdad para cualquier cosa más larga.

Cuando el formato que tienes no es el formato que necesitas, puedes convertir entre los cuatro en tu navegador en image.hivly.net. No se sube nada, no hay que registrarse y los archivos nunca salen de tu máquina, lo cual importa cuando la imagen es una captura privada o una toma de producto sin publicar. Convierte una foto pesada en PNG a AVIF, devuelve a PNG un JPG transparente que metiste por error, o reduce en lote una carpeta de JPG de cámara a WebP antes de que choquen contra un tope de subida, todo en image.hivly.net.