1-Introducción.

Uno de los elementos que más ha contribuido a la enorme popularidad con la que hoy cuenta el WWW es la utilización de recursos multimedia, es decir, elementos tomados de medios distintos al texto convencional que se utilizaba como base en las primeras herramientas basadas en Internet(Gopher, Telnet, etc.). Estos recursos pueden ser de distintos tipo: Sonido, Imágenes estáticas, Imágenes en movimiento, Gráficos animados, Gráficos de alta resolución, Videoconferencia, etc.

De todos ellos, sin duda el más extendido en su uso, y el más fácil de incorporar a nuestras páginas, son las imágenes estáticas, a las que a partir de este momento nos referiremos simplemente como imágenes.

El uso de imágenes dentro de una página Web puede tener diferentes objetivos: hacerla más atractiva, incorporar información, facilitar el acceso (especialmente mediante la incorporación de iconos que ayuden a los usuarios de diferentes lenguas). Las imágenes pueden además utilizarse como fondos para nuestras páginas o como elementos activos en los enlaces hipertexto, permitiendo acceder a otros recursos simplemente haciendo clic en una imagen determinada o en una parte de dicha imagen (mapas activos, los cuales se explicarán detalladamente más adelante).

2-Formatos de imágenes.

Los navegadores actualmente más extendidos soportan únicamente dos formatos de imágenes, los denominados GIF (extensión .gif)y JPEG (extensión .jpg o .jpe). Estos formatos tienen características, aplicaciones y funciones claramente diferentes, y es interesante conocerlas de cara a utilizarlos de forma más eficaz.

GIF y JPEG son en realidad formatos de compresión de imágenes (la imagen es guardada de forma que ocupa menos espacio del que ocuparía si lo guardásemos en formato PICT o BMP por ejemplo). Esto es importante a la hora de enviar y recibir ficheros gráficos a través de la red, pues tamaños más pequeños significan tiempos de transferencia más cortos, y por lo tanto un menor consumo de recursos (ancho de banda) de la red.

Para conseguir unos niveles de compresión aceptables, cada uno de los formatos emplea una tecnología distinta, y gran parte de las ventajas e inconvenientes de cada uno de ellos derivan de estos métodos de compresión. A continuación vamos a ver brevemente cada uno de estos formatos, resaltando sus respectivas ventajas, inconvenientes, y su utilidad

Para el usuario normal, las imágenes en formato GIF o JPEG son totalmente indistinguibles entre sí. La imagen superior se encuentra en formato GIF, mientras que la de la abajo es una imagen JPEG.

A- Formato JPEG/JFIF
B- Formato GIF
C- Aplicaciones de ambos formatos

A-Formato JPEG/JFIF.

3-Incorporación de imágenes a las páginas HTML.

La incorporación de imágenes a un documento HTML no es especialmente complicada si utilizamos un editor de modo gráfico como Netscape Composer, pero tampoco lo es si trabajamos con códigos. Veamos como se hace.

Como hemos visto, las imágenes, independientemente de que sean GIFs o JPGs, se codifican en HTML por medio de una única etiqueta: <IMG SRC> (Image Source). Esta etiqueta soporta muchos atributos (como veremos más adelante) que nos permiten redimensionar las imágenes, alinearlas y establecer el margen entre la imagen y el texto que la rodea. Sin embargo, la estructura más simple de una etiqueta de este tipo es como sigue.

<IMG SRC="imagen.gif">(para imágenes en formato GIF)

<IMG SRC="imagen.jpg">o <IMG SRC="imagen.jpe">(para formato JPEG).

Donde "imagen" representa el nombre del archivo que queremos cargar en el documento.

Las imágenes pueden cargarse en cualquier parte del cuerpo (BODY) de una página, incluyendo dentro de una lista, en las celdas de una tabla, etc.

4-Redimensionado de imágenes.

Puede darse el caso de que las imágenes que queramos incluir dentro de un documento HTML sean demasiado grandes o demasiado pequeñas para nuestros propósitos. Por suerte la especificación HTML nos da la posibilidad de cambiar las dimensiones de las imágenes en el momento de cargarlas en el documento. Esto es lo que comúnmente se denomina redimensionado de imágenes. Este redimensionado se realiza mediante la adición a la etiqueta <IMG SRC> de dos atributos: HEIGHT que controla el tamaño vertical de la imagen (el "alto") y WIDTH que controla su tamaño horizontal(su "ancho").

Es importante tener en cuenta que el redimensionado de imágenes puede ser útil para ahorrar espacio en una pagina Web, pero no disminuye el tiempo de carga de la imagen. Si lo que nos interesa es hacer que las imágenes se carguen más rápido, es mejor reducir su tamaño en una aplicación de edición digital de imágenes, antes de incorporarlas a la página.

Debido a que los formatos soportados en HTML (GIF y JPEG) son dependientes de la resolución; el aumento excesivo del tamaño de una imagen por encima de las proporciones originales dará como resultado la distorsión comúnmente conocida como "pixelación", en la cual las imágenes aparecen formadas por cuadrados más o menos grandes. Por el contrario el reducir las dimensiones de una imagen no produce ningún tipo de distorsión, y es muy útil (y aconsejable) en el caso de imágenes de gran tamaño, que de otra manera tardarían demasiado tiempo en cargarse.

