¿Cuáles son los formatos de imagen mas adecuados para mostrar imágenes (logotipos, fotografías, ilustraciones, etc.) en nuestros contenidos y portales? A menudo tantos formatos pueden llevarnos a la confusión. En este artículo explicaremos, de la forma más sencilla posible, cuales son los formatos mas extendidos en internet: GIF, JPG y PNG. ¡Empecemos!

Formato GIF

El formato GIF (Graphics Interchange Format) puede mostrar como mucho 256 colores en una imagen. Además de ello, permite mostrar animaciones, lo que llevo a que sea el formato más usado para crear banners y otros elementos gráficos con animaciones.

El formato GIF es adecuado para representar elementos y bloques de color grandes y simples: logotipos, texto, ilustraciones, etc. No es el indicado para representar fotografías ni patrones de color complejos, ya que su limitación de 256 colores por imagen perjudicará la calidad de la misma, y en lugar de mostrar transiciones de color suaves generará puntos o bloques de color uniforme (denominado “efecto posterización”).

GIF no es el formato adecuado para mostrar fotografías, ya que su reducción a 256 puede crear efectos indeseados como la “posterización” (aparición de bloques planos de color) o, como en esta imagen, “dithering” (punteado). 

GIF da la posibilidad de crear transparencias, es decir, de hacer que alguna parte de la imagen sea transparente (por ejemplo, para mostrar un logotipo sobre un color definido en el fondo). De todos modos, esas transparencias son de baja calidad, formándose el llamado “efecto sierra” en las partes que delimitan las zonas que son transparentes y las que no lo son.

Al crear el archivo GIF podremos seleccionar la cantidad de colores y su composición, con el fin de lograr un equilibrio entre el tamaño del archivo y la calidad de la imagen.

Formato JPG

El formato JPG (Joint Photographic Experts Group) está destinado a mostrar fotografías y patrones complejos de color. Gracias a su sistema de compresión podemos utilizar fotografías en nuestro sitio web generando archivos de relativamente poco tamaño. Este sistema de compresión hace que se pierda información cada vez que el JPG es creado (no al usarlo, evidentemente), es decir, la calidad de la imagen se irá degenerando cada vez que utilicemos la compresión (cosa que no ocurrirá al mover, renombrar o usar el archivo, solo al editarlo y re-guardarlo con un software de edición de gráficos)

Al contrario que el formato GIF, JPG es poco eficiente a la hora de mostrar elementos y bloques de color grandes y simples: logotipos, texto, ilustraciones, etc. En estos casos, la compresión JPG creará “artefactos” o “ruido visual” que antes no existía. Esos artefactos suelen ser inapreciables en fotografías, pero si se verán claramente en logotipos, textos, etc…

Comparación entre los formatos JPG y PNG: En imágenes de este tipo, el formato JPG crea ruido visual o “artefactos”, que no son apreciables en fotografías o patrones más complejos (http://en.wikipedia.org/wiki/File:Comparison_of_JPEG_and_PNG.png).

Al crear un JPG podremos elegir el nivel de compresión que queramos usar con el fin de lograr un equilibrio entre el tamaño del archivo y la calidad de la imagen.

Imagen de una flor con diferentes tasas de compresión JPG. La compresión ha sido aumentada de izquierda a derecha, con la consiguiente perdida de calidad.

El formato JPG no puede mostrar ni animaciones ni transparencias.

Formato PNG

El formato PNG (Portable Network Graphics) se creo con el objetivo de sustituir al formato GIF (este ultimo planteo problemas legales por conflictos con las patentes). Hoy en día, PNG es el standar recomendado por el W3C (la organización que vela por los estándares en internet). Es necesario, dentro de PNG, diferenciar dos sub-formatos:

• PNG8: Equivalente al formato GIF. Puede mostrar hasta 256 colores por imagen. Ofrece unas tasas de compresión y transparencia ligeramente mejores que GIF. No admite animaciones.
• PNG24: Equivalente al formato JPG, esta desarrollado para mostrar fotografías. Puede crear transparencias de una calidad mucho mayor que GIF y PNG8 (evitando el conocido “efecto sierra”). Al contrario que JPG, no pierde información (calidad) al generarse. No se puede seleccionar la tasa de compresión.

Pese a ser un estandar W3C, el formato PNG ha tenido problemas a la hora de popularizarse. El origen de esos problemas se encuentra en diversos fallos de compatibilidad que se generaban con algunos navegadores: muchos navegadores antiguos (IE5 y 6, por ejemplo) no mostraban correctamente los archivos PNG, especialmente los que contenían transparencias. Por ello, muchos diseñadores y desarrolladores optaban por “asegurar” utilizando otros formatos como GIF. De todos modos, hoy en día todos los navegadores modernos son capaces de mostrar PNGs sin problema alguno.

¿Qué formato usar?

No existe una respuesta fácil. Deberemos utilizar un formato u otro según el tipo de imagen y nuestras necesidades. No obstante, podríamos tomar esta lista como guía de inicio:

• Mostrar logotipos, textos o ilustraciones simples:: PNG8 edo GIF
• Crear animaciones: GIF
• Fotografía o imágenes con patrones de color complejos: JPG edo PNG24
• Mostrar transparencias con alta calidad: PNG24
• Mostrar transparencias que no requieran mucha calidad:: PNG8 edo GIF

¿Como crear y trabajar con esos formatos?

Al trabajar con imágenes hemos de tener siempre en cuenta una cosa: la calidad de una imagen no se puede “mejorar” o “recuperar”. Es decir, si grabamos una fotografía en GIF pasará a tener como mucho 256 colores, y no recuperará su calidad original por muchos que la volvamos a convertir en JPG o PNG. Por lo tanto, es mejor editar las imágenes en formatos de alta calidad (BMP, TIFF, PSD) y, una vez acabadas, guardarlas como uno de los tres formatos que hemos visto para usarlas en la web.

Hay muchos programas y servicios online para gestionar estos formatos. Desgraciadamente, la mayoría de nuestros usuarios no pueden instalarse software en sus equipos del GV. Por ello, desde el Servicio Web os recomendamos lo siguiente:

1. Para convertir imágenes a estos formatos, instalar el programa GIMP, el gestor de imágenes de software libre más conocido (es libre y gratuito).
2. Si no puedes instalar ese programa o no sabes muy bien que es lo que hay que hacer, ponte en contacto con tu gestor web del SW, este te ayudará sin ningún tipo de problema.