Internet avanza a pasos agigantados. No es este el caso de los formatos gráficos de las páginas web. En la actualidad seguimos haciendo uso de formatos gráficos tan antiguos como GIF y JPEG que, aunque útiles, carecen de las características que los nuevos estándares, como P-JPEG, PNG ó SVG, vienen a ofrecernos.
En este artículo haremos un estudio de los formatos gráficos actuales de que disponen las páginas web, sin olvidarnos de lo que el futuro nos viene a deparar en este sentido.
EL FORMATO GIF
El formato gráfico GIF debe sus siglas a los vocablos ingleses «Graphics Interchange Format«, lo que traducido al español es «Formato de Intercambio de Gráficos«.
Las principales características de este formato gráfico son:
– Formato de mapa de bits.
– Color indexado en una paleta máxima de 256 colores.
– Compresión LZW, sin pérdida, que alcanza tasas 1:4 (hasta un 25% del tamaño original)
Vamos a ver con mayor detenimiento estas características.
Un mapa de bits está formado por los valores de color de los bits que forman la imagen. En realidad se trata de una matriz bidimensional donde cada elemento se representa por su valor de color. Estos valores de color tienen su traducción en la paleta de colores que acompaña a ese gráfico, lo cual enlaza directamente con el siguiente concepto: ¿qué es la paleta de colores?
Como ya hemos explicado, el formato GIF utiliza un sistema de color indexado en una paleta que puede soportar un máximo de 256 colores. Estos colores se representan en el sistema RBG (Red, Green, Blue = Rojo, Verde, Azul). Gráficamente, una paleta GIF podría representarse de la siguiente manera:
| Indice de color | Valor rojo | Valor verde | Valor azul |
| 1 | 56 | 76 | 0 |
| 2 | 87 | 89 | 190 |
| … | … | … | … |
Y tal y como hemos explicado anteriormente, cada bit del gráfico tiene como valor un índice de color, el cual se traduce en la paleta de colores de ese gráfico por su correspondiente valor RGB.
Versiones GIF
Existen 2 versiones del formato GIF: GIF87a y GIF89a.
GIF87a
GIF87a es la especificación original, y está disponible desde 1987.
Sus principales características son:
– Compresión LZW, sin pérdidas.
– Soporte de entrelazado.
La compresión sin pérdidas equivale a decir que el fichero comprimido tiene exactamente la misma información que el fichero sin comprimir. Evidentemente, esta característica nos asegura que la calidad del gráfico GIF (y su información) va a ser la misma por muy comprimido que esté el fichero. Normalmente, como ya indicábamos antes, las tasas de compresión pueden llegar a 1:4, aunque, como veremos más adelante, esto depende directamente de la información contenida en el gráfico.
Otra de las características del formato GIF87a es el sistema de entrelazado, el cual se basa en presentar la carga de la imagen en varias etapas, de manera que podemos vislumbrar el gráfico final antes de que este se halla cargado del todo. Esta característica se activa (si se quiere) en el procesador de imágenes a la hora de guardar la imagen.
Concretamente, las imágenes GIF tienen un soporte de entrelazado en 4 etapas, lo que quiere decir que la imagen se mostrará en 4 fases, de la siguiente manera: primero mostrará las líneas del mapa de bits números 1, 5, 9,…; en la segunda fase de la carga, las líneas 2, 6, 8,…; y así consecutivamente, completando sus 4 fases de carga. De esta forma conseguimos, cuando cargamos esta imagen, empezar vislumbrando una imagen borrosa que poco a poco se va haciendo más clara hasta completar la carga.
GIF89a
La versión GIF89a incorpora, a las de su predecesor (GIF87a), 2 nuevas características: transparencia y animación.
La posibilidad de transparencia hace que podamos convertir un valor de color de la paleta de colores de ese GIF en transparente, al igual que un cristal.
A la hora de diseñar una página web, esta característica nos ofrece mucho juego, ya que podemos hacer que parte de una gráfico se muestre transparente, mostrando lo que está directamente por debajo del mismo.
Todo esto se traduce en diseños web mejorados, mejor fundido con el resto de gráficos de la web, etc.
Gracias a la posibilidad de animación que se incorporó en la versión GIF89a, hoy día disfrutamos de los archiconocidos «GIF animados», ya que es esta característica es la que permite la creación de dichos gráficos animados.
Básicamente, un GIF animado es un fichero GIF que contiene en si mismo varios «frames» (o imágenes) GIF e información para llevar a cabo la secuencia de la animación con estos gráficos.
En un GIF animado podemos definir parámetros como el retardo entre imagen e imagen GIF, autorepetición de la secuencia de imágenes, etc.
EL FORMATO JPEG
JPEG es un estándar de compresión de imágenes fijas (no existen los JPEG animados) desarrollado por el «Joint Photographic Experts Group» (JPEG) de cuyas siglas viene su nombre, y cuya traducción directa al castellano es «Grupo de expertos en fotografía«.
Las características de este formato gráfico son bastante diferentes a las del formato GIF, de ahí que estos 2 formatos sean los utilizados por el lenguaje HTML, ya que uno intenta complementar al otro y viceversa.
Las características del formato gráfico JPEG son:
– Formato gráfico de mapa bits.
– Soporte de color verdadero, también conocido por su homónimo inglés true color (24 bits).
– Algoritmo de compresión (con pérdida) que soporta altas tasas de empaquetado (1/20 y más).
El soporte de color verdadero (24 bits) de JPEG nos ofrece la posibilidad de ofrecer imágenes con una profundidad de 16.777.216 colores.
Esta claro que un mapa de bits con una esta profundidad de color alcanza tamaños de memoria descomunales, pero esto se suple con el algoritmo de compresión que ofrece el formato.
Este algoritmo de compresión, aunque muy potente (reduce el tamaño del mapa de bits hasta un 5% del original o menos), ofrece pérdidas de información a medida que elevamos su tasa de compresión. La tasa de compresión se ajusta cuando guardamos el fichero, por ejemplo, desde nuestro procesador de imágenes.
Esta pérdida de información se produce a medida que elevamos su tasa de compresión y se deja notar en la resolución de la imagen.
P-JPEG
Es una extensión del formato JPEG que debe su nombre a «Progressive JPEG» (JPEG Progresivo).
Su principal ventaja es que permite la visualización progresiva de imágenes.
La visualización progresiva que incorpora P-JPEG se basa en ir mostrando, durante la carga del gráfico, la imagen de menor a mayor calidad. No debemos confundirlo con el sistema de entrelazado del formato GIF, ya que GIF se basa en ir mostrando líneas alternas del gráfico durante la carga, mientras que el sistema de visualización progresiva de P-JPEG vemos todas las líneas desde el principio, sólo que de forma borrosa, hasta alcanzar su máxima nitidez al concluir la carga.
GIF VERSUS JPEG
Anteriormente comentábamos que GIF y JPEG, formatos base utilizados actualmente en las páginas web, se complementan; veamos porque:
Comparativa entre los formato gráficos GIF y JPEG
| GIF87a | GIF89a | JPEG | |
| Colores | 256 máximo | 256 máximo | True color |
| Compresión | Sin pérdidas | Sin pérdidas | Con pérdidas |
| Entrelazado | Disponible | Disponible | No disponible |
| Animación | No disponible | Disponible | No disponible |
| Transparencia | No disponible | Disponible | No disponible |
Podemos reducir los gráficos utilizados para nuestra web en 2 tipos: GIF89a y JPEG. Evidentemente, descartamos el formato GIF87a debido a que tiene menos prestaciones que GIF89a y ninguna ventaja adicional.
¿Cuándo utilizar GIF ó JPEG?
Se debe utilizar el formato GIF para imágenes pequeñas de la web, como botones, iconos, etc.
JPEG en cambio se debe utilizar para gráficos de mayor tamaño, como imágenes digitalizadas, fotografías, etc.
Nunca debemos utilizar GIF para mostrar imágenes grandes o que necesiten de una resolución de color muy grande, debido a que ocuparían mucho espacio y además no podrían albergar nunca más de 256 colores.
Tampoco debemos utilizar JPEG para mostrar iconos pequeños ya que, como hemos dicho, el algoritmo de compresión de este formato es degenerativo, y por tanto su resolución en imágenes pequeñas es de menor calidad que si utilizamos un formato GIF.
Dicho esto, parece que GIF y JPEG son la pareja perfecta, (y en realidad son los 2 formatos que se soportan principalmente en la Red, aunque hay otros que veremos más adelante), pero no es así, ya que ambos están basados en mapas de bits, lo cual tiene desventajas importantes.
LA ALTERNATIVA: PNG
PNG debe sus siglas a los vocablos ingleses «Portable Network Graphics«, cuya traducción directa al castellano es gráficos de red portátiles.
Este formato gráfico surgió a partir de la controversia que se suscito cuando Compuserve, propietaria del formato, y Unisys, propietaria del algoritmo de compresión LZW usado por los ficheros GIF, decidieron que los programas que usaran este formato deberían de pagar.
Esto generó el desarrollo de un nuevo formato gráfico, PNG, que fue adoptado por el W3C en 1996.
El uso del formato PNG es gratuito, y su código completo está disponible para cualquier usuario.
Las características principales del formato PNG son:
– Formato de mapa de bits.
– Alta tasa de compresión sin pérdidas.
– Soporte de colores: color indexado, color verdadero de 48 bits, escala de grises de 16 bits.
– Sistema de entrelazado Adam7.
– Transparencia en color indexado.
– Transparencia de canal alfa en imágenes en color verdadero y escala de grises.
– Corrección gamma.
– Cromaticidad.
El formato PNG dispone de un potente algoritmo de compresión, sin pérdidas (la información no se altera), y con una tasa muy alta de compresión.
El mecanismo de la compresión, básicamente, se basa en optimizar la imagen línea a línea y aplicar después un algoritmo de compresión derivado del método LZ77, utilizado en programas de compresión general tan famosos como ZIP.
La gama de soporte de colores puede alcanzar hasta color verdadero de 48 bits, lo cual supone disponer de una paleta de más de 281.474.976.000.000 colores diferentes.
El sistema de entrelazado Adam7, utilizado por PNG, es más potente que el utilizado por GIF, ya que el sistema Adam7 muestra la imagen en 7 etapas y el resultado final es una imagen que es vislumbrada mucho antes que con el sistema en 4 etapas de GIF.
En cuanto a la transparencia, PNG utiliza 2 métodos: la transparencia para las imágenes de color indexado y la transparencia de canal alfa en las imágenes en color verdadero y escala de grises.
En la transparencia en las imágenes de color indexado, PNG funciona igual que GIF, asignando el valor de transparencia a uno de los valores de la paleta del gráfico.
La transparencia PNG de canal alfa en las imágenes a color de 48 bits o en escala de grises se basa en poder establecer el grado de transparencia que se desee a todos los pixeles del canal alfa de esa imagen, con lo que se pueden obtener imágenes dotadas de cierta transparencia, no en un único color (como en el caso de la transparencia en imágenes de color indexado), sino en todos los pixeles de la paleta.
La corrección gamma y la cromaticidad permite mostrar los colores de la imagen de una forma más precisa.
Aún teniendo todas estas ventajas, el formato PNG no es práctico (aún) para el uso en páginas web debido a que no es adoptado por todos los navegadores, y aún menos por las versiones antiguas de los mismos.
MAPAS DE IMAGENES VERSUS IMAGENES VECTORIALES
Como ya hemos resaltado, GIF y JPEG son formatos gráficos de mapa de bits, es decir, que su estructura se basa en una matriz de puntos, cada punto correspondiente a un punto virtual del gráfico, y cada uno de ellos incorporando la información correspondiente al color que le acompaña.
Evidentemente, las desventajas de este tipo de gráficos son palpables, ya que ofrecen muchas dificultades a la hora de hacer modificaciones sobre el gráfico original (cambiar texto, color, etc.), o simplemente a la hora de redimensionar la imagen, ya que se redimensionan los pixeles y no los elemento independientes, haciendo que estos pierdan definición y calidad (elementos de la imagen menos nítidos, bordes pixelizados, ilegibilidad de textos, etc.).
Todos estos inconvenientes se solucionan con otro tipo de imágenes, las imágenes vectoriales.
Las imágenes vectoriales, al contrario que los mapas de bits, no almacenan la imagen como una matriz de puntos con su correspondiente color, sino como un conjunto de los elementos independientes que la forman. En realidad una imagen vectorial está formada por las instrucciones que definen cada uno de los elementos de la imagen.
La ventaja de las imágenes vectoriales es doble, ya que a la posibilidad de rediseño posterior de la imagen hay que sumar que muchas veces el tamaño de estos gráficos puede ser muchísimo menor.
Por ejemplo, imaginemos una imagen de 800×600 pixeles en donde sólo halla un texto sobre un fondo de color. En un mapa de imágenes esto ocuparía mucha memoria, ya que tendríamos que almacenar la matriz de puntos completa, en cambio, en una imagen vectorial esto se solucionaría con unas pocas instrucciones. Y ya sabemos lo importante que es la optimización a la hora de construir nuestra web, ya que el tiempo de descarga es un factor importante.
Como todo, las imágenes vectoriales, a la hora de hablar de páginas web, tiene sus ventajas y sus inconvenientes. Sus ventajas ya las hemos citado: fácil rediseño y minimización del peso gráfico (en algunas ocasiones). Los inconvenientes, hoy por hoy, por desgracia, son más que las ventajas, ya que el soporte es mínimo y es ahora cuando se está empezando a utilizar este tipo de tecnología, aunque siempre con el riesgo de la incompatibilidad.
De cualquiera de las formas, los formatos de gráficos vectoriales para la web se pueden dividir en 2 tipos: los soportados mediante el plug-in correspondiente y los basados en lenguajes de marcado (todos ellos con el consabido riesgo de la incompatibilidad).
Los primeros son los gráficos vectoriales “clásicos”, que necesitan del plug-in correspondiente para poder ser visualizados en un navegador web.
El segundo tipo, los basados en lenguajes de marcado, son la última alternativa en la implantación de imágenes vectoriales. Vamos a verlos con mayor detenimiento:
Imágenes vectoriales basadas en lenguajes de marcado
El lenguaje de marcado utiliza texto (sin formato) para definir etiquetas y otros elementos. El ejemplo más claro de lenguaje de marcado es el HTML, en donde cada etiqueta escrita se traduce en un elemento legible a través de un navegador web.
En nuestro caso, las imágenes vectoriales basadas en lenguajes de marcado, los elementos de esas imágenes se definen igualmente con texto, que después es interpretado por el navegador web, al igual que un archivo HTML es interpretado por un navegador.
Los estándares más “populares” son: DrawML, PGML, VML, Web Schematics y SVG.
DrawML es un estándar de imágenes vectoriales para web orientado a la creación de organigramas y gráficos esquemáticos.
DrawML es una aplicación de XML (eXtensible Markup Language : lenguaje de marcado extensible) y hace uso del lenguaje Java para definir los gráficos que después se presentan en la ventana del navegador.
Mediante DrawML podemos definir complejos organigramas gráficos con necesidad de pocas instrucciones.
PGML (Precision Graphics Markup Language : lenguaje de marcado de gráficos de precisión) es una aplicación de XML que permite la creación de gráficos complejos y de calidad, ya que permite la posibilidad de renderizado.
VML (Vector Markup Language : lenguaje de marcado vectorial) es un estándar desarrollado por la empresa Microsoft que intenta hacer sencillo el desarrollo de este tipo de gráficos, mediante atributos y etiquetas cortas y descriptivas.
VML es una aplicación de XML que utiliza CSS2 (Cascade Style Sheets, level 2 : hojas de estilo en cascada, nivel 2).
El estándar VML permite la creación de imágenes complejas y de precisión, animación, renderizado, transparencia, corrección gamma y cromaticidad.
Web Schematics, al igual que el estándar DrawML, está diseñado para el fácil diseño de organigramas y gráficos de esquemas. Para trabajar utiliza las funciones de HTML y CSS1, con lo que se pueden diseñar fácilmente figuras geométricas, como círculos, rectas, polígonos, etc.
SVG (Scalable Vector Graphics : gráficos vectoriales dimensionables) es un formato desarrollado por el W3C para la creación de gráficos vectoriales.
SVG es una aplicación XML que soporta, entre otras, tecnología CSS2. Permite corrección gamma, cromaticidad y otros efectos.
Como vemos, hay variedad y calidad. El problema: la no compatibilidad con todos los navegadores web. El futuro: esperanzador.
–
Autor: David G. V.