SVG vs PNG vs JPG: Formato de imagen Pros y Contras

/2016-01-04 00:04:46/
Brilee
/Gráficos/

Cuando se trata de crear imágenes para la web y otros fines digitales, ¿qué formatos de archivo le darán el mejor resultado? Tienes que pensar en la velocidad versus la calidad y escala de la imagen. Entonces, ¿qué debes usar: SVG vs PNG vs JPG?

Hubo un tiempo en el que simplemente usabas un JPG para ajustar el espacio a 72 ppp y seguías adelante. Ya no. Las pantallas de alta resolución, las múltiples vistas y la necesidad de tener un sitio web ágil lo han convertido en un proceso mucho más complejo. ¡Vamos a sumergirnos en los pros y los contras de cada uno de estos formatos!

SVG

SVG se ve muy bien en cualquier tamaño y funciona para casi cualquier tipo de imagen que no sea una foto.

SVG, o gráficos vectoriales escalables, es increíblemente práctico. Es por eso que los diseñadores lo usan con más frecuencia.

Debido a que SVG es un formato vectorial, se ven muy bien en cualquier tamaño y funcionan para casi cualquier tipo de imagen que no sea una foto.

SVG es un formato sin pérdidas, lo que significa que no pierde ningún dato cuando se comprime, genera una cantidad ilimitada de colores y se usa más comúnmente para gráficos y logotipos en la web y para proyectos que se verán en la retina u otras pantallas de alta resolución.

Pros de SVG

El formato vectorial se presenta bien en cualquier tamaño
Capacidad para crear representaciones SVG simples en un editor de código o texto
Diseñe y exporte gráficos complejos desde Adobe Illustrator o Sketch
Se puede acceder al texto SVG
Los SVG son fáciles de diseñar y escribir
Los formatos SVG son compatibles con los navegadores modernos y están preparados para el futuro
El formato es altamente compresible y ligero.
Bueno para la búsqueda debido al formato basado en texto
Apoya la transparencia
Permite imágenes fijas o animadas

Contras de SVG

Diseñar SVG puede ser complicado
No renderice en algunos navegadores degradados
Soporte limitado para clientes de correo electrónico.

¿Quieres saber más? Tenemos otras dos guías que explican más sobre SVG: la Guía práctica para principiantes de SVG y cómo (y por qué) SVG se hará cargo.

PNG

PNG ofrece algo que un JPG no puede: transparencia.

PNG, o Portable Network Graphics, es un formato diseñado para la web que ofrece algo que un JPG no puede ofrecer: transparencia. Esta es la razón por la que PNG ha sido tan popular para cargar elementos como logotipos en diseños de sitios web.

Hay dos tipos de PNG: PNG-8 y PNG-24. PNG-8 utiliza una paleta de colores más limitada con solo 256 colores, tiene una transparencia algo mejor y exporta en un tamaño pequeño. PNG-24 utiliza una paleta de colores ilimitada, mantiene la transparencia pero exporta a un tamaño mayor. Ambos tipos de PNG tienen compresión sin pérdidas.

Si bien los formatos PNG son similares a los GIF, no admiten animación. Este formato se usa más comúnmente para iconos, imágenes fijas pequeñas o cualquier imagen que necesite transparencia.

Pros de PNG

Apoya la transparencia
Bueno para imágenes con texto en ellas.
Los formatos PNG representan bien los logotipos
Incluye descripción de texto incrustado para motores de búsqueda.
PNG-8 tiene un tamaño de archivo pequeño y es más ligero
Exportaciones sin bordes dentados

Contras de PNG

Los tamaños de archivo crecen rápidamente para archivos grandes como imágenes
Algunos clientes de correo electrónico antiguos tienen problemas para representarlos
Sin animación
Los archivos PNG-24 pueden agrandarse; no tan bueno para compartir en la web

JPEG

Cada vez que una foto se vuelve a guardar y se exporta como JPG, se degradará.

JPG, o Joint Photographic Experts Group, o JPEG, es probablemente el formato de imagen más conocido. Es la opción predeterminada para la mayoría de las imágenes guardadas porque es amigable para las fotos gracias a una pantalla a color prácticamente ilimitada.

JPG también ofrece la posibilidad de elegir qué tan comprimida debe estar una imagen del 0 por ciento (compresión pesada) al 100 por ciento (sin compresión). La mayoría de los diseñadores optan por algo en el rango del 60 al 70 por ciento. Las imágenes aún se ven bien en este nivel de compresión, pero los tamaños de los archivos son considerablemente más pequeños.

JPG usa compresión con pérdida y no mantiene los datos originales durante la compresión. Cada vez que una foto se vuelve a guardar y se exporta como JPG, se degradará.

El formato JPG se usa más comúnmente para imágenes, fotografía y cualquier cosa con mucho color.

Pros de JPEG

Ideal para fotografía y colores intensos.
Fácil de reducir el tamaño de los archivos
Se procesa constantemente en clientes de correo electrónico

Contras de JPEG

Sin transparencia
Crea bordes dentados para el texto.
Sin animación
Formato con pérdida
No hay metadatos automáticos para la búsqueda, debe incluir información

¿Qué formato debe usar?

Ahora que sabe cuáles son algunas de las diferencias entre SVG vs PNG vs JPG, ¿qué debe usar?

Puede hacerse algunas preguntas para obtener esa respuesta.

¿Necesita un formato vectorial o ráster?
Vector: SVG
Ráster: JPG o PNG

¿Necesitas transparencia?
Sí: SVG o PNG
No: JPG

¿Estás usando una imagen de alto color?
Sí: JPG o PNG
No: SVG

¿Es una foto grande?
Sí: jpg
No: PNG

¿La imagen contiene texto?
Sí: PNG
No: JPG

¿Es importante para usted la compresión sin pérdida?
Sí: SVG o PNG
No: JPG

¿Los gráficos deben actualizarse y volver a implementarse?
Sí: SVG
No: PNG o JPG

¿Estás usando animación?
Sí: SVG
No: JPG o PNG

Conclusión

Los tres formatos de imagen: SVG, PNG y JPG, tienen aplicaciones prácticas y de gran alcance. Si bien SVG es el formato más nuevo, y a menudo se puede guardar en el tamaño de archivo más pequeño, no siempre es la mejor opción.

Piense en cómo está usando las imágenes en su proyecto a medida que selecciona un tipo de archivo para encontrar el que funcione mejor para lo que está tratando de lograr. Incluso puede encontrar que los proyectos incluyen imágenes que usan los tres tipos de archivos. (¡En realidad es bastante común!)