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.
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:
-
Puede almacenar 16 millones de colores. Además, al contrario de lo que ocurría con el formato GIF, el tamaño es independiente del número de colores usados.
-
Ofrece un algoritmo de compresión que reduce grandemente el tamaño de las fotografías.
-
Esta compresión produce pérdidas, es decir, la imagen sufre deterioro.
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:
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:
-
Conviene usar GIF si la imagen es pequeña y hay pocos colores, con mayor motivo aún si hay bloques de la imagen con todos los pixels del mismo color, como ocurre en los logos y dibujos similares.
-
Es recomendable usar JPEG siempre que la imagen sea muy grande y/o tenga muchos colores como sucede en las fotografías.
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:
-
Netscape soporta los formatos de imágenes GIF, JPEG, XPM y XBM.
-
Explorer soporta los formatos GIF, JPEG, PNG y BMP.
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:
-
Buena compresión tanto para logos como para fotos.
-
Posibilidad de transparencia y entrelazado.
-
16 Millones de colores.
-
Compresión sin pérdidas.
-
Capacidad de añadir comentarios e información extra junto con la imagen.
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:
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:
-
Las imágenes transparentes consisten simplemente en elegir un color de la imagen que no será pintado por el visualizador (en nuestro caso será el navegador) al mostrarla. El uso de imágenes transparentes es especialmente útil cuando usamos una página con fondos. Por ejemplo, en la figura 5.33:
podemos ver la imagen de Los Alpes con transparencia y sin transparencia en una página con una imagen de fondo. En general las únicas imágenes que podemos considerar como candidatas a convertirse en imágenes transparentes son aquellas con un color de fondo dominante. Si intentáramos hacer transparente una fotografía los resultados no serían los deseados.
-
Las imágenes entrelazadas son imágenes muy similares a las normales. La única diferencia radica en la manera en que se va mostrando la imagen en el navegador según llega. Cuando un navegador carga una imagen normal va mostrándola desde el principio y va avanzando hacia abajo. Las imágenes entrelazadas por el contrario se muestran al principio como una imagen borrosa que se va aclarando según la imagen termina de llegar, esto ocurre por el método especial de almacenamiento que se usa en este tipo de imágenes. El entrelazado es especialmente útil cuando se aplica a las imágenes mapa, ya que en ocasiones no es necesario ver la imagen a la perfección para elegir una opción.
-
La tercera novedad del formato GIF89a es probablemente la que más éxito ha tenido. Como el lector ya ha adivinado estamos hablando de las imágenes animadas o GIFs animados. En los primeros años del WWW la única forma de tener una animción en nuestras páginas consistía en usar un applet (programilla) de Javao similar, con los inconvenientes que esto representaba. Con la aparición de los GIFs animados todo se simplificó, estos en realidad no son más que varias imágenes en formato GIFalmacenadas en un único archivo y que se van alternando ordenadamente para crear el efecto de la animación. Cada una de estas imágenes deben ser creadas por separado y despues juntadas con algun programa especial como Microsoft Gif Animator, GIF Movie Gear, etc. Otra manera de obtener imágenes es acudir a las númerosas páginas de internet con colecciones de estas imágenes a nuestra disposición. En el directorio público DMOZ puede encontrarse una gran cantidad de enlaces a estas páginas en su sección de GIFs animados.
|
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:
-
Poner un fondo en ambas páginas. El fondo debe ser preferiblemente de tonos claros para que se pueda leer el texto con facilidad. Si es necesario deberemos cambiar el color de este para facilitar la legibilidad.
-
Hacer que tanto los enlaces normales y los visitados sean de color verde y los activos morados.
-
Añadir los tamaños de las imágenes con los atributos WIDTH y HEIGHT.
-
Incluir un texto alternativo (ALT) en todas y cada una de las imágenes.
-
Añadir alguna imagen externa en los viajes con temas relacionados con el destinos.
-
Mejorar el aspecto gráfico general con ideas propias del lector.
-
Usar adecuadamente los tipos de imágenes para conseguir una página con gran contenido gráfico de un tamaño total (el documento HTML y todas las imágenes) de 40 Kb o menor.
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.
