JPG vs PNG vs WebP vs AVIF: La comparativa definitiva de 2026

Cuatro formatos, cuatro grupos de seguidores convencidos y un flujo constante de afirmaciones de que «JPG ha muerto» que llevan quince años llegando y nunca terminan de llegar. El debate sobre los formatos de imagen en 2026 está inusualmente confuso: cada artículo de rendimiento web te dice que cambies a AVIF, cada guía de diseño antigua te dice que PNG es de mayor calidad, cada desarrollador web tiene una opinión sobre las licencias de WebP, y mientras tanto JPG alimenta en silencio alrededor del 70 por ciento de todas las imágenes en la web. Maya, una ingeniera front-end que se unió a una startup en marzo, pasó su primera semana intentando averiguar qué formato usar para las imágenes principales del sitio de marketing. Seis artículos después tenía cuatro recomendaciones contradictorias. Luego procesó la misma fotografía fuente con los cuatro formatos y la respuesta se volvió obvia.

Este artículo es ese ejercicio de referencia, realizado con una fotografía real en 2026, con cifras reales de tamaño de archivo, datos reales de compatibilidad con navegadores y recomendaciones reales sobre cuándo usar cada formato. Sin guerras de formatos, sin lealtad a un proveedor en particular, solo mediciones y reglas de decisión. Si lees un artículo sobre formatos de imagen este año, este es el que quieres, porque al final sabrás qué formato usar para cada situación que realmente encuentres y tendrás un pipeline de un solo clic para generar cualquiera de ellos a partir de cualquier otro.

Antecedentes: cómo funciona cada formato internamente

JPG (1992)

JPG es un formato con pérdida que utiliza la Transformada de Coseno Discreta (DCT) para codificar bloques de 8x8 píxeles. Descarta los componentes de alta frecuencia de cada bloque que los humanos no perciben bien, lo que proporciona un ahorro masivo de tamaño en contenido fotográfico. JPG es de 8 bits por canal, no admite transparencia, ni animación, ni metadatos de mucho interés más allá de EXIF. Es compatible con literalmente todos los dispositivos y navegadores fabricados en los últimos 30 años.

PNG (1996)

PNG es un formato sin pérdida que utiliza compresión DEFLATE sobre una representación píxel por píxel. Admite un canal alfa (transparencia), soporta hasta 16 bits por canal (PNG-48) y produce archivos que son idénticos byte a byte a la fuente después de la descompresión. PNG es la respuesta correcta para gráficos con bordes nítidos, texto y transparencia; es la respuesta incorrecta para fotografías porque los tamaños de archivo se disparan de 5 a 10 veces en comparación con JPG sin ningún beneficio visual perceptible.

WebP (2010)

WebP fue desarrollado por Google basándose en el códec de video VP8. Admite modos con y sin pérdida, además de un canal alfa y animación. WebP codifica significativamente mejor que JPG (25 a 35 por ciento más pequeño a calidad equivalente) y es compatible con el 97 por ciento de los navegadores a partir de 2026. Está libre de regalías.

AVIF (2019)

AVIF se basa en el códec de video AV1, desarrollado por la Alliance for Open Media (Google, Mozilla, Netflix, Apple, etc.). Utiliza una codificación mucho más sofisticada que JPG: tamaños de bloque variables, más tipos de transformación, mejor predicción intra-cuadro. AVIF produce archivos 30 a 50 por ciento más pequeños que JPG a calidad equivalente. La compatibilidad con navegadores alcanzó el 94 por ciento a principios de 2025 y sigue aumentando. AVIF está libre de regalías.

La prueba de referencia de 2026

Tomamos una fotografía de paisaje de 6,000 x 4,000 px (24 megapíxeles) ISO 200 de una Sony A7 IV —cielo brillante, follaje de tonos medios, detalles de sombra oscura bajo árboles— y la exportamos con la configuración de calidad visualmente transparente más alta para cada formato. «Visualmente transparente» significa que un espectador cuidadoso no puede distinguir el archivo comprimido del original con un zoom del 100 por ciento en un monitor calibrado.

Formato	Tamaño de archivo	Tiempo de codificación	Tiempo de decodificación	Soporte en navegadores
JPG calidad 90	8.4 MB	0.3 s	rápido	universal
PNG (24 bits)	52.1 MB	1.1 s	rápido	universal
WebP calidad 90	5.7 MB	0.6 s	rápido	97 por ciento a nivel global
AVIF calidad 60	3.9 MB	3.8 s	medio	94 por ciento a nivel global

WebP ahorra un 32 por ciento respecto a JPG. AVIF ahorra un 54 por ciento respecto a JPG. PNG es 6 veces más grande que JPG y es el formato incorrecto para fotografía a cualquier escala.

