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 frente a la calidad de la imagen y la escala. Entonces, ¿qué debes usar: SVG vs PNG vs JPG?
Hubo un momento en el que solo usó un JPG de tamaño para ajustarse al espacio a 72 ppp y siguió 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. ¡Introduzcámonos en las ventajas y desventajas de cada uno de estos formatos!
SVG
SVG se ve genial 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 están usando 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érdida, lo que significa que no pierde ningún dato cuando se comprime, representa un número ilimitado 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 reproduce 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
- El texto SVG es accesible
- 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
- El diseño de SVG puede complicarse
- No renderizar en algunos navegadores degradados
- Soporte limitado para clientes de correo electrónico
¿Quiere 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 va a tomar el control.
Png
PNG ofrece algo que un JPG no puede - la 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 única 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 mayor 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érdida.
Si bien los formatos PNG son similares a los GIF, no admiten la 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 renderizan bien los logos
- 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 liviano
- 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 más antiguos tienen problemas para renderizarlos
- Sin animación
- Los archivos PNG-24 pueden ser grandes; no es 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 los guardados de imágenes, ya que se puede tomar fotos gracias a una pantalla en color prácticamente ilimitada.
JPG también ofrece la posibilidad de elegir qué tan comprimida debe ser una imagen de 0 por ciento (compresión pesada) a 100 por ciento (sin compresión). La mayoría de los diseñadores optan por algo en el rango de 60 a 70 por ciento. Las imágenes aún se ven bien en este nivel de compresión, pero los tamaños de archivo son considerablemente más pequeños.
JPG usa compresión con pérdida y no mantiene 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ías y cualquier cosa con mucho color.
Pros de JPEG
- Ideal para color y fotografía.
- Fácil de reducir el tamaño de los archivos
- Renders consistentemente en clientes de correo electrónico
Contras de JPEG
- Sin transparencia
- Crea bordes irregulares para el texto.
- Sin animación
- Formato con pérdida
- No hay metadatos automáticos para la búsqueda, debe incluir información alt
¿Qué formato debe utilizar?
Ahora que sabes cuáles son algunas de las diferencias entre SVG vs PNG vs JPG, ¿qué debes usar?
Puedes hacerte algunas preguntas para obtener esa respuesta.
¿Necesita un formato vectorial o raster?
Vector: SVG
Raster: JPG o PNG
¿Necesitas transparencia?
Sí: SVG o PNG
No: JPG
¿Estás utilizando una imagen de color alto?
Sí: JPG o PNG
No: SVG
¿Es una foto grande?
Sí: JPG
No: PNG
¿La imagen contiene texto?
Si: png
No: JPG
¿La compresión sin pérdida es importante para ti?
Sí: SVG o PNG
No: JPG
¿Es necesario actualizar y redistribuir los gráficos?
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 cómo está utilizando las imágenes en su proyecto al seleccionar 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!)