Cuando utilizar JPG, GIF o PNG

Las imágenes digitales forman ya una parte imprescindible de nuestras vidas. Podemos obtenerlas desde multitud de dispositivos y medios diferentes: cámaras, móviles, escáneres, programas de diseño, etc.

Cuando se trata de almacenarlas, existen también infinidad de formatos en los cuales pueden guardarse: RAW, TIFF, PSD, WMF, EPS… son todos formatos en los que podemos almacenar nuestras fotografías o imágenes vectoriales.
Cada uno de estos formatos tiene su razón de ser, sus fortalezas y sus debilidades. Algunos son capaces de preservar mejor la calidad, otros ocupan menos espacio o soportan capas superpuestas, tienen mayor o menor profundidad de color, etc.

Pero cuando nos ceñimos al ámbito de las imágenes para la WEB, hay básicamente tres formatos entre los cuales decidirse, obviando los formatos vectoriales.

Vamos a hacer un breve repaso por cada uno de ellos para comprenderlos mejor y poder decidir correctamente cuando utilizar JPG, GIF o PNG, utilizando el más adecuado para nuestras fotografías, iconos y elementos gráficos.

[dropcap type=”square”]1[/dropcap] JPG o JPEG

El formato JPEG (Joint Photographic Experts Group) o JPG, es el más habitualmente utilizado por nuestras cámaras digitales. Es un formato ideal para fotografías, si bien es importante saber que no mantine la integridad de la imagen. Esto quiere decir que utiliza un método de compresión que optimiza el tamaño de la imagen a costa de su calidad.

Así, cuanto mayor es el grado de compresión, algo que se elige en el momento de guardar la imagen desde cualquier editor gráfico,  mayor será también la perdida de calidad de la fotografía. Habitualmente esta pérdida de calidad no es apreciable a simple vista, pero cuando la compresión aplicada es alta, aparecen los “artefactos” típicos de este formato de imagen que podemos apreciar en el siguiente ejemplo:

[box]

[box_header]

Pérdida de calidad por compresión JPG.

(Imagen ampliada)
[/box_header]

[box_content]

sinlios_trozo_logo_pngperdida por compresión jpg

[/box_content]

[/box]
Así mismo, si abrimos una imagen en este formato, la editamos y volvemos a guardarla, el resultado será siempre de menor calidad que la original, ya que se le vuelve a aplicar una compresión con pérdida cada vez que guardamos la imagen. Si realizamos esta acción repetidamente, la merma será cada vez más evidente, aun si aplicamos una compresión mínima.

Puntos a favor:

[list type=”check”]

  • Profundidad de color de 24 bits, lo que supone poder almacenar hasta 16 millones de colores diferentes.
  • Las imágenes ocupan muy poco gracias a una elevada compresión.
  • Formato ideal para publicar fotografías en la web.

[/list]

Puntos en contra:

[list type=”cross”]

  • Pérdida de calidad proporcional a la compresión y al número de veces que se guarda la imagen
  • Presencia de “artefactos” en la imagen, más evidentes en los colores planos y degradados sutiles.
  • No recomendado para edición.
  • No soporta transparencias en las imágenes.

[/list]

 

[dropcap type=”square”]2[/dropcap] GIF

El Formato GIF (Graphics Interchange Format), es un viejo conocido de la web debido a que ha sido utilizado desde casi sus comienzos para guardar pequeñas imágenes y animaciones.

Al contrario que JPG, la compresión del formato GIF no provoca pérdida en la calidad de la imagen, pero es capaz de almacenar una paleta de tan solo 256 colores diferentes. Éstos se eligen de entre 16 millones de colores, pero no se pueden mostrar más de 256 distintos en la misma imagen.

Como consecuencia, no es un formato apropiado para fotografías, pero es ideal para imágenes sencillas, como iconos, formadas básicamente por colores planos y sin degradados.

