PNG vs JPG vs WebP vs AVIF

PNG, JPG, WebP y AVIF comprimen los mismos píxeles bajo contratos distintos. PNG es sin pérdidas y admite transparencia; JPG tiene pérdidas, es mucho más pequeño para fotografías y no tiene alfa. WebP y AVIF hacen ambas cosas, y cada uno es aproximadamente un cuarto más pequeño que el anterior. En 2026 los cuatro se descodifican de forma nativa en todos los navegadores principales.

Solo local

Cada archivo de imagen responde a la misma pregunta — ¿cómo guardo estos píxeles en menos bytes? — con una estrategia distinta. PNG se niega a perder información y comprime la estructura en su lugar. JPG descarta información de forma ordenada e invisible para el ojo humano y se compra así ahorros espectaculares en fotografías. WebP y AVIF son la generación moderna: hacen los dos trabajos con mejores matemáticas y, por lo general, archivos más pequeños.

Los compromisos ya son casi por completo cuestión de contenido, no de compatibilidad. WebP llegó a todos los navegadores principales en 2020 y AVIF lo hizo hacia 2023-2024, así que en 2026 los cuatro formatos se descodifican de forma nativa en cualquier parte que importe, incluido Safari. Lo que decide la elección es lo que contiene la imagen: bordes duros o degradados, texto o piel, una captura de pantalla o una fotografía, y si la transparencia o un tamaño de archivo objetivo son innegociables.

Esta guía compara los cuatro formatos sobre esos mismos ejes, explica por qué cada uno comprime mal cierto tipo de contenido y cubre los metadatos que viajan en el contenedor. Todo lo enlazado aquí — convertidor, compresor, redimensionador — se ejecuta localmente en tu navegador, así que probar una teoría con tu propio archivo no cuesta nada y no sube nada.

Una vez elegido el formato, la forma más rápida de ponerlo en práctica es el conversor de imágenes que transcodifica entre PNG, JPG, WebP y AVIF en la propia pestaña, sin subir nada.

Cuando el requisito es un tope de tamaño estricto en lugar de un formato, la guía práctica sobre la compresión a un objetivo de 100KB muestra cómo bajar el control de calidad hasta un objetivo exacto, comprobando la calidad a simple vista en cada paso.

Sin pérdidas frente a con pérdidas: la decisión de la que depende todo lo demás

La compresión sin pérdidas reorganiza los datos para reconstruir píxeles idénticos bit a bit; la compresión con pérdidas aproxima la imagen y conserva aquello que la visión humana es menos probable que eche de menos. Sin pérdidas no significa más pequeño por definición — con una fotografía con ruido puede perder por goleada — y con pérdidas no significa feo por definición. Cada una gana en el contenido para el que fue diseñada, razón por la que la primera pregunta nunca es cuál es el mejor formato, sino qué contiene la imagen.

Tres rasgos del contenido lo deciden. Las fotografías y los degradados suaves sobreviven con elegancia a la compresión con pérdidas; los gráficos de bordes duros, el texto y las capturas de pantalla la castigan con artefactos de ondulación a lo largo de cada borde. El ruido perjudica a cualquier formato, pero destroza las tasas sin pérdidas, porque el ruido es información al máximo. Y la transparencia es un requisito estricto que descalifica de inmediato a JPG.

Formato	Compresión	Transparencia	Contenido donde suele rendir mejor
PNG	Sin pérdidas (DEFLATE)	Alfa completo	Capturas de pantalla, UI, logos, arte lineal
JPG	Con pérdidas (bloques DCT)	Ninguna	Fotografías, tonos continuos
WebP	Con y sin pérdidas	Alfa completo	Ambos papeles; todoterreno sólido
AVIF	Con y sin pérdidas	Alfa completo	Fotos en los tamaños más pequeños; animación

PNG: píxeles exactos, alfa y metadatos

PNG almacena los píxeles sin pérdidas: el descodificador reproduce la imagen original exacta, siempre, razón por la que es la opción predeterminada para capturas de pantalla, exportaciones de diseño y cualquier cosa que contenga texto. Comprime filtrando cada línea de escaneo contra su vecina y aplicando después compresión DEFLATE de propósito general — la misma familia de matemáticas que ZIP. Esa estrategia adora la estructura repetida (color plano, UI alineada, bordes nítidos), y por eso una captura limpia de una aplicación suele comprimir a una fracción de su tamaño original.

