Formatos de Imagen Comparados: JPG vs PNG vs WebP vs AVIF (2026)

Elegir el formato de imagen correcto es una de las decisiones más impactantes en el rendimiento web. Equivocarte significa páginas más pesadas, peor SEO, peor experiencia de usuario. Acertar significa 40-80% menos peso sin sacrificar calidad visual.

Esta guía compara los cuatro formatos que importan en 2026, JPG, PNG, WebP y AVIF, y te dice exactamente cuándo usar cada uno. Sin opiniones, datos.

Resumen ejecutivo

Si tienes prisa:

Caso	Formato recomendado
Foto en web moderna	WebP (con fallback JPG)
Foto en email / CMS antiguo	JPG
Logo, icono, captura con transparencia	PNG o WebP
Logo escalable que no se pixelará	SVG
Sitio que prioriza rendimiento sobre todo	AVIF (con fallback WebP)
Foto del iPhone (HEIC)	Convertir a JPG o WebP

DuneTools Convertir Imagen soporta todos estos formatos con auto-detección y permite cambiar entre ellos sin perder transparencia.

JPG (JPEG)

• Tipo: con pérdida (lossy)
• Transparencia: no
• Mejor para: fotografías, gradientes suaves
• Compatibilidad: 100%, todos los navegadores y dispositivos
• Tamaño típico: 100% (línea base)
• Año: 1992

JPG es el caballo de batalla histórico de la web. Funciona en absolutamente todo, comprime fotos de manera excelente, y todos los editores lo soportan. Su debilidad: no tiene transparencia, si tu logo necesita fondo transparente, JPG no sirve.

La calidad va de 1 a 100. 75-85 es el sweet spot: visualmente indistinguible del original, pero 60-80% más ligero que sin compresión. Por debajo de 70 verás “blocking” (cuadros visibles); por encima de 90 sólo añades peso sin beneficio.

PNG

• Tipo: sin pérdida (lossless)
• Transparencia: sí (canal alpha completo)
• Mejor para: logos, iconos, capturas, ilustraciones con áreas planas
• Compatibilidad: 100%
• Tamaño típico: 200-500% para fotos, 30-100% para gráficos
• Año: 1996

PNG es el formato sin pérdida universal. Cada píxel se preserva exactamente; el archivo descomprimido es idéntico al original. Soporta canal alpha completo (transparencia variable, no sólo “transparente sí o no”).

No uses PNG para fotos. Una foto de iPhone como PNG pesa 3-5× más que como JPG con calidad indistinguible. PNG brilla cuando el contenido tiene áreas planas grandes, líneas nítidas, texto, o transparencia.

Optimizadores como oxipng y pngquant pueden reducir PNGs entre 20-50% sin pérdida de calidad. DuneTools Comprimir Imagen los aplica automáticamente.

WebP

• Tipo: con pérdida + sin pérdida (ambos modos)
• Transparencia: sí
• Mejor para: fotos en web moderna, gráficos con transparencia
• Compatibilidad: 98%+ de navegadores en 2026
• Tamaño típico: 60-75% del JPG equivalente
• Año: 2010 (Google)

WebP es el “JPG moderno”: diseñado por Google para reemplazar tanto a JPG (con su modo lossy) como a PNG (con su modo lossless). En la práctica, WebP-lossy es 25-35% más pequeño que JPG a la misma calidad visual, y WebP-lossless es 20-30% más pequeño que PNG.

WebP soporta transparencia completa (a diferencia de JPG) y animación (a diferencia de PNG estático, similar a GIF pero mucho más eficiente). Casi siempre la elección correcta para web moderna.

La excepción: email y CMS antiguos. Algunos clientes de email (Outlook viejo) y plataformas (WordPress muy antiguo, eBay, Etsy) todavía no soportan WebP. Para esos casos, sigue con JPG/PNG.

AVIF

• Tipo: con pérdida + sin pérdida
• Transparencia: sí
• Mejor para: máximo rendimiento, sitios que priorizan Core Web Vitals
• Compatibilidad: 95%+ de navegadores en 2026
• Tamaño típico: 40-50% del JPG equivalente
• Año: 2019 (basado en AV1, codec de vídeo)

AVIF es la herramienta de compresión más eficiente disponible en 2026. Comprime 30-50% mejor que WebP a la misma calidad visual, soporta HDR (gama dinámica alta), profundidad de color de 10 y 12 bits, y transparencia completa.