Además el formato GIF tiene la particularidad de que puede utilizarse para almacenar secuencias de imágenes animadas, algo que fué muy popular en los orígenes de la web, que cayó más tarde en desuso y que resurge hoy día con fuerza gracias a los cinemagraphs, y los cliplets o pequeñas secuencias de vídeo adaptadas a este formato, muy populares en algunas redes sociales.

GIF soporta también transparencia para un color. Es decir, podemos escoger uno de esos 256 colores y definirlo como transparente, de modo que la imagen no se vea necesariamente rectangular, dejando ver el fondo de la página web a tavés de la misma. Esta transparencia sin embargo no admite  diferentes grados de opacidad (canal alpha), lo que a menudo supone mostrar los típicos bordes aserrados en los bordes de la imagen.

Puntos a favor:

[list type=”check”]

  • Compresión sin pérdida.
  • Admite animaciones.
  • Puede definirse transparencia para un color.
  • Adecuada para iconos, banners y diseños de tonos planos que comprime muy bien.

[/list]

Puntos en contra:

[list type=”cross”]

  • Profundidad de color de 8 bits. Sólo puede mostrar un máximo de 256 colores al mismo tiempo.
  • No adecuada para fotografías ni imágenes con degradados o gran riqueza cromática.
  • No puede mostrar diferentes grados de opacidad (canal alpha)

[/list]
 

[dropcap type=”square”]3[/dropcap] PNG

PNG (Portable Network Graphics) es el más moderno de los formatos de imágenes para la web.

Nació originalmente para dar respuesta a las carencias del formato GIF. Al igual que éste, es capaz de almacenar imágenes comprimidas sin pérdida de calidad, pero no tiene una limitación respecto al número de colores que puede almacenar.

Además soporta un verdadero canal alpha, lo que signi¡fica que puede mostrar hasta 256 grados de transparencia diferentes para cualquier color de la imagen.

Su uso ha tardado en popularizarse porque el navegador más utilizado durante mucho tiempo (Internet Explorer), sólo soportabe este tipo de imágenes mediante la aplicaición de un filtro propietario que lo hacía muy engorroso para los diseñadores web.

Actualmente se utiliza con profusión consiguiendo espectacualers efectos como los que es habitual encontrar en los sliders que encabezan multitud de webs hoy día.

Aunque existe una especificación para crear secuencias de animaciones con PNG, llamada APNG (Animated PNG) ésta aun no ha sido estandarizada.

[box]

[box_header]

Transparencia en Imagen PNG

[/box_header]

[box_content]

sinlios_logo_pngsinlios_logo_transparencia_png

[/box_content]
 

Puntos a favor:

[list type=”check”]

  • Profundidad de color de 24 bits, lo que supone poder almacenar hasta 16 millones de colores diferentes.
  • Compresión sin pérdida, aunque acupando notablemente más espacio que un JPG.
  • Puede definirse transparencia con verdadero canal alpha (256 grados de opacidad para cualquier color)
  • Adecuada para fotografías de pequeño tamaño, iconos, tranparencias, degradados…

[/list]

Puntos en contra:

[list type=”cross”]

  • No adecuado para fotografías de gran tamaño debido a que la compresión no es tan notable como en el JPG.
  • No es soportado por navegadores antiguos (esto ya casi no tiene relevancia)

[/list]

Y hasta aquí nuestro pequeño repaso a los formatos gráficos más utilizados en la web hoy día. Espero haberos despejado todas las dudas respecto a cuando es más adecuado utilizar cada uno de ellos, pero si aun te quedase alguna, no dudes en escribirla en el hilo de comentarios e intentaré despejarla para ti.

Si te ha resultado interesante, puedes compartir el artículo o suscribirte al blog. Nunca somos bastantes amigos en el Blog SinLios.

4 Comentarios

  • Domi Maniega

    Hola Luis, muchas gracias porque de una manera sencilla y clara me has dado luz a todas las dudas que tenía sobre los formatos de imágenes.

    • Luis Hernández

      Gracias a ti Domi por tu comentario. Un placer 🙂

  • Eduardo Castro

    Muy clara tu explicación. También soy biólogo y soy apasionado por las herramientas para el manejo de imágenes.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: