---
Página principal

Formatos gráficos

Menú del taller
---

Existen Multitud de formatos gráficos en el mercado. Cada uno de ellos tiene una sere de características que lo hacen mejor o peor para un trabajo concreto.

Nosotros vamos a ver los formatos orientados a la web.

Pese a que muchos navegadores reconocen distintos formatos, solo existen tres que estén lo suficientemente generalizados y que sean lo suficientemente eficientes para ser usados en las páginas web. Estos tres formatos son el JPEG, el GIF y el PNG. Veamoslos con más detalle:

---

El formato JPEG

Esre formato fué elaborado por el Joint Photographic Experts Group (Algo así como "Grupo de Expertos Fotográficos Unidos"), de cuyas siglas deriva su nombre. Se trata de un formato abierto, cuyos derechos son libres, y que puede ser usado o implementado en un programa (tanto para reconocerlo como para editarlo o guardar archivos en él) libremente, sin tener que pagar derechos por ello a nadie.

El formato JPEG (que suele usar nombres de archivo con las extensiones *.JPEG o *.JPG) nació como una respuesta a las limitaciones de otros formatos, entre ellos el GIF, en cuanto a calidad y tamaño de archivos.

JPEG es un formato de compresión con pérdida, esto quiere decir que, al guardar una imagen en este formato, algo de la información que contiene esa imagen se reduce, es decir, esta pierde un poco de calidad, aunque, generalmente, esta pérdida de calidad es imperceptible al ojo humano. Con ello se consigue reducir el tamaño del archivo y, por tanto, mejorar la velocidad de bajada de tus páginas web.

Por otro lado, el formato JPEG permite elegir el nivel de compresión que queremos asignar a un archivo, de modo que podamos decidir qué punto deseamos entre una mayor calidad de imagen (y, por tanto, un mayor tamaño de archivo) y una imagen de baja calidad (con un menor tamaño de archivo). El sistema de compresión que usa JPEG se basa en reducir informacion promediandola en las zonas de degradado. A grandes rasgos, esto quiere decir que se calcula el valor de color de algunos pixels en función del color de los pixels que les rodean. Debido a ello, este formato es muy eficiente a la hora de almacenar imágenes que posean muchos degradados y matices de color, mientras que es casi inútil cuando se enfrenta a dibujos con grandes extensiones de colores planos y uniformes o con bordes muy definidos.

Para que te hagas una idea de la compresión de JPEG, veamos estos tres ejemplos:

JPEG de calidad máxima JPEG de calidad máxima (40.70 Kb)

JPEG de calidad media JPEG de calidad media (6.05 Kb)

JPEG de calidad mínima JPEG de calidad mínima (2.52 Kb)

Como puedes ver, de la primera a la segunda imagen no hay casi una diferencia perceptible (a espcepción del tamaño en Kb), pero en la última si se nota una pérdida de calidad.

Si a lo anterior unimos que tiene una profundidad de color (número de colores que puede representar) de 24 bits (algo más de 16 millones de colores), veremos que JPEG es ideal a la hora de mostrar fotografías o imágenes de ese tipo.

JPEG permite también guardar los archivos en modo "progresivo", lo que hará que, a la hora de mostrar la imagen por pantalla, se pueda ver (aunque aún no se haya cargado completamente) con menor calidad. Calidad que irá mejorando a medida que se cargue la imagen hasta obtenerla completamente. Con ello conseguimos que no sea necesario que el navegante se aburra esperando a que se baje la imagen completamente para ver qué demonios has dibujado ahí.

Para terminar, el formato JPEG permite almacenar en el gráfico algo de información en texto (para, por ejemplo, indicar el autor, copyritght, etc.) y una copia de tamaño reducido de la imagen, para ser usada por programas de visualización o edición. Pero estas son características que no nos sirven a la hora de hacer páginas web y, además, hacen que el archivo final sea mayor, de modo que las evitaremos en nuestras imágenes.

Puedes encontrar más información sobre este formato en la página oficial del JPEG.

---

El formato GIF

El formato GIF de Compuserve, pese a estar (como veremos luego) en el centro de más de una polémica, probablemente sea el más utilizado de la Web.

GIF son las iniciales de Graphic Interchange Format (que significa, mas o menos, Formato de Intercambio de Gráficos). Se trata de un formato de "Mapa de Bits" (como, por ejemplo, lo son el BMP o el PCX) que significa que, en cada imagen, hay una tabla que indica los colores que se representarán en la imagen, a los que luego se referencia desde la imagen en sí. GIF tiene una profundidad de color m$aacute;xima de 8 bits, lo que da un tope de 256 colores. A pesar de esto, GIF posee la capacidad de aparentar más tonos de color usando una técnica de promediación de colores que consiste, básicamente, en obtener un color intermedio que no esté en su tabla a colocando juntos varios pixels de colores que si están en esa tabla.

Este formato usa, además, un sistema de compresión sin pérdida llamado LZW (Lemple - Zif - Wellch, el mismo que utiliza el ZIP), que hace que se obtengan ficheros muy pequeños. Este algoritmo de compresión es especialmente eficiente cuando se trata de imágenes con colores planos, líneas definidas y pocos degradados (exactamente al contrario que JPEG). Por ello este formato está especialmente indicado para dibujos lineales, iconos, etc.

Aquí tienes tres ejemplos de GIFs con distinta profundidad de color:

GIF de 256 colores GIF de 256 colores (25 Kb)

GIF de 64 colores GIF de 64 colores (16.5 Kb)

GIF de 8 colores GIF de 8 colores (7.34 Kb)

GIF tiene también la posibilidad de guardarse en modo entrelazado, lo que permite que, a la hora de mostrar una imagen, se representen primero, por ejemplo, las líneas impares del dibujo y luego las pares (o una de cada tres...), lo que permite que el navegante pueda ver una versión de "baja calidad" de tu dibujo mientras este termina de mostrarse en pantalla.

Existen varias versiones de GIF. La versión más moderna es la llamada GIF89a que, además de lo anterior, permite designar un color como trasparente (de modo que, en los pixels que ocupe ese color, se verá el color o imagen de fondo) y, además, permite crear pequeñas animaciones (básicamente, lo que hace es unir varias imágenes y presentarlos en orden, a modo de fotogramas).

El principal problema de GIF, además de su bajo rendimiento con degradados y su poca profundidad de color, es que el algoritmo LZW está licenciado por Unisys. Y resulta que, repentinamente, el día de año nuevo de 1995, Unisys y Compuserve decidieron que cualqiera que desee implementar a un programa la capacidad de mostrar o crear GIFs debe pagar derechos a Unisys y Compuserve. Es más, Unisys y Compuserve se reservan el derecho de cobrar derechos a cualquiera que utilice imágenes GIF, por ejemplo, en sus páginas web (de hecho, esta es una amenaza que ha estado a punto de cumplir varias veces).

Esta política de Compuserve ha hecho que muchas personas se nieguen a usar GIFs en sus páginas, y a que se inicien varias campañas en contra de este formato, la más famosa de las cuales es la llamada Burn all GIFs (Quema todos los GIFs).

Puedes obtener má datos sobre la licencia del formato GIF. También puedes profundizar en los detalles técnicos de este formato gracias a la Especificación del formato GIF.

---

El formato PNG

Como respuesta a los problemas del formato GIF (fundamentalmente los legales, pero también los técnicos), se inició un proyecto a través de Internet para crear un sustituto. El resultado de ese proyecto fué el formato PNG.

Las siglas PNG significan Portable Network Format (Formato Portable para Redes, aproximadamente), y es el más joven de los tres que tenemos aquí. Precisamente, esta "juventud" es su primer y mayor defecto: PNG es completamente irreconocible por navegadores antiguos.

Por otro lado, PNG tiene una serie de característica que lo hacen realmente atractivo. Para empezar es un formato totalmente libre, de modo que cualquiera puede implementarlo en sus programas o usarlo libremente del modo que prefiera sin pagar derechos a nadie.

En cuanto a sus capacidades gráficas no está nada mal: Soporta una profundidad de color máxima de 24 bits (16.7 millones de colores), usa un sistema de compresión sin pérdida denominado LZ77 que permite reducir el tamaño de los archivos sin reducir su calidad y, si eso no es suficiente y crees que te va a sobrar alguno de los 16 millones de colores, puedes reducir la profundidad para así reducir más el tamaño de los ficheros.

PNG puede además guardarse en modo entrelazado, tal como vimos en GIF y JPEG, y ya hay disponibles versiones del formmato con transparencias (incluso con la posibilidad de asignar diversos grados de transparencia).

El único punto donde aún es superado por GIF es en la posibilidad de contener animaciones, y existe un proyecto en marcha para crear una versión de PNG animada, llamada MNG.

En definitiva: No parece que aún sea el momento ideal para abandonar todos tus GIFs y pasarte al PNG. A PNG aún le queda algo de camino por delante, pero sus versiones más básicas ya son soportadas por los principales navegadores, y parece que le espera un futuro muy prometedor.

Para saber más de este formato, puedes visitar el site oficial de PNG y la página con la especificación del formato PNG.

---

| Página principal | Curso de HTML | Tutorial de CSS | Mapa del Site |

---

HTML 4.0 VálidoCSS Válido