En Galahad Studio somos científicos, exploradores y aventureros. Por ello, creemos que al enfocar nuestra creatividad y conocimientos en generar historias significativas y valor humano, tenemos la capacidad de transformar la percepción de las personas y ayudamos a crear el Futuro.

Estos son algunos de nuestros proyectos. ¡Conócelos!

 

Blog

Home / Diseño  / Formato PNG, JPG, TIFF, GIF y SVG ¿Cuándo usarlos?

¡Hola que tal chicos!

Buscando compartir contenido de utilidad práctica, hoy queremos hablarles sobre los distintos tipos de formatos de imagen, pues aunque son algo con lo que muchos estamos familiarizados, a veces no tomamos las decisiones adecuadas al momento de elegir exportar un proyecto o incluso al utilizarlos en distintas situaciones como en una presentación o en un cartel impreso, ya que desconocemos lo que el formato realmente implica.

“Existen muchos tipos de archivos de imágenes disponibles y todos tienen sus ventajas y desventajas, conocerlos mejor nos permitirá decidir cuál es el que necesitamos usar en diferentes escenarios.”

Existen muchos tipos de archivos de imágenes disponibles, que podríamos agruparlas en bitmap o vectoriales; y aquellas cuyo modo de compresión es con perdida o sin perdida. Sin embargo, de los que más encontraremos ejemplos serán en formato: JPG, PNG y GIF, por ser de uso muy común, pero también existen de forma más especializada las SVG y TIFF.

La mayoría de los navegadores en Internet, computadoras y dispositivos móviles, tienen la capacidad de mostrar estos tipos de imágenes sin ningún problema, pero definitivamente, algunos formatos funcionan mejor en ciertas ocasiones. Aquí les hablaremos un poco de cada uno así como de sus ventajas y desventajas.

Formato JPEG

JPG es un tipo de archivo desarrollado por el Joint Photographic Experts Group (de allí las siglas JPEG) para que fuese el estándar para las imágenes hechas por fotógrafos. Para que el JPG tenga un tamaño reducido, el archivo comprime los datos de la imagen en bloques de píxeles (mapa de bits). El problema con esta comprensión es que es permanente, porque se creó con la idea de guardar imágenes grandes en espacios de almacenamiento pequeños.

Ventajas
  1. Puede ser comprimida hasta 100 veces.
  2. Es ideal para mostrar fotografías en la web sin ocupar mucho espacio en un servidor
  3. Mantiene una buena calidad y posee una amplia gama de colores
Desventajas
  1. Son un formato con compresión y no permite transparencias
  2. Genera Pixeleación aún configurándola con la mayor calidad
  3. No es el adecuado para ilustraciones, dibujos, ni texto
Formato PNG

PNG significa Portable Network Graphics.  Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste. Este también soporta transparencias, e incluso semitransparencias, así que es muy bueno para usarlo en Internet y en navegadores.

Ventajas
  1. Es un tipo de imagen sin perdida, por lo que reproduce los datos originales
  2. Soporta transparencias (y semitransparencias) sin perdida de color, pues su gama cromática puede ser de 8-bits (como GIF) o 24-bits (como JPG)
  3. Es ideal para usarlo en el desarrollo de sitios web para logotipos, botones y otras imágenes que necesiten conservar una buena resolución.
Desventajas
  1. Imágenes con muchos elementos y colores, pueden pesar mucho más que su equivalente en jpg
  2. No admite modo CMYK, por lo que no es del todo útil para impresión
  3. Algunos navegadores (especialmente antiguos) presentan problemas con la visualización de este tipo de archivos

PNG vs GIF

El PNG tiene un menor peso y una mejor transparencia que el GIF
Formato GIF

GIF es un tipo de archivo de imagen con bastante tiempo de vida, aunque fue casi olvidado por un tiempo al verse superado por otros tipos de imagenes. Hoy en día ha vuelto a ser muy popular gracias a sus características animadas. Sus siglas significan Graphics Interchange Format y fue creado por CompuServe.

