PNG vs SVG para rendimiento web: tamaño, velocidad de carga y Core Web Vitals (2026)

PNG vs SVG: la comparación técnica definitiva para 2025

Cada imagen que envías es una decisión de ingeniería. ¿Raster o vector? ¿45 KB o 3 KB? Estas decisiones se acumulan en miles de páginas y millones de peticiones. Esta es la guía de referencia que resuelve el debate PNG vs SVG — con benchmarks de compresión, análisis de renderizado, puntuaciones Lighthouse y código de producción listo para desplegar.

"La diferencia entre un buen frontend y uno excelente se mide en las cientos de decisiones sobre formatos de imagen que nadie ve."

Algoritmos de compresión: cómo funciona cada formato

PNG: DEFLATE + filtrado

PNG usa un pipeline de dos etapas. Cada línea de escaneo pasa por uno de cinco filtros de predicción (None, Sub, Up, Average, Paeth) que explotan la correlación píxel a píxel. Los bytes filtrados se comprimen con DEFLATE (LZ77 + codificación Huffman). Como DEFLATE opera en un flujo de bytes, la compresión PNG está limitada por la redundancia espacial: las regiones de color plano comprimen bien; las fotografías con ruido apenas se reducen.

• Ratio de compresión en iconos planos: 10:1–20:1
• Ratio de compresión en fotografías: 1,5:1–3:1
• Coste de descompresión: ~0,8 ms/megapíxel en un SoC móvil de gama media

SVG: compresión de texto + SVGO

SVG es XML. Las exportaciones sin optimizar de Illustrator contienen metadatos, artefactos del editor y precisión redundante. Ejecutar SVGO elimina ese ruido — típicamente una reducción del 40–70 % antes de gzip. Por la red con Brotli, un SVG optimizado de 6 KB se reduce a aproximadamente 1,8 KB — más pequeño que un favicon codificado en Base64.

Análisis profundo del pipeline de renderizado

Ruta de renderizado PNG

1. Fetch — La respuesta HTTP llega al buffer de red.
2. Decodificación — El decodificador infla los datos DEFLATE en un bitmap RGBA raw.
3. Rasterización — El bitmap se sube a una textura GPU.
4. Compositing — El compositor dibuja la textura en la transformación CSS del elemento.

La memoria es fija: ancho x alto x 4 bytes. Un PNG 1920x1080 consume ~8,3 MB de memoria GPU independientemente de la transparencia.

Ruta de renderizado SVG

1. Fetch — El payload XML llega (a menudo más pequeño que una sola línea de escaneo PNG).
2. Parsing — El parser XML construye un subárbol DOM.
3. Estilo — La cascada CSS se aplica; viewBox y preserveAspectRatio se resuelven.
4. Pintura — Skia/Core Graphics teselan los paths en triángulos a la resolución actual del dispositivo.
5. Compositing — El resultado rasterizado entra al compositor como cualquier otra capa.

La memoria escala con la complejidad de paths, no con el tamaño del canvas. Un icono de 200 nodos: ~60 KB. Un mapa ilustrado de 15 000 nodos: varios MB con posibles bloqueos del hilo principal.

Tabla de benchmark: 15 escenarios reales

Datos benchmark Lighthouse (2025)

Probado en página de e-commerce: 12 iconos UI, 1 logo, 3 ilustraciones, 4 fotos de producto. Simulación Moto G Power en 4G.

Baseline todo-PNG:

Rendimiento: 62  |  LCP: 4,8s  |  TBT: 620ms  |  CLS: 0,08  |  Peso imágenes: 2,4 MB

Híbrido (SVG vectores + WebP fotos):

Rendimiento: 94  |  LCP: 1,9s  |  TBT: 180ms  |  CLS: 0,01  |  Peso imágenes: 380 KB

Delta: +32 puntos de rendimiento, -2,9s de LCP, -84 % de payload de imágenes — solo por la selección de formatos.

Patrones de código en producción

SVG responsive con dirección de arte

<picture>
  <source media="(max-width: 639px)" srcset="/img/logo-simple.svg" type="image/svg+xml">
  <source media="(min-width: 640px)" srcset="/img/logo-full.svg" type="image/svg+xml">
  <img src="/img/logo-full.png" alt="VectoSolve — herramientas SVG con IA"
       width="280" height="60" loading="eager" fetchpriority="high">
</picture>

Cambio de densidad para fallbacks raster

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.png" type="image/webp">
  <img src="/img/hero.png"
       srcset="/img/hero-1x.png 1x, /img/hero-2x.png 2x"
       sizes="(max-width: 768px) 100vw, 50vw"
       alt="Vista general del panel de producto"
       width="1200" height="630" loading="lazy" decoding="async">
</picture>

Accesibilidad: comparación lado a lado

SVG es arquitecturalmente superior para accesibilidad y cumplimiento WCAG 2.2 AA.

Formatos del futuro: AVIF, WebP y más allá

• WebP — 25–35 % más pequeño que PNG. 97 % de soporte en navegadores. La opción raster segura para 2025.
• AVIF — 40–60 % más pequeño que PNG. 92 % de soporte y subiendo. Ideal para fotografías.
• JPEG XL — Compresión superior con decodificación progresiva. Soporte en navegadores estancado. Vale la pena monitorear.

Ninguno de estos formatos reemplaza SVG para contenido vectorial. La estrategia ganadora: SVG para vector, AVIF/WebP para raster, PNG como fallback definitivo.

Uso de memoria: el coste oculto

En dispositivos móviles con memoria limitada (2–3 GB compartidos entre todas las pestañas), enviar un PNG hero de 2048x2048 cuando un SVG de 6 KB sería suficiente no es una optimización perdida — es un bug.

Conclusión: decisiones de ingeniería, no guerras de formatos

La pregunta PNG vs SVG no es cuestión de preferencia — es una decisión de ingeniería con consecuencias medibles para el rendimiento, la accesibilidad, la mantenibilidad y la experiencia de usuario. SVG gana para contenido vectorial en cada métrica que importa en 2025, mientras que los formatos raster modernos como AVIF y WebP han superado a PNG para contenido fotográfico.

Audita tus assets actuales. Ejecuta Lighthouse. Mide los tiempos de pintura. Luego convierte cada PNG elegible a SVG usando la vectorización IA de VectoSolve y observa cómo suben tus puntuaciones de rendimiento. El mejor formato de imagen es el que se ajusta al contenido — ahora tienes los benchmarks para demostrarlo.

Fuentes y lecturas adicionales

• MDN Web Docs — SVG — Referencia SVG autoritativa con datos de compatibilidad de navegadores
• Especificación W3C SVG 2 — Estándar oficial que define las capacidades SVG comparadas con formatos raster
• web.dev — Benchmarks de rendimiento comparando el impacto de formatos de imagen en Core Web Vitals
• CSS-Tricks: Using SVG — Casos de uso prácticos y marcos de decisión para elegir SVG vs raster
• Smashing Magazine — Análisis técnicos profundos sobre selección y optimización de formatos de imagen