Incluso aunque no pretendamos alterar las dimensiones de la imagen, es aconsejable utilizar los atributos WIDTH y HEIGHT, asignándoles los valores del tamaño de la imagen original. La razón de esto es que haciéndolo así, la carga de la página será más rápida.

¿Por qué? Hay que tener en cuenta que las imágenes son uno de los elementos más lentos a la hora de cargarse, mucho más que el texto. Al dar los valores del tamaño de las imágenes(por medio de WIDTH y HEIGHT), el navegador "sabe" por adelantado el tamaño que ocuparán, y podrá reservarles el tamaño correspondiente. Esto permite al navegador cargar toda la página (texto) antes de empezar a cargar las imágenes; en caso contrario, la carga de la página se interrumpiría en el momento de aparecer una imagen, y no continuaría hasta que dicha imagen estuviera totalmente cargada.

5-Alineación de las imágenes y del texto acompañante.

Cuando se habla de alineación en referencia a imágenes incluidas en documentos HTML es preciso diferenciar dos tipos: la alineación de la propia imagen con relación a los bordes de la página(o para ser más exactos, con relación a los márgenes de la ventana en la que se cargará la pagina) y la alineación del texto que acompaña o rodea la imagen en relación con la propia imagen.

Lo más destacable en este caso, como hemos podido ver, es que un único atributo (ALIGN), soportado por la misma etiqueta(<IMG SRC>) permite controlar ambas alineaciones, la de la imagen y la del texto acompañante. En el primer caso ALIGN puede tomar los valores LEFT, CENTER y RIGHT, como ya vimos anteriormente, mientras que para controlar la alineación del texto acompañante, ALIGN toma los valores TOP, MIDDLE y BOTTOM.

Así por ejemplo, la siguiente etiqueta

<IMG SRC="imagen.gif" HEIGHT=660 WIDTH=300 ALIGN=LEFT ALIGN=TOP>

define una imagen de 660 pixeles de ancho, 300 de alto, alineada a la izquierda de la página y cuyo texto acompañante queda alineado en la parte superior de la imagen.

6-Imágenes como elementos activos de un enlace hipertexto.

Otra función de las imágenes dentro de un documento HTML es la de servir de elementos activos en un enlace hipertexto, es decir, que al pinchar dentro de la imagen se invoque un recurso HTML (otra imagen, una página HTML, etc.).

Hay dos maneras de crear enlaces a partir de una imagen: de forma directa o por medio de lo que se conoce como "Mapas Activos" o "Mapas Sensibles"; este último método, mucho más complejo, lo describiremos en un módulo posterior, por el momento nos limitaremos a explicar como crear enlaces directos desde una imagen.

La estructura de un enlace desde una imagen es básicamente la misma que la utilizada para crear un enlace hipertextual normal (etiqueta<A HREF></A>), con la diferencia de que en el lugar del elemento activo del enlace (normalmente una palabra o frase), incluiremos la etiqueta <IMG SRC>. La estructura resultante será la siguiente:

<A HREF="archivo1.html"><IMG SRC="imagen.jpg"></A>

donde "archivo1.html" es el nombre del recurso que queremos invocar a través del enlace, e "imagen.jpg" es el nombre del archivo gráfico que utilizaremos como elemento activo.

Crear un enlace a partir de una imagen en Netscape es también bastante simple, y sigue los mismos pasos que ya se explicaron para crear un enlace convencional.

Como en HTML, cuando una imagen se convierte en elemento activo de un enlace, queda rodeada de un marco de color azul (el mismo color azul que identifica los enlaces comunes). Esto puede ser interesante ocasionalmente, pero lo más común es que se suprima por razones de estética.

El ancho de este marco o borde viene definido por el atributo BORDER, soportado por <IMG SRC>. El valor de BORDER por defecto (es decir, el que asume si no se incluye explícitamente en la etiqueta <IMG SRC> es uno (un borde de un pixel de ancho), pero puede modificarse a voluntad.

Para eliminar totalmente el borde de una imagen, basta con asignar un valor de cero ("0") al BORDER. Esta es la opción por defecto de Netscape Composer (no confundir con la del valor por defecto de BORDER que se explicó anteriormente), por lo que en la mayoría de los casos no tendremos porque preocuparnos por ello.

7-Imágenes como fondos de las páginas HTML.

En un módulo anterior vimos como es posible "alterar" los fondos de las páginas cambiando el color. Otra posibilidad es incluir como fondo de la pantalla una imagen (también en formato GIF o JPEG).

Como hemos visto, la definición de una imagen de fondo se realiza por medio del modificador BACKGROUND, soportado por la etiqueta <BODY> de acuerdo con la siguiente estructura:

donde "imagen.jpg" es el nombre del archivo gráfico que queremos utilizar como fondo de la página.

Al cargarse como fondo, la imagen en cuestión se repetirá como un mosaico a lo largo de toda la página.

ADVERTENCIAS Y RECOMENDACIONES:

Para evitar esto es conveniente incluir junto al atributo BACKGROUND el atributo BGCOLOR, asignándole un valor (color) lo más parecido posible al de la imagen elegida como fondo. La estructura resultante sería:

<BODY BACKGROUND="imagen.jpg" BGCOLOR="#xxyyzz">

9. Ejercicios prácticos.