Existen docenas de tipos de archivos de imagen, cada uno de los cuales varía en función del tipo de compresión, el formato y la compatibilidad con el navegador. Pero dos de los más utilizados son los formatos SVG y PNG.
Estos dos tipos de archivo no podrían ser más diferentes: cada uno de ellos es más adecuado para situaciones específicas. Ciertamente, no son intercambiables en todos los aspectos, pero puedes encontrar que los SVG pueden realizar tareas específicas mejor que la imagen PNG estándar.
Aprende la diferencia entre SVG y PNG y dónde se aplican mejor en tu sitio web.
Mira nuestro Videotutorial de SVG vs PNG
¿Qué es el SVG?
SVG significa Scalable Vector Graphics (gráficos vectoriales escalables), y es el formato de archivo vectorial más utilizado en la web. Vamos a desglosarlo:
- Escalable: Los SVG se pueden redimensionar hacia arriba o hacia abajo sin dañar la calidad de la imagen. Será perfectamente nítida y clara, independientemente de su tamaño.
- Vectorial: La mayoría de los tipos de archivos de imagen contienen píxeles. Los vectores son esencialmente trozos de código que representan una imagen en tiempo real, convirtiéndola en los píxeles que ves en tu pantalla. Aunque muestran la misma imagen, lo que ocurre en el fondo es muy diferente.
- Los gráficos: Aunque no sea tan conocido, SVG es un tipo de archivo de imagen como PNG, JPEG o GIF. Sólo que hace las cosas de forma un poco diferente.
Los vectores son piezas de código escritas en XML que representan formas, líneas y colores para explicar su funcionamiento.
Aunque crear una imagen con nada más que código es totalmente posible, la mayoría de la gente utiliza un editor de gráficos vectoriales como Inkscape o Adobe Illustrator. También puedes convertir PNG u otras imágenes de trama en SVG, pero los resultados no siempre son buenos.
Cuando se carga la página, este código se convierte en gráfico, por lo que no puedes distinguir inmediatamente un SVG de un PNG. Pero como los SVG son simplemente líneas de código convertidas en píxeles, eso significa que pueden escalar a cualquier resolución -grande o pequeña- sin perder calidad.
El SVG también admite animación y transparencia, lo que lo convierte en un formato de archivo versátil.
El único problema es que no se utiliza tanto como los formatos más estándar, como el PNG, por lo que es menos compatible con los navegadores y dispositivos más antiguos, y no siempre es fácil subirlo a tu sitio y conseguir que se muestre correctamente.
Ventajas y desventajas de SVG
Aunque todavía no se utilizan tanto como los tipos de archivos de trama como PNG, los gráficos vectoriales están ganando popularidad rápidamente. Hacen algunas tareas esenciales que las imágenes de trama no pueden hacer. He aquí por qué la gente adora los SVG.
- Las imágenes SVG son escalables. Puedes diseñarlas a cualquier resolución, y su tamaño aumentará o disminuirá sin dañar la calidad ni pixelarse. Con las imágenes de trama, tienes que saber qué tamaño quieres desde el principio, o podrías arriesgarte a hacer la imagen demasiado grande o demasiado pequeña.
- Los SVG siempre tienen un aspecto nítido y bello, ya que nunca experimentan pérdida de calidad. Las imágenes rasterizadas pueden empezar a verse borrosas incluso cuando se redimensionan ligeramente.
- Como los SVG son sólo código, su tamaño de archivo es mínimo y está bien optimizado. También existen optimizadores de SVG para hacerlos aún más manejables. Es probable que tu sitio se cargue un poco más rápido si los utilizas.
- A diferencia de los PNG, los SVG son compatibles con la animación.
El SVG tiene bastantes ventajas sobre el PNG, desde ser escalable hasta tener un tamaño más pequeño, pero no es mejor en todas las situaciones. Esto es lo malo de los tipos de archivos vectoriales.
- Aunque los SVG son compatibles con los principales navegadores modernos, puedes encontrarte con problemas de compatibilidad al renderizarlos en navegadores y dispositivos más antiguos. Si una parte importante de tus visitantes los utiliza, el cambio podría ser una mala idea.
- Los SVG son más difíciles de trabajar, ya que requieren programas especiales para su creación y edición. Aunque puedes diseñarlos sólo con XML, esto no siempre es factible. Las herramientas premium como Adobe Illustrator pueden ser caras.
- Los SVG no son tan fáciles de incrustar como los PNG. Si utilizas WordPress, la biblioteca multimedia por defecto no los admite, por lo que necesitarás un plugin para poder subirlos.
- Los SVG deben ser renderizados por el navegador cuando se carga la página, por lo que utilizar un exceso de ellos o un archivo grande con muchos vectores puede poner a prueba el dispositivo.
Cuándo usar SVG en lugar de PNG
Aunque definitivamente no deberías convertir todos tus PNG en SVG, los gráficos vectoriales pueden ser un excelente sustituto de algunas imágenes.
Las imágenes SVG funcionan excepcionalmente para gráficos decorativos de sitios web, logotipos, iconos, gráficos y diagramas, y otras imágenes sencillas. Consulta nuestra página de inicio para ver un excelente ejemplo de arte vectorial en acción.
Sin embargo, no funcionan tan bien con imágenes complejas que implican muchos colores y formas, como capturas de pantalla, fotografías e incluso obras de arte detalladas. Aunque es posible convertir cualquier imagen en SVG, los navegadores no siempre manejan bien los vectores complejos con cientos de colores, ya que tienen que renderizarse cuando se carga la página.
Además, las ilustraciones SVG pueden ser hermosas, pero el diseño de imágenes complejas requiere mucho tiempo, esfuerzo y dominio de herramientas de edición avanzadas. Mantén la sencillez si quieres crear tus imágenes vectoriales.
Si tienes imágenes detalladas, quédate definitivamente con PNG.
Sin embargo, los SVG son mejores para el diseño web responsive y retina-ready debido a su escalabilidad y falta de degradación de la calidad. Además, admiten la animación mientras que el PNG no, y los tipos de archivos de trama que admiten la animación como el GIF, el APNG y el WebP tienen todos sus problemas.
Para gráficos sencillos que puedan requerir animación y que tengan la garantía de escalar bien en cualquier tamaño de pantalla, utiliza SVG.
¿Qué es PNG?
PNG son las siglas de Portable Network Graphics, y este nombre se refleja en lo extendido que está este tipo de archivo. Cualquiera que haya utilizado alguna vez un ordenador probablemente haya trabajado con PNG, ya que es el tipo de archivo más común en Internet junto al JPEG.
El PNG es un tipo de archivo de imagen de trama, similar a los formatos de imagen más comunes. Eso significa que está formado por píxeles, los mismos pequeños puntos que se muestran en tu monitor o pantalla. Aunque esto facilita su visualización, también significa que la calidad de la imagen depende de la resolución, es decir, de cuántos píxeles tenga la imagen.
Así que si aumentas o reduces el tamaño de una imagen rasterizada, la calidad se verá afectada. A veces el daño es insignificante, especialmente cuando se reduce la escala, y a veces puede hacer que una imagen sea borrosa y completamente inutilizable.
Aun así, la prevalencia del PNG lo convierte en un buen candidato para el uso general. Este tipo de archivo admite la transparencia, pero no la animación.
Ventajas y desventajas de PNG
¿Qué hace que el PNG sea el formato de archivo de imagen más utilizado en Internet? Estas son las ventajas:
- Los archivos PNG son fácilmente editables y se abren en cualquier herramienta común de edición de imágenes. No es necesario pagar por programas avanzados para crear o modificar una imagen PNG; como mucho, puedes necesitar descargar un editor gratuito como GIMP.
- Ya sea que codifiques desde cero o utilices el gestor de medios de WordPress, mostrar imágenes PNG en tu sitio es una tarea sencilla.
- El PNG utiliza una compresión sin pérdidas que le da un aspecto más nítido que los JPEG de compresión con pérdidas. Sin embargo, esto tiene un coste de tamaño de archivo mayor, y no se puede comparar con las imágenes vectoriales.
Por otro lado, el formato PNG se creó hace décadas y tiene varios defectos notables que no se han actualizado para la era moderna.
- No puedes cambiar el tamaño de los archivos PNG sin perder calidad. Tienes que planificar con cuidado cuando diseñes gráficos rasterizados y asegurarte de que tienen el tamaño adecuado, o puedes acabar perdiendo el tiempo haciendo imágenes inservibles.
- Los PNG son muy grandes debido a su compresión sin pérdidas. Por tanto, pueden ralentizar tu sitio web. Para solucionarlo hay que comprimirlo aún más y dañar la calidad.
- Hacer que las imágenes estén «listas para la retina» es más tedioso con los PNG y es más probable que provoquen borrosidad.
- El PNG no admite la animación. Otros tipos de archivos rasterizados animados, como los GIF, pueden tener graves problemas; por ejemplo, los GIF son de muy baja calidad y sólo admiten 256 colores.
Cuándo usar PNG en lugar de SVG
El PNG es el tipo de archivo más común por una razón: es muy versátil y se adapta a casi cualquier situación. Sólo hay que tener en cuenta algunos defectos al utilizarlo, como su gran tamaño de archivo y su falta de escalabilidad.
Los PNG son adecuados para mostrar imágenes detalladas, obras de arte y fotografías, todo lo que una imagen vectorial no puede manejar. Cualquier cosa con cientos de colores y una gran resolución debería ser un PNG.
Eso no quiere decir que no puedas utilizar los PNG para imágenes más sencillas, como logotipos y gráficos decorativos, pero los SVG serían más adecuados para esa tarea.
Cuando no estés seguro de si una plataforma manejará el nuevo tipo de archivo SVG, menos compatible, el PNG es el camino a seguir, aunque sólo sea por seguridad.
Por ejemplo, no puedes subir SVG a la mayoría de las redes sociales. Y como algunos clientes de correo electrónico pueden tener problemas con los vectores, normalmente se recomienda utilizar PNG en las plantillas de correo electrónico.
En general, los PNG funcionan bien con cualquier imagen compleja y no animada, especialmente las que requieren transparencia. Puedes utilizarlo prácticamente en cualquier sitio; sólo que a veces un SVG sería más adecuado.
Recuerda que siempre puedes utilizar los fallbacks PNG si tu SVG no se carga, por lo que normalmente es seguro optar por los vectores incluso si una parte importante de tu base de usuarios se ha quedado con dispositivos o navegadores antiguos.
¿Cuál es mejor: SVG o PNG?
Ningún tipo de archivo es mejor o peor que el otro; cada uno tiene sus limitaciones. Aunque el SVG supera al PNG en varias áreas, el PNG es mucho mejor para manejar ciertas cosas.
En general, sin embargo, deberías utilizar SVG siempre que sea apropiado y usar PNG en todas las demás situaciones que los vectores no puedan manejar. Técnicamente puedes utilizar cualquiera de los dos en estos casos, pero el SVG es preferible en algunas áreas específicas.
Mientras que el SVG admite la animación, el PNG no. Los tipos de archivos de trama como GIF y APNG pueden considerarse alternativas. Sin embargo, no existe un formato de trama animada perfecto que sea ampliamente compatible, bien conocido, de alta calidad y que dé lugar a archivos de pequeño tamaño. Los SVG satisfacen todos estos nichos.
Además, los SVG se adaptan perfectamente a cualquier tamaño de pantalla, por lo que son responsivos y están preparados para retina por defecto. Los PNG pierden calidad cuando se cambian de tamaño, y conseguir que se escalen bien es bastante difícil, especialmente si sólo tienes imágenes diminutas que no se mostrarán bien en pantallas grandes.
Por último, los SVG suelen ser más pequeños que los PNG, por lo que suponen una menor carga para tu servidor a pesar de tener que renderizarlos en la carga.
Utilízalos para ilustraciones simples y planas en color, logotipos y gráficos decorativos en tu sitio.
Por otro lado, los PNG son adecuados para mostrar gráficos complejos a gran resolución, o imágenes con miles de colores. Los SVG no pueden manejar esa cantidad de colores y formas por el momento.
Este tipo de imágenes complejas constituirán a menudo la mayoría de las imágenes de tu sitio, por lo que no es el momento de descartar todavía el PNG.
Además, los PNG son más compatibles con los navegadores y plataformas específicas, como los clientes de correo electrónico. Si no estás seguro de si un SVG se renderizará correctamente, peca de precavido y utiliza un PNG.
Resumen
SVG y PNG son dos formatos de archivo muy diferentes. Al final, no es un gran problema si usas PNG o JPEG en tu sitio web fuera de casos de uso muy especializados, pero elegir entre SVG y PNG es una elección mucho más importante.
Es mucho más probable que utilices PNG, ya que es un formato de archivo más sencillo, de más fácil acceso y más versátil. Las imágenes complejas, como las capturas de pantalla y las ilustraciones detalladas, deberían utilizar PNG.
Aunque los SVG son más difíciles de crear y editar, tienen una serie de ventajas sobre los PNG. Siempre que sea apropiado utilizar imágenes vectoriales, como gráficos decorativos y logotipos, utiliza definitivamente SVG.
No es probable que cambies todas las imágenes de tu sitio por un SVG, pero su capacidad de respuesta y su menor tamaño de archivo los convierten en un gran candidato en determinadas situaciones.
¿Eres de los que usan SVG o PNG? Comparte tu opinión con nuestra comunidad en los comentarios de abajo
Salman Ravoof es desarrollador web autodidacta, escritor, creador y un gran admirador del Software Libre y de Código Abierto (FOSS, Free and Open Source Software). Además de la tecnología, le apasionan la ciencia, la filosofía, la fotografía, las artes, los gatos y la comida. Obtén más información sobre él en su sitio web, y conecta con Salman en X.
Deja una respuesta