Formatos II

Formatos para la web: GIF, JPEG y PNG

Los formatos de mapa de bits más habituales para la web son GIF, PNG y JPEG. Cada uno tiene características distintas que lo hacen más adecuado para un tipo de gráfico.

Nutricion enteral y parenteral

GIF (Graphics Interchange Format) es un formato desarrollado en 1987 por Compuserve Inc. para el intercambio de gráficos en Internet. Desde entonces, es uno de los formatos más usados para los gráficos en la web. GIF codifica los gráficos hasta 8 bits por lo que admite paletas de 256 colores o menos. Es adecuado para gráficos con colores planos y/o líneas finas.

En 1989 Compuserve sacó una nueva versión llamada GIF89a que incorpora la posibilidad de designar uno o varios colores de la paleta como transparente, conocido como transparencia de índice. Ello es útil cuando se quiere tener un gráfico silueteado sobre el fondo de una página web.

Cursos de Sketchup

Otra variante es el GIF animado que se compone de una secuencia de diferentes fotogramas en formato GIF. La sucesión de estos hará que veamos una secuencia animada. Para realizar este tipo de GIF se puede recurrir a programas creados con este fin, o a otros que incorporan un módulo de animación GIF como Fireworks. El formato GIF usa un LZW como algoritmo de compresión (sin pérdida de calidad).

El GIF incorpora junto a la imagen la paleta de colores que se ha usado. Es una paleta indexada, lo que significa que cada color tiene asignado un número mediante el cual se indica en la imagen el color con el que se representará cada píxel. Si una imagen tiene muchas variedades de un color es posible incorporar una paleta con todas ellas al precio de reducir el resto de colores. Podríamos, por ejemplo, definir una paleta con 256 tonalidades de rojo; pero la imagen sólo podría usar esas tonalidades y no otros colores.

Los GIF, excepto la variante animada, permiten ser almacenados como entrelazados. Esta opción es útil para la web, ya que permite que una imagen se vaya viendo a medida que se descarga, de esta manera nos podemos hacer una idea de la imagen que aparecerá en ese lugar.

Como respuesta a las restricciones en el uso del algoritmo de compresión LZW (polémica que se trata más adelante) la comunidad de software libre emprendió el desarrollo de un formato gráfico para la web que sustituyera a GIF. El resultado es un formato mucho mejor y con nuevas características: PNG (Portable Network Graphics).

Existen 3 versiones en función del número de bits usados para la codificación del gráfico: PNG8, PNG24 y PNG32. Es un formato adecuado tanto para colores planos como fotografías de tono continuo. Admite el modo indexado incorporando una paleta de colores (PNG8) y también el modo RGB (PNG24 y PNG32) generando variedad de colores a partir de sus tres componentes (rojo, verde y azul) almacenados en canales.

También admite carga entrelazada basada en el método Adam7 (más rápido que el de GIF). En la versión PNG8 admite transparencia de índice, en la versión PNG 24 no admite transparencia, pero en la versión PNG32 puede guardarse un canal Alfa por lo que permite diferentes niveles de transparencia o una silueta con los contornos suavizados respecto al fondo. Tiene un sistema de compresión libre sin pérdida de calidad conocido como Deflate/Inflate, derivado del LZ77, que es de la misma «familia» que el LZW.

Otro formato a considerar es el JPEG (Joint Photographic Experts Group), que adquiere el nombre de un comité creado para buscar un algoritmo eficaz para compresión de imágenes fotográficas o de tono continuo; tanto de escala de grises como en color. El sistema de compresión de JPEG obtiene una ratio de compresión mayor que LZW o el que usa PNG, aunque implica pérdida de datos. A mayor compresión, menor peso, mayor pérdida y menor calidad. Existen diferentes formas de especificar las diferentes calidades, siendo la más común la que especifica 13 niveles, del 0 al 12, siendo 12 la de mayor calidad y 0 la de menor.

Las imágenes JPEG admiten carga progresiva, parecida a la carga entrelazada. Este tipo de carga permite que cuando empiezan a llegar los datos de la imagen del servidor se dibuje una versión de baja definición (con aspecto muy pixelado) y conforme se va descargando la imagen se van haciendo barridos progresivos que aumentan su resolución hasta llegar a la versión final.

Este formato codifica el color en RGB y no permite trabajar con paletas indexadas. No soporta ningún tipo de transparencia. Es un buen formato para representar degradados, pero no contornos finos, detalles o áreas de color plano. Por lo que resulta adecuado para imágenes fotográficas, para lo que fue creado, pero no para imágenes con líneas o textos. Aunque hay estrategias de compresión que resuelven este problema que serán tratadas en secciones posteriores.

Sistemas de compresión

Los sistemas de compresión reducen la memoria que ocupa un archivo. Comprimir puede ser necesario para que ocupe menos espacio al almacenarlo en el disco pero se hace imprescindible cuando este archivo debe transferirse o publicarse en Internet. A menor tamaño de archivo, mayor rapidez en la transferencia de los datos. Una vez se tienen los datos el archivo se descomprime y se muestra.

La descompresión también representa una pérdida de tiempo, pero en general, para los sistemas de compresión/descompresión y las capacidades de procesamiento de los dispositivos electrónicos actuales, el tiempo perdido en la descompresión es menor al ganado por la bajada en el tamaño del archivo.

De algún modo lo que hacen los sistemas de compresión es eliminar redundancia y «resumir» la información a almacenar. Esto puede hacerse de dos formas:

• Con pérdida de datos: equiparar información parecida a un solo valor (por ejemplo, varios tonos de azul a un solo azul). Se resume la información, perdiendo detalles. La información destruida no se recupera en la descompresión. Este tipo de compresión es la usada, por ejemplo, en el formato JPEG.

• Sin pérdida de datos: se buscan formas de optimizar el registro de los datos eliminando la información redundante y simplificando la forma de expresarla. Toda la información «reducida» se vuelve a recuperar en la descompresión. Este tipo de compresión es la usada, por ejemplo, en los formatos TIFF, GIF o PNG.

LZW (Lempel-Ziv-Welch) es el algoritmo que usa el formato GIF y, opcionalmente, el formato TIFF para comprimir los gráficos (también la utiliza pdf). Se trata de un sistema de compresión sin pérdida de datos. A grandes rasgos se puede decir que dicho algoritmo realiza una codificación de secuencias consecutivas de valores de color, reduciendo al máximo la redundancia en la repetición de secuencia.

El sistema de compresión Deflate/Inflate que usa PNG es un derivado de LZ77 (el algoritmo usado en zip, gzip, pkzip, etc.). El sistema sería similar al que hemos descrito en la ilustración del apartado anterior pero optimizado, pues introduce varios filtros que preprocesan la información de color para lograr una codificación más eficiente. Es también un sistema de compresión sin pérdidas.

El sistema usado por JPEG es muy bueno comprimiendo imágenes fotográficas, pero no con imágenes de colores planos o con líneas finas muy contrastadas. Básicamente, lo que hace este algoritmo es guardar la imagen separando la información de brillo de los matices de color y elimina las diferencias de color sutiles que no podemos apreciar, por eso es un formato de compresión que genera un proceso de pérdidas. Por muy poco que queramos comprimir, siempre se pierde información. Como ya se ha dicho, se puede controlar el nivel de compresión, y cuanto mayor sea la compresión aplicada, menor será la calidad de la imagen y el volumen del archivo.

Formatos Rasterizados

Los formatos rasterizados almacenan las imágenes como una matriz de píxeles, cada uno con su propio color y valor de intensidad. Estos formatos son ideales para fotografías y gráficos detallados con muchos colores y variaciones tonales.

1. JPEG (Joint Photographic Experts Group)
   • Características: Formato de compresión con pérdida que reduce el tamaño del archivo sacrificando algo de calidad.
   • Usos: Fotografía digital, gráficos web, imágenes donde la calidad extrema no es crítica.
   • Ventajas: Tamaño de archivo reducido, amplia compatibilidad.
   • Desventajas: Pérdida de calidad con la compresión, no adecuado para gráficos con texto o líneas finas.
2. PNG (Portable Network Graphics)
   • Características: Formato de compresión sin pérdida que soporta transparencias.
   • Usos: Gráficos web, imágenes con fondo transparente, gráficos detallados.
   • Ventajas: Alta calidad sin pérdida de datos, soporte de transparencias.
   • Desventajas: Tamaño de archivo mayor comparado con JPEG.
3. GIF (Graphics Interchange Format)
   • Características: Formato de compresión sin pérdida limitado a 256 colores, soporta animaciones.
   • Usos: Gráficos web simples, animaciones pequeñas, imágenes con áreas planas de color.
   • Ventajas: Soporte para animaciones, tamaño de archivo reducido.
   • Desventajas: Limitación de color, no adecuado para fotografías complejas.
4. TIFF (Tagged Image File Format)
   • Características: Formato de alta calidad sin pérdida, utilizado en impresión y digitalización.
   • Usos: Fotografía profesional, impresión, digitalización de alta calidad.
   • Ventajas: Alta calidad de imagen, soporte para capas y transparencias.
   • Desventajas: Tamaño de archivo grande, no adecuado para uso web.
5. BMP (Bitmap)
   • Características: Formato sin compresión y sin pérdida utilizado principalmente en plataformas Windows.
   • Usos: Almacenamiento de imágenes en alta calidad sin compresión.
   • Ventajas: Calidad máxima de imagen.
   • Desventajas: Tamaño de archivo muy grande, no adecuado para transferencia o uso web.

Formatos Vectoriales

Los formatos vectoriales almacenan imágenes como un conjunto de formas geométricas, lo que permite escalarlas sin pérdida de calidad. Estos formatos son ideales para logotipos, ilustraciones, y cualquier gráfico que deba ser redimensionado frecuentemente.

1. SVG (Scalable Vector Graphics)
   • Características: Formato basado en XML para gráficos vectoriales.
   • Usos: Gráficos web, logotipos, ilustraciones.
   • Ventajas: Escalabilidad sin pérdida de calidad, soporte para interactividad y animaciones.
   • Desventajas: Puede ser complejo de crear y manipular sin las herramientas adecuadas.
2. EPS (Encapsulated PostScript)
   • Características: Formato de gráficos vectoriales utilizado en impresión y publicación.
   • Usos: Logotipos, gráficos de alta calidad, impresión.
   • Ventajas: Alta calidad, ampliamente compatible con programas de diseño y impresión.
   • Desventajas: Puede ser difícil de editar si no se tiene el software adecuado.
3. PDF (Portable Document Format)
   • Características: Formato utilizado para documentos que pueden incluir texto e imágenes vectoriales y rasterizadas.
   • Usos: Documentos que combinan texto e imágenes, publicación digital.
   • Ventajas: Universalmente compatible, puede contener tanto gráficos vectoriales como rasterizados.
   • Desventajas: Los archivos pueden ser grandes si contienen muchas imágenes de alta resolución.
4. AI (Adobe Illustrator)
   • Características: Formato nativo de Adobe Illustrator, utilizado para gráficos vectoriales.
   • Usos: Ilustraciones, logotipos, diseño gráfico profesional.
   • Ventajas: Alta calidad, soporte completo para las capacidades de Illustrator.
   • Desventajas: Requiere Adobe Illustrator para editarlo completamente.