Formatos de imagen: .jpg, .png, .svg ¿Cuándo debo usarlos?

Cuando de imágenes se trata, el formato .jpg es quizá el que primero viene a nuestra mente. Ha sido el más usado durante años, debido a que la variedad de soportes era menor. Pero ahora, con la aparición de distintas pantallas y nuevos soportes han surgido algunos otros, como son el .png y el .svg.

Aunque todos son formatos de imágenes, cada uno tiene distintas funciones, pero si quieres hacerlo más específico y sobre todo que funcione mejor, deberías saber cuál es mejor para cada caso.

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.

– 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 los navegadores actualesy 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 complicadosi no conoces las herramientas necesarias.
• Puedeno renderizar en algunos navegadores desactualizados.
• No sirve para fotografías.

PNG

Lo que realmente resalta del PNG es la posibilidad de usar la transparencia. El 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 más versátil y es bueno para las imágenes con texto.
• Renderizan bien los logos
• Incluyen descripción de textopara 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.

¿Qué formato debería usar?

Ya tenemos una idea de las diferencias y similitudes entre estos formatos. Ahora llega el momento de ver un ejemplo práctico y definir dependiendo de la situación si necesitamos JPG, PNG o SVG.

Conclusión

L importante es elegir el formato que mejor se adapte a lo que necesitamos. Si elegimos bien ahorraremos en tiempo y aumentará la calidad de la imagen.