Diferencias entre formatos de imagen: .jpg, .png, .svg

Cuando hablamos de imágenes, el formato .jpg es quizá el que primero viene a nuestra mente. Ha sido el más usado durante años, puesto que la variedad de soportes era menor. Pero ahora, con la aparición de distintas pantallas y nuevos soportes se le han unido otros compañeros, conviviendo desde hace tiempo con el .png y el .svg.

Aunque todos son formatos de imágenes, cada uno funciona mejor para un determinado tipo. Su uso se puede solapar y compartir funciones, pero si quieres hacerlo más especifico y sobre todo que funcione mejor, deberías saber cual es mejor para cada cosa.

Lo importante es pensar en la velocidad, la calidad de imagen y la escala. Si tenemos en cuenta estos conceptos encontraremos cual es el que mejor se adapta.

Hace años en Silo Creativo diseñamos una infografía con los distintos formatos de imágenes. Ha llegado el momento de actualizarla y sobre todo de analizar los pros y contras de cada uno de ellos.

SVG

Es el que mejor visualización posee independientemente del tamaño, funcionando para cualquier tipo de imagen siempre que no sea una fotografía. Es muy práctico y por lo tanto muy usado entre los diseñadores por su facilidad de escalabilidad. Sin embargo no podemos olvidar que es un formato vectorial, por lo que hemos de tener en cuenta para que queremos usarlo.

Al no perder ningún dato cuando se comprime, se procesa con un número ilimitado de colores y se usa sobre todo para gráficos o ilustraciones que se verán en la web.

Pros de SVG

  • Al ser un formato vectorial se reproduce bien en cualquier tamaño.
  • Podemos usarlo en un editor de código para crear presentaciones o texto
  • Podemos convertir texto en svg que será accesible
  • Este formato es compatible con os navegadores actuales y está preparado para el futuro.
  • Es compresible y ligero
  • Podemos hacer imágenes fijas pero también animaciones.

Contras de SVG

  • Es un diseño que puede ser complicado si no conoces las herramientas necesarias.
  • Puede no renderizar en algunos navegadores desactualizados.
  • No sirve para fotografías.

PNG

Si por algo se ha hecho famoso el PNG es por la posibilidad de usar la transparencia. Al poder poner fondos con transparencias, es muy útil sobre todo si hablamos de imágenes que queremos usar en web.

Como ya vimos hay dos tipos de PNG, PNG8 y PNG 24. El primero usa una paleta de colores más limitada, solo 256 colores pero exporta a un tamaño más pequeño. El PNG24 usa una paleta de colores ilimitada pero exporta a un tamaño mayor. Ambos tienen compresión sin pérdida.

Pros de PNG

  • Al tener transparencia es mas versátil y es bueno para las imágenes con texto.
  • Renderizan bien los logos
  • Incluyen descripción de texto para los motores de búsqueda.
  • Si no necesitamos muchos colores, con PNG8 tendremos un tamaño de archivo pequeño.

Contras de PNG

  • Si añadimos imágenes los tamaños de archivo crecen.
  • No podemos hacer animaciones

JPG

Como decíamos es el formato de imagen más conocido. Es la opción predeterminada para las imágenes puesto que podemos tomar fotos con colores ilimitados.

Normalmente son imágenes muy pesadas pero podemos comprimirlas de 0 a 100 (lo normal es quedarte en un 60-70 para no perder demasiada calidad). Sin embargo la compresión tiene perdida y no se mantienen los datos originales. Esto quiere decir que cada vez que guardamos y exportamos la imagen se va degradando.

Pros de JPG

  • Al tener todos los colores es la mejor opción para fotografías.
  • Aunque perdamos calidad es fácil reducir el tamaño de los archivos.

Contras JPG

  • No tiene transparencia
  • Es un formato con perdida
  • No se incluyen los metadatos automáticamente sino que debemos hacerlo de manera manual.