Guía paso a paso: elegir el formato correcto

Paso 1: Identifica el tipo de contenido

¿Es una fotografía (tono continuo, degradados, sin bordes duros)? ¿Es un gráfico (logotipo, icono, captura de pantalla con texto, ilustración con bordes nítidos)? ¿Tiene transparencia (necesita colocarse sobre un fondo no uniforme)?

Paso 2: Identifica el contexto de entrega

¿Se servirá en un sitio web que controlas? ¿Se enviará a una agencia de stock? ¿Se enviará por correo electrónico? ¿Se imprimirá? ¿Se subirá a un marketplace?

Paso 3: Aplica la regla de decisión

1. Fotografía para compatibilidad universal (correo electrónico, marketplace, impresión, stock): JPG.
2. Logotipo, icono, captura de pantalla o gráfico con texto: PNG.
3. Fotografía o gráfico en un sitio web que controlas: WebP como predeterminado, AVIF como alternativa de nueva generación con picture-tag, y JPG como alternativa heredada.
4. Archivo de impresión de alta calidad: JPG calidad 95-100 o TIFF.
5. Ilustración animada: WebP o AVIF (PNG animado funciona pero es enorme).

Paso 4: Genera las variantes a partir de tu archivo maestro

Empieza con la fuente de mayor calidad que tengas. Si es un archivo maestro JPG, conviértelo a los otros formatos según sea necesario:

• JPG a WebP para la variante predeterminada para la web
• JPG a AVIF para la variante de nueva generación
• JPG a PNG para casos que necesitan transparencia (aún tendrás que enmascarar el fondo)

Paso 5: Implementa la mejora progresiva

Los sitios web modernos sirven todos los formatos mediante la etiqueta picture. El navegador elige el primer formato que entiende:

picture > source srcset (AVIF) > source srcset (WebP) > img src (respaldo JPG)

Los navegadores compatibles con AVIF obtienen el archivo más pequeño. Los compatibles con WebP obtienen un archivo pequeño. El JPG se envía a clientes heredados.

Paso 6: Mide el impacto real en la carga de la página

Ejecuta Lighthouse antes y después. El peso de la página debería reducirse entre un 30 y un 50 por ciento en páginas con muchas imágenes. El Largest Contentful Paint (LCP) debería mejorar notablemente.

Paso 7: Maneja la dirección de la conversión

A veces recibes archivos en formatos que no son JPG y necesitas normalizarlos. Usa:

• WebP a JPG cuando un socio te envía WebP y necesitas compatibilidad universal
• AVIF a JPG para entradas AVIF que van a sistemas heredados
• PNG a JPG cuando una fotografía se guardó incorrectamente como PNG
• HEIC a JPG para archivos fuente de iPhone

Paso 8: Comprime dentro del formato

Una vez que tienes el formato correcto, comprime al tamaño adecuado. El compresor de JPG, el compresor de PNG o el compresor de imágenes universal manejan la optimización de tamaño dentro del formato.

Errores comunes y cómo evitarlos

Usar PNG para fotografías. Diagnóstico: una página con 12 fotos PNG pesa 80 MB y carga en 18 segundos en móvil. Solución: las fotografías se envían como JPG, WebP o AVIF. PNG es para gráficos.

Recodificar un JPG repetidamente. Diagnóstico: cada ciclo de edición y reguardado en JPG degrada la calidad. Solución: mantén un original en formato sin pérdida (PNG, TIFF o PSD); exporta solo a JPG en el paso final de entrega.

Servir JPG a todos en 2026. Diagnóstico: el peso de la página es un 50 por ciento más alto de lo necesario. Solución: sirve WebP como predeterminado con JPG como respaldo en la etiqueta picture. El 3 por ciento de navegadores que aún usan JPG no ralentizan a nadie más.

Generar AVIF con ajustes de codificador mal sintonizados. Diagnóstico: las salidas AVIF son más grandes o de peor apariencia que WebP. Solución: usa un codificador bien sintonizado (libavif con valores predeterminados razonables, o un servicio alojado que tenga parámetros ajustados). Una codificación AVIF mala es realmente peor que una codificación JPG buena.

Suponer que AVIF reemplazará a JPG pronto. Diagnóstico: construir infraestructura que asume soporte universal de AVIF. Solución: JPG será el respaldo heredado durante la próxima década. Planifica el patrón de la etiqueta picture indefinidamente.

Enviar WebP o AVIF a destinatarios de correo electrónico. Diagnóstico: los destinatarios ven archivos adjuntos rotos porque su cliente de correo no conoce el formato. Solución: los correos electrónicos envían JPG. WebP y AVIF viven en la web.

Dónde gana cada formato, en lenguaje sencillo

JPG