La misma estrategia explica por qué PNG sufre con las fotografías: la textura orgánica roza lo aleatorio, los filtros no pueden predecirla y el archivo se dispara. PNG también lleva alfa completo de 8 bits, así que los logos con bordes suaves sobre fondos arbitrarios se mantienen limpios, y su contenedor tiene espacio para metadatos ricos — incluidos bloques EXIF —, algo que vuelve a importar en la última sección de esta guía.

JPG: con pérdidas, diminuto para fotos, alérgico a los bordes

JPG divide la imagen en bloques de 8 por 8 píxeles, transforma cada uno en datos de frecuencia (la transformada discreta del coseno) y descarta las frecuencias a las que el ojo es menos sensible. El ajuste de calidad es el dial del descarte: a 80-90 una fotografía parece esencialmente intacta a una fracción del tamaño original, y por debajo de unos 50 los propios bloques se vuelven visibles como los característicos artefactos de bloque del formato.

Dos consecuencias del diseño importan en la práctica. Primera: nada de transparencia, nunca — el formato no tiene canal alfa, y un archivo que quieras dejar con fondo transparente llegará con el fondo incrustado. Segunda: los bordes duros sufren — un borde de UI de 1 píxel o un texto pequeño reparte su energía entre varios bloques de 8×8, y la reconstrucción lo emborrona en ruido de mosquito y fantasmas. El submuestreo de croma (promediar el detalle de color a media resolución) añade aún más suavidad al texto rojo y azul. Reserva JPG para aquello para lo que fue creado: fotografías de tono continuo.

WebP y AVIF: la pareja moderna

WebP, de Google, hace los dos trabajos: un modo con pérdidas basado en las mismas ideas de codificación predictiva que la compresión de vídeo (VP8), y un modo sin pérdidas aparte que suele superar a PNG por alrededor de un cuarto. Sus fotografías con pérdidas quedan aproximadamente un 25-35% más pequeñas que JPG con calidad visual comparable, y a diferencia de JPG admite alfa en ambos modos — así que una imagen fotográfica con transparencia real por fin cabe en un archivo pequeño.

AVIF, construido sobre el códec de vídeo AV1, es la frontera actual: la codificación intrafotograma más herramientas de predicción más ricas lo hacen aproximadamente un 20% más pequeño que WebP en contenido típico, con un manejo notablemente mejor de los degradados que en otros formatos producen bandas, y admite profundidades de 8 bits y superiores, animación y alfa. Los costes, eso sí, son reales: la codificación es dramáticamente más lenta (segundos en lugar de milisegundos al máximo esfuerzo) y el soporte de herramientas es más escaso. Es el formato a elegir cuando los bytes son la restricción decisiva y el tiempo de codificación no lo es.

Frente a JPG con calidad similar	Ahorro típico	Advertencia
WebP (con pérdidas)	≈ 25-35% más pequeño	El modo sin pérdidas es un códec aparte; se compara con PNG
AVIF (con pérdidas)	≈ 20% más pequeño que WebP	Codificación mucho más lenta; soporte de herramientas más escaso
WebP (sin pérdidas)	≈ 25% más pequeño que PNG	No pierde ante PNG en nada — la misma garantía sin pérdidas

Soporte en navegadores en 2026

La cuestión de la compatibilidad está resuelta. WebP es universal desde que Safari 14 lo incorporó en 2020; AVIF aterrizó en Chrome 85 y Firefox 93 en 2020-2021 y en Safari 16.4 en 2023, con lo que la cobertura evergreen es completa hasta las versiones de 2024-2025. El WebP animado y el AVIF animado también se descodifican en todas partes con navegadores actuales.

Las advertencias restantes están en los márgenes, no en la corriente principal: las versiones muy antiguas de Safari (iOS 13 y anteriores) carecen de WebP, algunos archivos AVIF con perfiles exóticos de gran profundidad de bits o de 12 bits se descodifican en menos motores, y el soporte de AVIF en software fuera del navegador — visores del sistema operativo, herramientas de diseño antiguas, canalizaciones de CMS — todavía va por detrás de su soporte en navegadores. Servir AVIF con un respaldo en WebP o JPG mediante el elemento picture sigue siendo el patrón defensivo para cualquier contenido aportado por el usuario.

