Qué es realmente cada formato
Antes de comparar, ayuda entender qué almacena cada formato — porque resuelven problemas fundamentalmente diferentes.
SVG — Scalable Vector Graphics
SVG es un lenguaje de marcado basado en XML, no una cuadrícula de píxeles. Describe formas, trazados y texto como instrucciones matemáticas. Un círculo en SVG es literalmente <circle cx="50" cy="50" r="40"/>. Se renderiza perfectamente en cualquier tamaño y es completamente accesible para lectores de pantalla.
PNG — Portable Network Graphics
PNG almacena una cuadrícula de píxeles sin pérdida con soporte completo del canal alfa. Destaca en imágenes con bordes nítidos, colores planos y texto. La desventaja: los tamaños de archivo son grandes para contenido fotográfico.
WebP — el formato moderno de Google
WebP admite compresión con y sin pérdida, transparencia y animación. En modo sin pérdida produce archivos 25–35% más pequeños que PNG equivalentes. La compatibilidad es universal en Chrome, Firefox, Safari (desde 2020) y Edge.
Matriz de casos de uso: qué formato gana dónde
El formato correcto depende del tipo de asset, no de una preferencia universal:
| Tipo de asset | SVG | PNG | WebP |
|---|---|---|---|
| Logo / wordmark | ✅ Mejor | ⚠ Alternativa | ❌ Evitar |
| Icono UI (inline) | ✅ Mejor | ⚠ Aceptable | ❌ Evitar |
| App icon / favicon | ✅ Fuente | ✅ Bueno (ICO) | ❌ Sin soporte |
| Ilustración plana | ✅ Mejor | ⚠ Archivos grandes | ✅ Bueno |
| Captura / UI | ❌ Herramienta incorrecta | ✅ Mejor | ✅ Excelente |
| Fotografía | ❌ Herramienta incorrecta | ⚠ Demasiado pesado | ✅ Mejor |
| Gráfico animado | ✅ CSS/JS | ❌ Sin animación | ✅ WebP anim |
| Imagen de email | ❌ Soporte deficiente | ✅ Universal | ⚠ Soporte limitado |
Por qué SVG es superior para logos e iconos
El argumento contra SVG suele ser el tamaño del archivo. Pero para logos e iconos de UI, ese argumento no aplica:
- Independencia de resolución: un solo archivo SVG sirve para retina móvil, escritorio 4K e impresión en gran formato. Con PNG necesitas variantes @1x, @2x, @3x.
- Tematización CSS: los trazados SVG heredan
currentColor, por lo que un solo archivo de icono se adapta al modo oscuro y estados hover sin nueva exportación. - Interacción inline: incrustado en HTML, los elementos SVG son parte del DOM — puedes animar trazados individuales y adjuntar escuchadores de eventos.
- Accesibilidad: SVG admite elementos
<title>y<desc>que los lectores de pantalla consumen directamente. - Eficiencia de compresión: un SVG de logo típico comprimido con gzip es de 1–4 KB. Un PNG @2x del mismo logo raramente está por debajo de 20 KB.
Cuando necesitas una versión raster — para una plataforma que no acepta SVG, para una imagen OG, o para un proveedor de impresión — la conversión está a un clic.
Herramienta gratuita Convertidor SVG a PNG Convierte cualquier SVG a un PNG perfecto en píxeles a cualquier resolución. Compatible con fondo transparente y factores de escala personalizados.Cuándo WebP supera a PNG en fotografía e ilustraciones
Para contenido fotográfico e ilustraciones raster complejas, WebP tiene una ventaja clara sobre PNG y una ventaja competitiva sobre JPEG:
La diferencia de compresión no es académica. Una imagen hero de 800 KB en PNG típicamente baja a menos de 200 KB como WebP con pérdida con calidad perceptualmente idéntica. Impacto directo en Core Web Vitals — específicamente Largest Contentful Paint (LCP).
- WebP con pérdida vs JPEG: misma calidad percibida, ~25–30% menos de tamaño. Para contenido fotográfico, prefiere WebP sobre JPEG en todos los contextos modernos.
- WebP sin pérdida vs PNG: misma fidelidad perfecta de píxeles, ~25–35% más pequeño. Para capturas de pantalla e ilustraciones planas con alfa, WebP sin pérdida es la mejor opción.
- WebP animado vs GIF: compresión dramáticamente mejor para animación. La animación WebP es la respuesta moderna si necesitas animación sin JavaScript.
- La excepción PNG: mantén PNG para assets que necesitan máxima compatibilidad con herramientas — exportaciones de Figma, archivos fuente de Photoshop y workflows de entrega de diseño.
La advertencia principal: WebP tiene soporte limitado en algunos clientes de email y versiones anteriores de las aplicaciones nativas de Apple. Para entrega web, ya no hay razón para elegir PNG sobre WebP.
La excepción favicon: por qué ICO aún existe
Los favicons siguen reglas diferentes. El clásico formato favicon.ico incrusta múltiples resoluciones (16×16, 32×32, 48×48) en un solo archivo. La práctica moderna superpone tres declaraciones: ICO para navegadores heredados, PNG 192×192 para Android, y favicon SVG para navegadores que lo admiten.
La fuente para todos estos debería ser tu SVG original. Un generador de favicon adecuado lo convierte a todos los formatos necesarios en un solo paso.
Herramienta gratuita Generador de Favicon Sube un SVG o PNG y obtén un paquete de favicon completo: ICO, 16×16, 32×32, 192×192, 512×512 y Apple Touch icon — listo para pegar en tu HTML.Email vs web vs app — el mismo asset, reglas diferentes
Los clientes de email son el entorno más conservador. SVG está bloqueado por Gmail, Outlook y Apple Mail. WebP no es compatible en Outlook en Windows. La opción segura: PNG para logos, JPEG para fotografía. Mantén los tamaños de archivo por debajo de 100 KB por imagen.
Web
La web moderna tiene la mayor flexibilidad. Usa SVG para logos, iconos e ilustraciones vectoriales. WebP (con pérdida) para fotografía y imágenes raster complejas. WebP (sin pérdida) para capturas de pantalla. Fallback PNG solo si tu tráfico lo requiere.
App nativa (iOS / Android)
iOS y Android ambos admiten SVG a través de sus formatos de gráficos vectoriales. En la práctica, las pipelines de assets generan múltiples densidades PNG (1x, 2x, 3x) a partir de una fuente vectorial. WebP es compatible nativamente con Android 4.0+ e iOS 14+.
Incrustación Base64: cuando el tamaño de entrega no importa
Hay un escenario específico donde conviertes una imagen a Base64 y la incrustas directamente en HTML, CSS o JavaScript: cuando el asset es diminuto, debe estar disponible sin una solicitud HTTP adicional. Los iconos SVG pequeños en CSS background-image y spinners de carga son los casos canónicos.
La codificación Base64 aumenta el tamaño del archivo aproximadamente un 33%, por lo que solo es apropiada para assets pequeños (menos de ~10 KB). Para cualquier cosa más grande, la solicitud adicional es más barata que el overhead de codificación.
Herramienta gratuita Convertidor de Imagen a Base64 Convierte cualquier PNG, SVG, WebP o JPEG a un URI de datos Base64 — listo para pegar en CSS, HTML o JavaScript.El marco de decisión: un diagrama de flujo en prosa
Aplica estas reglas en orden. La primera coincidencia gana:
- ¿El asset comenzó como un vector? (logo, icono, ilustración en Figma/Illustrator) → Usa SVG. Solo convierte a PNG/WebP cuando el entorno destino no admita SVG.
- ¿Es una fotografía o una imagen de gradiente compleja? → Usa WebP con pérdida. Recurre a JPEG solo para email o herramientas que rechacen WebP.
- ¿Es una captura de pantalla, captura de UI o ilustración plana con alfa? → Usa WebP sin pérdida. PNG como fallback para email.
- ¿Es un favicon? → Genera un paquete ICO + PNG + SVG desde tu fuente vectorial. Nunca uses WebP para favicons.
- ¿Va en un email HTML? → Usa PNG (logos) o JPEG (fotos). Evita SVG y WebP por completo.
- ¿Necesita incrustarse sin una solicitud HTTP? → Convierte a Base64, pero solo si el asset está por debajo de ~10 KB.
Preguntas frecuentes
¿Cuál es la diferencia principal entre SVG y PNG? +
SVG es un formato vectorial — almacena formas como instrucciones matemáticas y escala sin pérdida de calidad. PNG es un formato raster — almacena una cuadrícula de píxeles fija. SVG es ideal para logos e iconos; PNG es apropiado cuando necesitas una instantánea de píxeles precisos.
¿WebP admite transparencia como PNG? +
Sí. Tanto WebP sin pérdida como con pérdida admiten un canal alfa completo, lo que lo convierte en un reemplazo viable para PNG en cualquier contexto que admita el formato.
¿SVG siempre es un archivo más pequeño que PNG? +
No siempre. Los logos e iconos simples son casi siempre más pequeños como SVG. Las ilustraciones SVG complejas con miles de trazados pueden superar los tamaños raster equivalentes.
¿Por qué no se usa WebP en los emails? +
Outlook en Windows usa un antiguo motor de Internet Explorer sin soporte WebP. Gmail y Apple Mail admiten WebP en algunas versiones pero no en todas. PNG y JPEG siguen siendo las únicas opciones universalmente seguras.
¿Puedo usar SVG como favicon? +
Sí, los navegadores modernos (Firefox, Chrome 117+, Edge 79+) admiten favicons SVG. Sin embargo, Safari no admite favicons SVG a partir de 2025, por lo que aún necesitas un fallback ICO o PNG.
¿Cuándo debería convertir SVG a PNG? +
Convierte SVG a PNG cuando: la plataforma destino bloquea SVG, necesitas una miniatura de resolución fija para una imagen OG, un proveedor de impresión requiere entrada raster, o estás generando un paquete de favicon con formato ICO.
¿PixCode admite todas estas conversiones? +
PixCode ofrece un convertidor de SVG a PNG, un Generador de Favicon y un convertidor de Imagen a Base64. Todas las herramientas son gratuitas y funcionan completamente en el navegador.