La pega: codificar AVIF es lento. Comprimir una imagen a AVIF puede tardar 5-20× más que JPG. Para uso en runtime (servir desde una API) puede ser problemático. Para uso en build (pre-generar para tu sitio estático) no importa.

Recomendación para 2026: usar AVIF como formato principal en sitios pre-generados (Astro, Next.js Image, Cloudflare Images), con WebP y JPG como fallbacks via <picture>:

<picture>
  <source srcset="/foto.avif" type="image/avif">
  <source srcset="/foto.webp" type="image/webp">
  <img src="/foto.jpg" alt="..." loading="lazy">
</picture>

El navegador elige el primero que entiende. Sitios con esta configuración cargan 40-60% más rápido que sitios con sólo JPG.

SVG (mención especial)

• Tipo: vectorial (no rasterizado)
• Transparencia: sí
• Mejor para: logos, iconos, ilustraciones que se reescalan
• Compatibilidad: 100%
• Tamaño típico: muy variable (depende del contenido)
• Año: 1999

SVG es completamente diferente a los formatos anteriores. No almacena píxeles, almacena descripciones matemáticas de líneas, curvas y formas. Se reescala infinitamente sin pixelarse y typically pesa muy poco para iconos simples (5-50 KB).

Usa SVG para: logos, iconos UI, ilustraciones simples, mapas, gráficos. No uses SVG para: fotografías (un SVG con miles de elementos pesa más que un JPG y se renderiza lento).

Comparativa práctica con datos reales

Probamos los 4 formatos rasterizados en una foto de paisaje 4032×3024 px:

Formato	Calidad	Tamaño	% vs JPG	Compatibilidad
JPG	85%	1.8 MB	100%	100%
PNG	lossless	8.7 MB	483%	100%
WebP	85%	1.2 MB	67%	98%
WebP	80%	1.0 MB	56%	98%
AVIF	85%	0.78 MB	43%	95%
AVIF	80%	0.62 MB	34%	95%

A la misma calidad percibida, AVIF es 2.9× más ligero que JPG. Para un sitio con 50 imágenes hero, eso es la diferencia entre 90 MB de descarga y 31 MB. En LCP (Largest Contentful Paint), 2-3 segundos de diferencia.

Decisión final por caso de uso

Tienes una foto y necesitas web moderna:

1. Convierte a AVIF (calidad 80) como primario.
2. Convierte a WebP (calidad 80) como fallback medio.
3. Convierte a JPG (calidad 85) como fallback final.
4. Sirve via <picture> con <source>.

Tienes un logo PNG:

1. Si tiene transparencia → mantén PNG o convierte a WebP-lossless.
2. Si es escalable (líneas y formas) → considera convertir a SVG para tamaño mínimo.
3. Si necesita animación → WebP o GIF.

Tienes una foto de iPhone (HEIC):

1. Convierte a JPG para máxima compatibilidad (HEIC a JPG).
2. O WebP si solo será web.
3. Nunca dejes HEIC en producción, Windows y muchas plataformas no lo soportan.

Te enfrentas a “envíame esto en JPG” (cliente o sistema legacy):

1. Convierte cualquier formato a JPG con DuneTools Convertir Imagen.
2. Calidad 85% para máxima fidelidad sin peso excesivo.

Errores comunes

Error 1: Usar PNG para fotos. Pierdes 70-80% de eficiencia sin ganancia visual.

Error 2: Usar JPG para logos. Los bordes nítidos se vuelven borrosos por la compresión lossy.

Error 3: No tener fallback para WebP/AVIF. Si tu única fuente es WebP y un usuario llega con un navegador del 2018, no ve nada.

Error 4: Convertir múltiples veces. JPG → PNG → JPG acumula pérdida. Siempre desde el original.

Error 5: Sobre-compresión visible. Calidad 60% en una foto de cara → notarás “blocking” en la piel. Quédate en 75-85% para fotos.

Resumen

• JPG: foto + máxima compatibilidad. Calidad 80-85.
• PNG: gráficos, transparencia, sin pérdida. Optimiza con oxipng.
• WebP: el JPG moderno. -25-35% peso. Casi siempre la elección correcta en 2026.
• AVIF: el futuro presente. -50% peso vs JPG. Úsalo con fallback.
• SVG: vectores escalables, no fotos.

Para herramientas que conviertan entre estos formatos sin subir nada a la nube: Convertir Imagen en DuneTools soporta los 5, procesa localmente, y mantiene transparencia automáticamente cuando el destino lo permite.