SVG vs PNG/JPG: por qué el formato vectorial es esencial para el rendimiento y el SEO
Menos KB para descargar, renderizado nítido desde móvil hasta 4K, mejores Core Web Vitals. Aquí está el por qué desarrolladores y especialistas SEO están pasando sus logos e iconos a SVG.
Cómo aligerar un logo PNG o JPG a SVG (3 pasos)
No necesitas Illustrator. PixelToPath vectoriza tu archivo y te devuelve un SVG listo para integrar en el HTML.
Sube el PNG o JPG
Arrastra el logo, icono o pictograma que actualmente sirves en PNG o JPG. Cuanto más simple sea el trazo (fondo sólido, bordes definidos), más ligero será el SVG.
Elige el preajuste correcto
Blanco y Negro para un logotipo o un icono monocromático. Póster si el logo tiene algunos colores planos. Evita Foto: demasiados detalles añaden peso al SVG sin beneficio visual en un logo.
Integra el SVG en el sitio web
Descarga el archivo y sírvelo como imagen, sprite o SVG inline. Un solo archivo reemplaza las variantes @1x, @2x y @3x.
PNG y JPG: perfectos para fotos, demasiado pesados para la interfaz
PNG y JPG son formatos rasterizados: la imagen es una cuadrícula de píxeles. Un logo exportado como PNG de 512×512 «fotografía» cada punto. Para que se mantenga nítido en una pantalla Retina, a menudo tienes que servir una versión dos o tres veces más grande, lo que significa dos o tres veces más KB. El JPG comprime mejor las fotos, pero destruye colores planos, añade artefactos alrededor del texto y no soporta transparencia. Ninguno de los dos está diseñado para un logotipo o un icono que necesita mostrarse a 24 px en la navegación y a 240 px en el encabezado.
El SVG (Scalable Vector Graphics) describe formas a través de curvas y coordenadas, no por píxeles. Vectorizar un PNG con PixelToPath significa reemplazar un mapa de bits estático con un trazo que el navegador redibuja al tamaño exacto de la pantalla. El resultado: un archivo generalmente mucho más ligero, y la misma nitidez en móvil, escritorio y pantallas 4K.
Lo que el SVG cambia concretamente en un sitio
Para la interfaz, el SVG no es un «plus» estético. Es una palanca de rendimiento: menos bytes a través de la red, menos variantes para mantener, almacenamiento en caché más simple y un renderizado vectorial nativo en todos los navegadores modernos.
Los beneficios más visibles para un desarrollador o especialista SEO:
- Peso: un logo simple a menudo baja de 40 a 80 KB en PNG a unos pocos KB en SVG, y eliminas las exportaciones @2x / @3x
- Escalabilidad: un solo archivo, nítido a 16 px y a pantalla completa 4K, sin srcset ni media queries de imágenes
- Core Web Vitals: menos datos para descargar (LCP) y un espacio reservado estable a través del viewBox (CLS)
- SEO técnico: páginas más rápidas en móviles, un formato que Google puede interpretar y texto potencialmente presente en el SVG
PNG vs SVG: el peso de un logo no es trivial
Las imágenes siguen siendo una de las principales fuentes de peso de una página. Optimizamos las fotos en WebP, y nos olvidamos del logo del encabezado y de los veinte iconos PNG en el CSS. Sin embargo, estos archivos se repiten en todas las URL: cada milisegundo perdido se pierde en todo el sitio.
Órdenes de magnitud observados después de vectorizar con PixelToPath, en el escenario típico de un sitio web o aplicación web corporativa:
| Escenario | PNG / JPG | SVG |
|---|---|---|
| Logotipo de 512 px con transparencia | De 40 a 80 KB | De 2 a 12 KB según colores y nodos |
| El mismo logo servido a @2x (1024 px) para Retina | El peso se duplica y a veces se triplica | Un solo archivo, sin cambios |
| 20 iconos de interfaz exportados a @3x (72×72) | De 40 a 160 KB añadidos a la interfaz | Pocos KB en total |
| Logotipo de colores planos procedente de un JPG | Artefactos y halos en formas y texto | Bordes limpios y un archivo aún más ligero |
La regla es simple: cualquier forma, texto, pictograma o logotipo se beneficia de ser SVG. Las fotografías y capturas de pantalla deben mantenerse en JPG, WebP o AVIF. El SVG no es un reemplazo universal: es el formato correcto para la interfaz.
Escalabilidad: un archivo nítido desde el smartphone hasta el 4K
Un PNG solo es nítido a su resolución nativa. Al ampliarlo, ves píxeles. Al reducirlo bruscamente, el navegador tiene que volver a muestrearlo. De ahí la gimnasia de los archivos @1x, @2x, @3x, srcsets y densidades CSS. Cada nuevo punto de interrupción o nueva densidad de pantalla (Retina, teléfonos recientes, monitores 4K) requiere una nueva exportación o un archivo sobredimensionado «por si acaso».
Un SVG ignora esta restricción. El motor de renderizado calcula las curvas al tamaño CSS solicitado. Favicon de 32 px, logo de 48 px en la navegación, la misma marca a 400 px en el encabezado, proyección 4K: es el mismo archivo. Sin desenfoque, sin alias, sin segundas solicitudes para la versión de alta densidad. Para una biblioteca de componentes, también significa menos deuda: un icono, un archivo, todos los tamaños.
Core Web Vitals y SEO: por qué a Google le importa el formato
La velocidad en dispositivos móviles es un factor de clasificación. Los Core Web Vitals (LCP, INP, CLS) miden lo que el usuario experimenta. Reemplazar un logo PNG pesado o un montón de iconos rasterizados con SVG no transformará una página de 4 MB a 40 KB. En el diseño del sitio, el efecto es inmediato, especialmente en una red 4G o si el LCP está bloqueado por el logo del encabezado.
Concretamente, el formato vectorial ayuda a tres métricas, siempre y cuando mantengas razonable la complejidad del trazo:
- LCP (Largest Contentful Paint): si el elemento visible más grande es un logo o una ilustración plana, un SVG de unos pocos KB llegará antes que un PNG @2x de 150 KB. Menos congestión de red para el resto de la página
- CLS (Cumulative Layout Shift): un SVG con atributos width, height y viewBox reserva su cuadro tan pronto como se analiza el HTML. No hay necesidad de esperar a que se decodifique un mapa de bits para conocer la relación de aspecto, reduciendo así los saltos en el diseño
- INP y el hilo principal: un SVG simple (logo, icono) cuesta poco de renderizar. Por otro lado, evita SVG de «fotos» con miles de caminos: pueden pesar más que un PNG y hacer que el procesador trabaje duro. De ahí la ventaja de un trazo limpio a través de PixelToPath, en lugar de una copia píxel por píxel
- SEO más allá de la velocidad: Google indexa SVG. Un logo integrado puede tener un título accesible. Una imagen SVG con un atributo alt sigue siendo lo básico. Y una página más ligera reduce la tasa de rebote técnico, la señal de experiencia que las clasificaciones toman en cuenta
¿Por qué vectorizar con PixelToPath en lugar de exportar manualmente?
Ya tienes el PNG del cliente, no el archivo fuente de Illustrator. PixelToPath recrea trazos limpios, gratis y listos para la web.
SVG ligero y listo para usar
El motor produce caminos utilizables, no una fábrica de nodos. Ideal para un logo o icono que vas a servir en cada vista de página.
Totalmente gratis
Sin suscripción de diseño, sin marcas de agua en el SVG. Vectoriza toda la guía de estilo (logo, favicon, conjunto de iconos) a coste cero.
Privacidad de archivos
Los archivos de marca se procesan y luego se descartan. No se almacena nada, no se reutiliza nada. Adecuado para pautas de marca bajo acuerdos de confidencialidad.
Preajustes para logos y pictogramas
Blanco y Negro para el icono monocromático, Póster para un logo con colores planos. Tú controlas el nivel de detalle antes de exportar.
Procesamiento por lotes en escritorio
¿Un conjunto de iconos PNG para convertir a SVG? La aplicación de código abierto para Windows / Linux procesa los archivos offline, sin cuotas.
PNG, JPG, BMP, WebP
Una sola herramienta, ya sea que el logo venga como un PNG transparente, un JPG escaneado o una exportación WebP de Figma.
Dónde el SVG supera al PNG/JPG en un sitio real
Esto no es teórico. Aquí están los lugares donde el formato vectorial compensa de inmediato:
- Logo del encabezado y pie de página: un solo archivo, nítido en Retina, a menudo uno de los elementos más vistos, y a veces el LCP en una página de inicio minimalista
- Sistema de iconos: no más sprites PNG 1x/2x. Cada pictograma es un SVG (o un sprite SVG), estilizable con CSS (currentColor) sin una nueva exportación
- Favicon y apple-touch: un favicon moderno en SVG más un PNG de respaldo evita mantener un montón de tamaños como 16, 32, 180 px
- Ilustraciones de interfaz y estados vacíos: los dibujos vectorizados planos permanecen nítidos a pantalla completa, sin costar el peso de una imagen de encabezado
- Landing page para SEO: cada KB ahorrado en el diseño mejora Lighthouse, PageSpeed Insights y la experiencia móvil, señales que las clasificaciones agregan
Guarda JPG/WebP para las fotos. Cambia logos, pictogramas e ilustraciones planas a SVG. Es la división que los sitios más rápidos ya están aplicando.
Guías de conversión relacionadas
Vectoriza tus archivos, luego profundiza en el formato que te importa.
Preguntas Frecuentes
¿Un SVG es siempre más ligero que un PNG o un JPG?
Para un logo, un icono o una ilustración con colores planos: sí, casi siempre, especialmente si comparas el PNG con su versión Retina. Para una fotografía, no: el SVG «foto» se convierte en una nube de caminos más pesada que un JPG o WebP. Vectoriza la interfaz, comprime las fotos.
¿El SVG realmente mejora los Core Web Vitals y el SEO?
Mejora lo que las imágenes de la interfaz pueden mejorar: menos bytes (LCP si el logo o la ilustración es el elemento principal), un cuadro de renderizado predecible (CLS), menos variantes para descargar. Google utiliza la velocidad como señal, especialmente en móviles. No es un atajo de posicionamiento mágico, es higiene técnica que se mide en PageSpeed Insights.
¿Deberíamos reemplazar todas las imágenes del sitio web por SVG?
No. Fotos, capturas, texturas, degradados complejos: JPG, WebP o AVIF. SVG para logos, iconos, diagramas, pictogramas, ilustraciones planas. Un SVG demasiado detallado puede perjudicar el INP. El preajuste Foto de PixelToPath es para estilizar, no para reemplazar un JPEG de contenido.
¿Cómo integrar un SVG sin provocar CLS?
Siempre da una anchura y una altura (o un aspect-ratio CSS) que correspondan al viewBox. Con una etiqueta de imagen (src, width, height, alt), el navegador reserva el espacio antes de la descarga. En SVG inline, conserva el viewBox y evita inyectar el código después del primer renderizado sin dimensiones.
¿Cómo obtener un SVG de un logo a partir de un PNG con PixelToPath?
Abre la herramienta en línea, sube el PNG (idealmente con fondo transparente, bastante grande), elige Blanco y Negro o Póster, ajusta el detalle y luego convierte. Abre el SVG en el navegador o Figma para verificar los bordes, luego sírvelo en producción. Gratis, sin cuenta, los archivos no se conservan.
Pasa tu logo PNG a SVG, mide el peso
Sube el archivo actual, descarga el SVG, compara los KB. Gratis, sin registro. El primer pilar de los Core Web Vitals a menudo es ese.
Apoya el desarrollo de código abierto
PixelToPath es de uso gratuito. Si esta herramienta te ayudó a ahorrar tiempo, considera invitarme a un café.
❤️ Donar vía PayPal