SVG vs. PNG vs. WebP: ¿Cuál es el mejor para gráficos web?
La respuesta corta (y por qué es complicado)
Aquí no hay un único ganador. SVG, PNG y WebP tienen cada uno un trabajo específico, y elegir el incorrecto te costará caro: en archivos de tamaño inflado, mala calidad de imagen o dolores de cabeza por compatibilidad con navegadores. Servir un logo como un PNG de 340 KB cuando podría haber sido un SVG de 4 KB es un verdadero impuesto al rendimiento para tus usuarios. Por otro lado, intentar guardar una fotografía detallada como SVG no es solo un error teórico; es completamente inutilizable, ya que SVG no tiene forma de representar los millones de píxeles de una foto. Este artículo desglosa cada formato basándose en lo que realmente importa para los proyectos web: cómo escalan, el tamaño final del archivo, el soporte de navegadores, la transparencia y las tareas específicas en las que cada formato brilla. También cubriremos flujos de trabajo de conversión concretos, incluyendo lo que puedes hacer con CocoConvert y dónde podrías necesitar buscar otras herramientas.
SVG: La herramienta correcta para logos, iconos e ilustraciones
SVG significa *Scalable Vector Graphics* (Gráficos Vectoriales Escalables), pero lo que realmente quiere decir es *sin píxeles*. Es un formato basado en XML que utiliza trazados y formas matemáticas para describir una imagen. Como son solo matemáticas, un SVG se renderiza con una nitidez perfecta a cualquier tamaño, desde un diminuto favicon de 16×16 hasta un monitor 5K. Esto lo convierte en la única opción sensata para logos, iconos, gráficos y cualquier ilustración construida con líneas y formas limpias. Los tamaños de archivo para SVGs simples son increíblemente pequeños. Un logo de empresa típico, una vez optimizado, puede ocupar tan solo de 2 a 8 KB. Cuando lo pasas por un optimizador como SVGO (que CocoConvert utiliza automáticamente para las exportaciones a SVG), a menudo puedes reducir otro 20-40% eliminando basura del editor, combinando trazados y reduciendo la precisión decimal de seis a dos cifras. Aquí es donde el SVG se vuelve realmente potente: admite interactividad y animación a través de CSS y JavaScript, algo que PNG y WebP no pueden ni soñar. Puedes cambiar el color de un icono al pasar el ratón por encima con una sola línea de CSS: `svg path { fill: #0057ff; }`. Ese tipo de flexibilidad es revolucionario para los componentes de UI modernos. Pero las limitaciones son reales. Ni se te ocurra usar SVG para fotografías. Intentar exportar una foto como SVG te dará un archivo gigantesco y de carga lenta o un desastre abstracto y posterizado. Además, como los archivos SVG son solo texto, revelan tus trazados originales; no es ideal si tu ilustración es una obra de arte propietaria que no quieres que se copie fácilmente. Finalmente, los SVG extremadamente complejos, como un mapa detallado con miles de nodos individuales, pueden ser en realidad más lentos de renderizar para un navegador que una imagen rasterizada bien comprimida.
PNG: Calidad sin pérdidas cuando necesitas cada píxel
PNG, o *Portable Network Graphics*, es un formato rasterizado sin pérdidas (*lossless*). Eso significa que guarda cada píxel exactamente como es, sin ningún artefacto de compresión. Esta fidelidad perfecta es la razón por la que es el estándar para capturas de pantalla, maquetas de UI y cualquier imagen que contenga texto nítido, donde necesitas una precisión de píxel perfecta y una transparencia limpia. El canal alfa de 8 bits de PNG proporciona 256 niveles de transparencia, lo que te da bordes suaves y difuminados. La contrapartida es el tamaño del archivo. Una captura de pantalla de 1200×800 como PNG puede ocupar fácilmente entre 800 KB y 1,2 MB. La compresión DEFLATE de PNG no tiene pérdidas, pero no es muy agresiva. Para las fotos, los PNG son consistentemente de dos a cuatro veces más grandes que los JPEG o WebP de la misma calidad visual. El PNG realmente brilla en flujos de trabajo que requieren múltiples ediciones. Como no tiene pérdidas, puedes abrir, editar y volver a guardar un archivo PNG cien veces sin degradar su calidad. Cualquiera que haya visto un JPEG autodestruirse en un mar de artefactos después de unos pocos guardados conoce este dolor. Si estás creando un recurso que otra persona editará más tarde, como un elemento de UI para que un desarrollador lo recorte, el PNG es el formato más seguro para entregar. Oirás hablar de 'PNG-8' y 'PNG-24'. PNG-8 está limitado a 256 colores (como un GIF) y funciona para gráficos planos y simples. PNG-24 admite 16 millones de colores más el canal alfa completo para la transparencia. La mayoría de las herramientas usan PNG-24 por defecto. Cuando exportas desde CocoConvert, producirá un PNG-24 a menos que la imagen de origen tenga una paleta simple, en cuyo caso podría usar PNG-8 automáticamente para optimizar el tamaño del archivo. La principal debilidad de PNG es su falta de soporte nativo para animación. Aunque existen los PNG animados (APNG), el soporte de las herramientas es irregular. Para animaciones, es mejor que uses WebP o, idealmente, una animación SVG/CSS.
WebP: El caballo de batalla de la compresión moderna
Desarrollado por Google en 2010, WebP tuvo una adopción lenta, pero finalmente se generalizó cuando Safari 14 añadió soporte alrededor de 2020. A mediados de 2026, todos los navegadores principales (Chrome, Firefox, Safari y Edge) soportan WebP, cubriendo aproximadamente el 97% de los usuarios globales según datos de caniuse.com. WebP es un todoterreno, ya que admite compresión con y sin pérdidas, transparencia e incluso animación. Puede reemplazar eficazmente a JPEG, PNG y GIF para la mayoría de los usos web. Su compresión es el plato fuerte: las imágenes WebP con pérdidas (*lossy*) son típicamente un 25-35% más pequeñas que los JPEG con la misma calidad visual, mientras que los WebP sin pérdidas (*lossless*) son aproximadamente un 26% más pequeños que los PNG. Estas no son solo cifras de marketing; provienen de pruebas a gran escala de Google y están confirmadas por benchmarks independientes. Llevémoslo a la práctica. Una imagen de cabecera (*hero image*) de 180 KB guardada como JPEG podría convertirse en un WebP con pérdidas de 130 KB con calidad 80. Súbela a calidad 85 y podría ser de 145 KB, todavía más pequeña y con aún más detalle. Puedes encontrar estos ajustes en las opciones de WebP de CocoConvert, bajo el deslizador 'Calidad de salida'. Un valor de 75-85 es un excelente punto de partida para las fotos, mientras que podrías subirlo a 90+ para recursos de UI donde la nitidez es crítica. Por supuesto, WebP no es perfecto. Para empezar, es estrictamente para pantallas; su falta de soporte CMYK lo convierte en una opción inviable para flujos de trabajo de impresión. También tuvo problemas iniciales con software más antiguo: Adobe Photoshop no tuvo soporte nativo hasta CC 2022. Para gráficos planos y simples, su ventaja sobre PNG es mínima, y para logos e iconos, SVG sigue siendo el rey indiscutible de los tamaños de archivo pequeños.
Cara a cara: Benchmarks de tamaño de archivo y calidad
Las comparaciones abstractas solo llegan hasta cierto punto. Aquí vemos cómo se comportan los tres formatos en dos casos de prueba representativos. **Prueba 1: El logo de una empresa (colores planos, fondo transparente, 400×200 px)** - SVG (optimizado con SVGO): 3,8 KB - PNG-24: 12,4 KB - WebP sin pérdidas: 9,1 KB - WebP con pérdidas (calidad 90): 7,2 KB (con un ligero bandeado de color en los bordes nítidos) Para un logo, SVG gana por goleada. WebP sin pérdidas es un digno segundo lugar si SVG no es una opción por alguna razón. PNG es el más grande pero ofrece una fidelidad perfecta. **Prueba 2: Una fotografía de producto (a todo color, sin transparencia, 1200×800 px)** - SVG: No aplicable (no puede representar datos fotográficos de forma significativa) - PNG-24: 1,14 MB - JPEG (calidad 85): 187 KB - WebP con pérdidas (calidad 80): 134 KB - WebP con pérdidas (calidad 75): 108 KB (se aprecia una ligera falta de nitidez al inspeccionar de cerca) Para las fotografías, WebP es el claro ganador en cuanto a tamaño de archivo. Un PNG tan grande solo debería usarse como archivo maestro para futuras ediciones, nunca en una página web en producción. Aquí hay una limitación práctica de CocoConvert que debes conocer: no puedes generar una versión WebP y un PNG de respaldo (*fallback*) en una sola tarea de exportación. Necesitarás ejecutar dos conversiones separadas y luego implementar el elemento HTML `<picture>` tú mismo para servir el formato correcto. Es un vacío en el flujo de trabajo, y es mejor que lo sepas ahora y no que lo descubras a mitad de proyecto.
Soporte de navegadores, fallbacks y el elemento <picture>
SVG y PNG tienen soporte universal en navegadores desde hace más de una década. No necesitas pensar en alternativas. WebP ahora también es ampliamente compatible, pero podrías encontrar problemas si tienes que dar soporte a usuarios con navegadores corporativos antiguos o aplicaciones legacy con vistas web incrustadas. La solución estándar es el elegante elemento HTML `<picture>`. Te permite listar múltiples fuentes, y el navegador simplemente elige la primera que entiende. ```html <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.png" alt="Product hero image"> </picture> ``` El navegador lee de arriba a abajo, usando la primera fuente compatible. Este patrón no añade una sobrecarga real y te da los beneficios de rendimiento de WebP con la fiabilidad a prueba de balas de PNG como red de seguridad. Para SVG, la mayor trampa de compatibilidad no son los navegadores, son los clientes de correo electrónico. El soporte para SVG en emails HTML es un desastre; Outlook en Windows simplemente mostrará una imagen rota. En serio, no uses SVGs en plantillas de email. Simplemente usa un PNG y ahórrate los tickets de soporte. Para páginas web y aplicaciones, SVG es perfectamente seguro. Una nota rápida sobre SVG y la Política de Seguridad de Contenido (CSP): si incrustas un SVG directamente en tu HTML, hereda la CSP de la página. Si lo cargas como un archivo externo a través de una etiqueta `<img>`, no puede ejecutar scripts. Esta es una característica de seguridad. Si tu SVG necesita ser interactivo con JavaScript, debes insertarlo directamente en el HTML (*inline*) o cargarlo usando una etiqueta `<object>`.
Tomando la decisión correcta: Un marco de decisión
Después de todos los benchmarks y advertencias, el árbol de decisiones práctico es así: **Usa SVG cuando:** El gráfico es un logo, icono, gráfico o cualquier ilustración hecha de formas y trazados. Tienes un archivo vectorial de origen de una herramienta como Illustrator, Figma o Inkscape. Necesitas que se vea nítido en todas las densidades de pantalla sin crear recursos @2x y @3x por separado. Quieres controlar colores o añadir efectos hover con CSS. **Usa PNG cuando:** La imagen es una captura de pantalla de la interfaz de usuario o contiene texto nítido donde la compresión con pérdidas se vería terrible. Necesitas transparencia y no puedes usar WebP. El archivo debe ser un maestro sin pérdidas para futuras ediciones. Estás enviando recursos para una campaña de email o a un cliente que podría no tener software de imagen moderno. **Usa WebP cuando:** La imagen es una fotografía u otro gráfico rasterizado complejo para un sitio web moderno. Tu máxima prioridad es la mejor relación posible entre tamaño de archivo y calidad. Puedes implementar el elemento `<picture>` para fallbacks, o tu CMS/CDN (como Cloudflare Images, Imgix o Cloudinary) lo gestiona por ti sirviendo WebP automáticamente a los navegadores que lo soportan. Para convertir entre estos formatos en CocoConvert, solo tienes que subir tu archivo, elegir el formato de destino en el menú desplegable y descargar. Si vas a usar WebP, puedes ajustar el deslizador de 'Calidad de salida'; el valor predeterminado de 85 es un buen punto de partida para las fotos. Para trabajos por lotes, como convertir una carpeta entera de PNG a WebP, el plan Pro admite hasta 50 archivos a la vez. La optimización de SVG es automática en todas las exportaciones a SVG, así que no hay nada que configurar. Hay un caso en el que ninguno de estos es la mejor opción: las animaciones. Es hora de decirlo: para su uso en producción web, el GIF está muerto. A pesar de su arraigo cultural, crea archivos de 3 a 5 veces más grandes que una animación WebP. Para bucles cortos y simples, usa animaciones CSS (cero sobrecarga de imagen). Para gráficos de movimiento vectoriales complejos, usa una animación Lottie/SVG. Usa la animación WebP solo como último recurso para contenido rasterizado.