Gana en compatibilidad universal, codificación más rápida, curva de aprendizaje cero. Cada cámara lo produce, cada navegador lo renderiza, cada impresora lo acepta, cada plataforma social lo espera. Si no tienes una razón específica para usar otra cosa, usa JPG. El formato será legible dentro de 2050 con confianza.

PNG

Gana en transparencia y calidad sin pérdida para gráficos. PNG es la respuesta correcta para logotipos, iconos, gráficos, capturas de pantalla y cualquier imagen con texto nítido o bordes duros donde la compresión de color de JPG crea anillos visibles. PNG es la respuesta incorrecta para fotografías: el tamaño del archivo es de 6 a 10 veces mayor que JPG sin beneficio visual perceptible.

WebP

Gana en la relación costo-beneficio para la entrega web en 2026. WebP es compatible en el 97 por ciento de los navegadores a nivel mundial. Codifica rápido, decodifica rápido, admite transparencia, admite animación y ahorra un tercio del ancho de banda de tus imágenes. Si tienes un sitio web con páginas con muchas imágenes, WebP es el formato que deberías servir por defecto.

AVIF

Gana en eficiencia de compresión bruta. AVIF te da el archivo más pequeño para una calidad visual dada por un margen significativo. La desventaja es el tiempo de codificación: la codificación AVIF es de 5 a 15 veces más lenta que JPG, y los ajustes del codificador importan mucho. El soporte del navegador alcanzó el 94 por ciento a principios de 2025 y sigue subiendo. Usa AVIF como tu variante de nueva generación junto con WebP y JPG.

Ejemplos reales

Maya, ingeniera front-end en una startup. El sitio de marketing de Maya tenía 38 imágenes principales, cada una enviada como JPG con calidad 90. Peso total de imágenes: 47 MB en todo el sitio. Generar variantes WebP con el convertidor de JPG a WebP y agregar la etiqueta picture redujo el peso a 31 MB. Agregar variantes AVIF mediante JPG a AVIF lo redujo a 22 MB. La puntuación de Lighthouse subió de 64 a 91. Tiempo invertido: una tarde.

Diego, gerente de comercio electrónico en un minorista de moda. La página de producto de Diego promediaba 8 imágenes por artículo, 600 KB por JPG. Con 100,000 visitantes mensuales, eso eran 4.8 TB de salida por mes en JPG. WebP lo redujo a 3.2 TB. AVIF lo redujo a 2.2 TB. Los ahorros en costos de CDN pagaron el trabajo de implementación en 11 días.

Hannah, bloguera de comida con una biblioteca de contenido. Hannah tiene 1,200 fotos de recetas acumuladas durante seis años, todas almacenadas como JPG. Genera variantes WebP y AVIF mediante conversión por lotes a medida que publica nuevas recetas, y su CDN sirve el formato correcto por visitante. Los tiempos de carga de página en las páginas de índice de recetas bajaron de 6 segundos a 2.2 segundos.

Comparación de formatos de un vistazo

Propiedad	JPG	PNG	WebP	AVIF
Publicado	1992	1996	2010	2019
Con pérdida	Sí	No	Sí o no	Sí o no
Transparencia	No	Sí	Sí	Sí
Animación	No	Solo APNG	Sí	Sí
Profundidad de bits	8	8 o 16	8	8, 10, 12
Soporte universal del navegador	Sí	Sí	97 por ciento	94 por ciento
Libre de regalías	Sí	Sí	Sí	Sí
Mejor caso de uso	Fotos, correo electrónico, impresión	Gráficos, transparencia	Predeterminado web	Web de nueva generación

Consejos avanzados

Ajusta tu codificador AVIF. AVIF es sensible a los parámetros del codificador de formas que JPG y WebP no lo son. Libavif con --speed 4 (o números más altos para codificación más rápida) ofrece una relación velocidad/calidad razonable. Codificadores especializados como avifenc con la bandera --jobs para codificación en paralelo ayudan en máquinas multinúcleo.

Usa JPG progresivo al enviar JPG. Los JPG progresivos se renderizan en pasadas mientras se descargan, ofreciendo un mejor rendimiento percibido que los JPG de línea base.

Incorpora sRGB. Los archivos sin etiquetar se renderizan de forma impredecible en los navegadores. Cada exportación debe etiquetar explícitamente el perfil de color.

Usa WebP sin pérdida para gráficos con transparencia que de otro modo serían PNG. WebP sin pérdida suele ser entre un 20 y un 30 por ciento más pequeño que PNG con fidelidad byte por byte. Vale la pena considerarlo para bibliotecas de iconos y activos de marca.

Genera múltiples resoluciones por formato. Una etiqueta picture con srcset (varios tamaños por formato) y source (varios formatos) es el patrón moderno de imagen responsiva. Cada visitante recibe el archivo más pequeño en el formato más eficiente que su navegador soporte.