Formato	Disponible en todas partes desde	Merece un respaldo para
PNG, JPG	Los años noventa	Nunca — verdaderamente universales
WebP	2020 (Safari 14 fue el último en resistirse)	iOS 13 y anteriores, incrustaciones heredadas
AVIF	2023 (Safari 16.4 fue el último gran motor)	Safari antiguo, visores fuera del navegador, canalizaciones de CMS

EXIF: los metadatos viven en el contenedor, no en los píxeles

Un archivo de imagen son dos cosas: datos de píxeles y un contenedor a su alrededor que puede llevar metadatos — bloques EXIF que registran modelo de cámara, exposición, orientación, marcas de tiempo y a menudo coordenadas GPS. De ahí se deduce una propiedad crítica: los metadatos pertenecen al archivo, no a la imagen. Copia un JPG y el EXIF viaja con él; recodifica la misma foto a WebP o AVIF y el nuevo contenedor arranca vacío, salvo que una herramienta copie deliberadamente los metadatos antiguos.

Eso tiene dos caras prácticas. Privacidad: una foto compartida directamente desde la cámara puede publicar tu ubicación, razón por la que eliminar metadatos es una función de todo convertidor que se precie — la recodificación es la forma fiable de eliminarlos. Flujo de trabajo: la orientación y las marcas de tiempo pueden ser útiles, así que si una canalización las necesita, hay que decirle a la herramienta que conserve el EXIF en lugar de darlo por hecho. En cualquier caso, la decisión vive en el contenedor, y la conversión es donde se toma.

Preguntas frecuentes

¿Se suben mis imágenes cuando las comprimo o las convierto aquí?

No. La descodificación, la recodificación y el redimensionado se ejecutan todos en tu navegador con sus propios códecs de imagen; el archivo nunca sale de la pestaña. Compruébalo en DevTools: abre el panel «Network», convierte una imagen y observa cómo la lista de peticiones se queda vacía. La Content-Security-Policy del sitio también prohíbe las conexiones salientes de los scripts de la página.

¿Qué formato deberían usar las capturas de pantalla y las capturas de UI?

PNG, o WebP en modo sin pérdidas si el tamaño importa. Las capturas de pantalla están llenas de bordes duros, texto y rellenos planos — contenido que la compresión sin pérdidas aplasta y la de con pérdidas emborrona. Una captura en JPG muestra ondulación alrededor de cada glifo y de cada borde de botón; el PNG de la misma captura suele ser más pequeño de todos modos, porque su contenido es muy predecible.

¿Por qué mi PNG es más grande que el JPG de la misma foto?

Porque las fotografías son casi aleatorias para un códec sin pérdidas. PNG debe reconstruir cada píxel exactamente, y la textura orgánica, el ruido del sensor y el grano vencen a sus predictores, así que almacena casi todo a un coste elevado. JPG, en cambio, descarta las partes imperceptibles. La misma foto puede ser fácilmente de cinco a diez veces más grande como PNG que como un buen JPG o WebP.

¿Convertir una imagen elimina sus datos EXIF?

Recodificar a otro formato empieza un contenedor nuevo, así que el EXIF no sobrevive por defecto — lo cual, de paso, elimina los datos GPS y de cámara. Dentro del mismo formato, algunas herramientas copian los metadatos, así que la eliminación nunca está garantizada por accidente. Si la privacidad importa, convierte una vez y revisa las propiedades del resultado; si la orientación importa, asegúrate de que la herramienta la conserve o la fije en los píxeles.

¿Es AVIF siempre más pequeño que WebP?

No — de media, aproximadamente un 20% más pequeño con calidad similar, pero la dispersión es amplia. AVIF saca la máxima ventaja en fotografías y degradados; los gráficos planos simples pueden comprimir a tamaños casi idénticos, y unas cuantas imágenes incluso invierten el orden. El tiempo de codificación es el otro coste: AVIF al máximo esfuerzo tarda órdenes de magnitud más, algo que importa en las canalizaciones de build.

¿Qué ajuste de calidad debería usar para imágenes con pérdidas?

Para fotografías, empieza por 75-85: por debajo, el bloqueo y el desenfoque aparecen rápido; por encima de unos 90, pagas bytes reales por diferencias que el ojo no ve. Los gráficos con texto y bordes toleran mal la compresión con pérdidas en cualquier ajuste, así que ahí prefiere sin pérdidas. Juzga a simple vista sobre tu propio contenido al 100% de zoom — los ajustes interactúan con la resolución y el contenido, no solo entre sí.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas