6. Mejoras en las imágenes

Tanto el formato GIF como el formato JPEG pueden ser vistos con casi la práctica totalidad de los navegadores. Sin embargo ¿Cuándo es conveniente usar uno y cuando es conveniente usar el otro?, ¿Puedo convertir las imágenes de un tipo a otro?, ¿Qué ventajas ofrece cada uno?. Conocer las respuestas a estas preguntas nos permitirá usar de una manera mucho más eficiente y profesional las imágenes en nuestras páginas. En este apartado nos dedicaremos a responderlas y veremos las últimas novedades del formato GIF que permite crear imágenes transparentes e imágenes con movimiento. Para terminar comentaremos algunos consejos para aprovechar al máximo y eficientemente las posibilidades del HTML en lo que a las imágenes se refiere.

6.1. Formatos GIF y JPEG

El formato GIF (Graphics Interchange Format, Formato de intercambio de gráficos) fue creado por CompuServe con el objetivo de que fuese entendido por todo tipo de ordenadores. La primera versión de este formato es actualmente conocida como GIF87 y sus principales características son:

Lo que le convierte en un formato idóneo para logos, iconos e todo tipo de dibujos con colores sólidos. Poco después apareció una segunda versión del formato conocido como GIF89a que añadía las siguientes características:

Actualmente los principales problemas del formato GIF es su limitación 256 colores, su mala compresión de fotografías y que está patentada por CompuServe, que quiere empezar a cobrar por su uso

El formato JPEG (Joint Photographic Experts Group) fue creado por un grupo de expertos en fotografía por lo que está pensado especialmente para este tipo de imágenes. Sus principales características son:

Esta última característica es el gran contratiempo que tiene el formato JPEG pero en la mayoría de las ocasiones es inapreciable. Al comprimir una imagen en formato JPEG se puede elegir un nivel de compresión de 1 a 99. Cuanto mayor sea este nivel mayor será la compresión pero también habrá un mayor deterioro de la señal. En la figura 5.32:

Figura 5.32. Mientras que el tamaño de la imagen JPEG es mucho menor la pérdida de calidad apenas es apreciable.

podemos ver una comparación entre la imagen de la ballena en formato GIF y formato JPEG con un nivel de compresión 80 (lo habitual es 20). Existe pérdida de calidad, pero no es muy apreciable, mientras que la disminución de tamaño es impresionante y para imágenes de mayor tamaño la diferencia es aún mayor.

Una vez conocidas las características de los dos formatos ha llegado el momento de decidir cuando es conveniente usar uno y cuando es conveniente usar el otro. Por lo general:

EJERCICIO 5.2: Llegados a este punto podemos darnos cuenta que en la práctica 2 usamos el formato GIF en algunas fotografías y que el resultado hubiese sido mucho mejor usando el formato JPEG. Este segundo ejercicio tendrá como objetivo usar un programa de retoque fotográfico para convertir de formato estas imágenes (montanas.gif y ski.gif). Los programas que pueden usarse para llevar a cabo este propósito son muchos: PhotoShop y Paint Shop Pro son una buena muestra de ellos. En el archivo ej5-2.zip se incluyen las dos imágenes ya convertidas con un nivel de compresión 60. De esta forma hemos conseguido reducir montanas.gif de 13 Kb a 6'5 Kb y ski.gif de 10 Kb a 4'6 Kb. Aunque en un principio puede parecer poco cuando una página tiene bastantes imágenes escogiendo adecuadamente el formato de cada uno conseguiremos que cargue mucho más rápido.

Además de GIF y JPEG existen otros formatos que no son usados habitualmente en el WWW, pero merece la pena comentar los formatos que entienden los dos principales navegadores:

Entre todos estos hay uno que destaca: PNG (Portable Network Graphics), porque representa el futuro de los formatos de almacenamiento de imágenes y combina las ventajas de GIF y JPEG junto con otras nuevas:

El formato PNG está pensado como un sustituto para el formato GIF, ya que JPEG seguirá siendo mejor con las fotografías. Por otro lado todavía habrá que esperar algún tiempo para que sea ampliamente aceptado. Aquellos lectores interesados en el tema pueden obtener más información al respecto en las siguientes direcciones:

6.2. Transparencia, Entrelazado y GIFs animados

Estas son las tres principales características que fueron añadidas al formato GIF en la revisión GIF89a. Vayamos una por una:

Nota

No es conveniente usar muchas imágenes animadas en una misma página. Primero porque ocupan bastante tamaño, segundo porque pueden ser mareantes para el visitante y tercero porque provocarán que el navegador vaya muy lento si el ordenador no tiene mucha memoria. Por estas razones nuestra recomendación es usar un máximo de 2 imágenes animadas por página.

EJERCICIO 5.3: Este es el ejercicio final de este largo capítulo dedicado a las imágenes y al color en las páginas Web. En él pretendemos que el lector aplique los conocimientos que ha adquirido para mejorar el aspecto gráfico de las páginas que creamos en la práctica 2. En concreto proponemos los siguientes cambios:

En el archivo clip.zip se ofrecen algunas imágenes que pueden ayudar a realizar este ejercicio y en el archivo pract2++.zip se muestra una posible solución a este de la que podemos ver un anticipo en la figura 5.34.

Figura 5.34. Aspecto final de la página de Los Alpes después de aplicar los conocimientos sobre imágenes que hemos adquirido en este capítulo.