Ventajas
  1. Posee una paleta de color de 256 colores y permite transparencias
  2. Las líneas rectas (como los textos) no pierden definición
  3. Permite animaciones en un archivo no muy pesado y sin la necesidad de un software adicional para ser reproducidas (a diferencia de los videos)
  4. Muchos programas (como Power Point) o aplicaciones (como Facebook y Whatsapp) aceptan el formato conservando sus propiedades
  5. Siendo un medio entre imagen y video, resulta ideal para la generación de banners y publicidad
Desventajas
  1. Pese a ser un tipo de imagen sin perdida, su gama de color es reducida por lo que puede generar pixelación
  2. Desde 2012, ha habido un rápido auge del formato, por lo que se han sobre-saturado, en algunos casos, los sitios web que presentan publicidad por medio de gifs

Ejemplo de imagen GIF

Sin necesitar un reproductor, las imágenes GIF tienen una animación infinita (loop)
Formato TIFF

El formato .TIFF (Tagged Image File Format) fue desarrollado por la desaparecida Aldus y Microsoft, y es actualmente propiedad de Adobe Systems, es el favorito a la hora de almacenar o utilizar imágenes en alta resolución y estupenda calidad, ya sea en la industria del diseño o la publicidad.

Ventajas
  1. Compatible con los programas de diseño
  2. Permite manejar varias imágenes y metadatos en un solo archivo
  3. Tipo de imagen en mapa de bits, pero con una compresión no destructiva
Desventajas
  1. Una sola imagen puede llegar a pesar cientos de megas
  2. Más allá de un uso profesional, resulta impráctico conservar imágenes en este formato
  3. Los visores de imágenes de algunas computadoras y móviles, pueden tener problemas al procesar este tipo de imagen

TIFF vs JPG

Es de notarse la cantidad de ``ruido`` que posee la JPG, al tener bloques de pixeles más grandes
Formato SVG

Un formato menos conocido es el SVG (Scalable Vector Graphics), desarrollado a partir de vectores gráficos (a diferencia de las imágenes desarrolladas por mapa de bits). Es un formato estándar en el diseño web, pues trabaja en XML describiendo imágenes tanto estáticas como animadas. Aunque claro, la llegada del lenguaje HTML5 ha hecho que poco a poco vaya muriendo.

Ventajas
  1. Como cualquier imagen vectorial, su principal ventaja era ser totalmente escalable sin ningún tipo de pérdida de calidad
  2. Pesa poco, por lo que permite una mayor definición que los archivos bitmap
  3. Es un formato abierto basado en XML y funciona sin problemas en todos los navegadores.
  4. Es ideal para utilizar tipografías e iconos en la web por sus propiedades escalables
  5. Soportan estilos CSS, con lo que si cambiamos el estilo en nuestra web, también cambiará dentro del archivo SVG (incluyendo acciones como rollover, cambios de colores e incluso animaciones)
Desventajas
  1. Es un gran desconocido, por lo que generar y encontrar imágenes en este formato es complicado
  2. Para su edición, es necesario tener conocimientos en programas como Adobe Illustrator o Corel Draw
  3. No es ideal para tener imágenes foto realistas, pero si ilustraciones o diagramas.

Iconos responsivos

Al ser las imágenes SVG archivos a base de código, fácilmente pueden aplicarseles estilos en CSS para modificar sus propiedades

Este solo es un panorama general de los tipos de archivos más comunes, pues se podría decir mucho de cada uno, además de que existen infinidad de tipos de archivo más.

¿Ustedes conocían estas diferencias?, ¿Conocen otros usos para cada uno?

No olviden dejar sus comentarios.

¡Saludos!

Científico, explorador, artista y aventurero. Creo que al enfocar la creatividad y el conocimiento, en la generación de valor humano, social, estético, cultural y económico a través del Diseño, tenemos la capacidad de transformar la percepción de las personas y ayudamos a crear el Futuro. Hagamos las cosas, aún las más sencillas, mejores

Post a Comment