No recodifiques salidas AVIF. AVIF es sensible al submuestreo de croma y al manejo del espacio de color. Mantén tu original en JPG o un formato sin pérdida; genera AVIF solo en el paso final de entrega.

Mide con WebPageTest y Lighthouse. Los benchmarks sintéticos no siempre reflejan el rendimiento real. Ejecuta cargas de página reales desde varias ubicaciones geográficas.

Preguntas frecuentes

¿WebP tiene patentes?

No. WebP es libre de regalías, igual que AVIF.

¿AVIF reemplazará a JPG?

No por al menos otra década. La compatibilidad universal es pegajosa, y la ventaja de 30 años de JPG significa que está integrado en todas partes, desde impresoras hasta marcos de fotos, cámaras digitales y computadoras antiguas.

¿PNG tiene mayor calidad que JPG?

No cuando JPG se exporta con calidad 90 o superior. La diferencia solo es visible con zoom extremo en patrones de prueba sintéticos, no en fotografías. La ventaja de calidad de PNG es real solo en gráficos con bordes definidos.

¿Volver a guardar un JPG siempre lo degrada?

Solo si lo recodificas con una calidad inferior o configuraciones diferentes. Abrir, recortar con herramientas sin pérdida y volver a guardar con la misma calidad es esencialmente neutro.

¿Debería usar AVIF para fotos de producto en Shopify o Etsy?

Todavía no. La mayoría de los marketplaces recodifican las subidas a su propio formato de todos modos, y el soporte de AVIF en los cargadores de administración es inconsistente. Envía JPG a los marketplaces; envía AVIF en sitios que controlas.

¿Puedo usar HEIC en la web?

El soporte de navegadores para HEIC es pobre. Convierte con el convertidor de HEIC a JPG para entrega web.

¿Qué hay de JPEG XL?

JPEG XL es técnicamente excelente pero ha sido eliminado de Chromium y tiene soporte de navegador muy limitado a partir de 2026. WebP y AVIF son las opciones prácticas de formato web.

Matemáticas de ancho de banda para un sitio real

Un sitio editorial de 10 páginas con un promedio de 8 imágenes por página a 600 KB por JPG envía 48 MB a cada visitante. El mismo sitio en WebP envía 32 MB. En AVIF, 22 MB. Con 100,000 visitantes mensuales, eso es la diferencia entre 4.8 TB, 3.2 TB y 2.2 TB de salida por mes. Dinero real, impacto real en Core Web Vitals, consecuencias reales en SEO a medida que las señales de clasificación de Google incorporan cada vez más métricas de velocidad de página.

Las mismas matemáticas se escalan hacia abajo para sitios más pequeños. Un blog modesto con 5,000 visitantes mensuales aún se beneficia de la optimización de formato: los tiempos de carga de página disminuyen, los usuarios móviles (con conexiones más lentas y planes de datos limitados) obtienen una mejor experiencia, y el efecto acumulativo en el compromiso y las visitas repetidas es medible.

Sin pérdida vs con pérdida: ¿cuándo importa?

JPG es solo con pérdida. PNG es solo sin pérdida. WebP y AVIF soportan ambos. Para fotografía, los modos con pérdida ganan siempre — con calidad 90, los artefactos de compresión son invisibles para los humanos y el ahorro en tamaño de archivo es real. Guarda el modo sin pérdida para originales fuente donde puedas necesitar hacer ediciones no destructivas en el futuro, y para gráficos donde cada píxel importa.

El caso de WebP sin pérdida sobre PNG es subestimado: los archivos WebP sin pérdida suelen ser entre un 20 y un 30 por ciento más pequeños que PNG con fidelidad byte por byte. Para bibliotecas de iconos, colecciones de activos de marca y archivos de infografías, WebP sin pérdida es una victoria silenciosa que no cuesta nada en calidad.

El movimiento correcto esta semana

Si tomas una decisión esta semana, empieza a servir WebP junto con JPG en el sitio que te importe. La conversión está a un lote de distancia. Procesa tu biblioteca JPG existente con el convertidor de JPG a WebP, actualiza tus etiquetas de imagen para usar el patrón picture, y observa cómo sube tu puntuación Lighthouse. Superpón AVIF cuando estés listo para la siguiente ganancia del 15 por ciento con el convertidor de JPG a AVIF. Para conversiones entrantes cuando los socios te envían formatos que no son JPG, los convertidores WebP a JPG y AVIF a JPG normalizan todo a tu formato de archivo. Completa el kit de herramientas con el convertidor universal de imágenes para lotes de formatos mixtos y el compresor de imágenes para ajustar el tamaño dentro del formato. La categoría de rendimiento web que solía llevar un trimestre se convierte en una tarde.