Contenido
Cuando se trata de crear imágenes para la web y otros propósitos digitales, ¿qué formatos de archivo te darán el mejor resultado? Tienes que pensar en la velocidad versus la calidad y escala de la imagen. Entonces, ¿qué deberías 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.
El 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 retina u otras pantallas de alta resolución.
Pros de SVG
- El formato vectorial se presenta bien en cualquier tamaño
- Posibilidad de crear representaciones SVG simples en un editor de código o texto
- Diseña y exporta gráficos complejos desde Adobe Illustrator o Sketch
- Se puede acceder al texto SVG
- 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
- Permite la transparencia
- Permite imágenes fijas o animadas
Contras de SVG
- Diseñar en SVG puede ser complicado
- No renderiza en algunos navegadores antiguos
- Soporte limitado para clientes de correo electrónico.
PNG
PNG ofrece algo que un JPG no puede: transparencia.
PNG, o Portable Network Graphics, es un formato diseñado para web que ofrece algo que un JPG no puede ofrecer: la 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, éstos 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
- Permite la transparencia
- Bueno para imágenes con texto
- 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 perderá calidad.
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% (compresión pesada) al 100% (sin compresión). La mayoría de los diseñadores optan por 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 utiliza 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 utiliza 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 alternativa
¿Qué formato debo usar?
Ahora que sabes cuáles son algunas de las diferencias entre SVG vs PNG vs JPG, ¿qué formato deberías usar para tus proyectos?
Puedes hacerte 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 ti 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
¿Estas pensando en hacer SEO?
Sí: SVG o PNG
No: JPG
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.
Piensa en cómo usas las imágenes en tu proyecto a medida que seleccionas un tipo de archivo para encontrar el que funcione mejor para lo que estás tratando de lograr. Incluso puedes encontrar que los proyectos incluyen imágenes que usan los tres tipos de archivos. (¡En realidad es bastante común!)