Imágenes

¿Qué son las imágenes en una página web?

Las imágenes son un elemento esencial para diseñar páginas atractivas. No obstante, un excesivo número de imágenes en una página pueden hacer ralentizar el proceso de visualización (las imágenes son las partes delas páginas que más espacio ocupan, por lo que su transferencia requiere más tiempo que la del texto). Es importante conseguir un compromiso entre una página atractiva (lo que lleva incluir gráficos), y una página que pueda cargarse en un tiempo razonable

Principales formatos gráficos en internet

Existen una gran cantidad de formatos gráficos en el mundo de los ordenadores, cada uno de ellos con sus ventajas e inconvenientes. Sin embargo, a la hora de publicar en Internet, solamente debemos tener en cuenta dos formatos muy específicos: el GIF y el JPEG. Su elección no es en absoluto un capricho, además de la alta resolución que consiguen, se trata como veremos, de dos formatos que comprimen el tamaño de las imágenes, por lo que éstas pueden transmitirse más rápidamente por Internet.

Formato GIF

Las siglas GIF provienen del inglés Graphics Interchange Format o formato de intercambio de gráficos. Este formato fue desarrollado por CompuServe para proporcionar un mecanismo de transmisión de archivos de imágenes mediante líneas telefónicas. Este mecanismo consiste en comprimir las imágenes para una transmisión más rápida en un medio de baja capacidad como son los hilos telefónicos.

Las imágenes en formato GIF están limitadas a 256 colores simultáneos.

Una propiedad interesante del formato GIF es la de poder seleccionar un color “transparente”.

Así, cuando la imagen en cuestión es mostrada en un visualizador, la zona de la imagen con el color transparente toma el color del fondo del documento.

Otra propiedad interesante del formato GIF, es la poder crear gráficos animados, el formato de este tipo de imágenes se le denomina GIF 89.

Los archivos de imágenes en este formato tienen asociados la extensión .gif.

Formato JEPG

JPEG son las iniciales de Joint Photographic Expert Group (Grupo de

Expertos Fotográficos Reunidos). Al igual que el formato GIF, comprime las imágenes para una transmisión más rápida, aunque difiere en el algoritmo de compresión.

Mientras que con el formato GIF la comprensión de un archivo de imágenes viene determinada, JPEG nos permite especificar la relación de compresión deseada, por lo que podemos variar el tamaño del archivo. Naturalmente, a mayor relación de compresión, menor tamaño y peor calidad en la imagen final.

Disminuyendo la compresión obtenemos imágenes de mayor calidad pero también de mayor tamaño.

No debemos obsesionarnos con la calidad delas imágenes. Hay que tener presente que

Internet es en ocasiones un medio de transmisión bastante lento, por lo que a veces es preferible perder algo de calidad en las imágenes antes de aburrir al visitante con nuestros documentos.

Los archivos de imágenes en este formato tienen asociado la extensión .jpg.

Inclusión de imágenes

La etiqueta que se utiliza para la inclusión de imágenes en una página Web es la siguiente:

<IMG SRC=”imagen.jpg”></IMG>

Donde imagen.jpg es un archivo de imagen

Tamaño de las imágenes

Si no especificamos nada más, las imágenes aparecerán en el navegador con el tamaño que tienen originalmente.

Para modificar el tamaño de las imágenes se utilizan los siguientes  modificadores en la etiqueta <IMG>:

•WIDTH: especifica la anchura en pixeles de la imagen.

•HEIGTH: especifica el número de pixeles que tendrá de alto la imagen.

 Escalado de imágenes

Con el uso de los modificadores HEIGHT y WIDTH podemos ampliar, y reducir las imágenes sin deformarlas, es decir, escalarlas. Una manera cómoda de hacerlo es solamente especificar una de las dos dimensiones, se asume que la reducción o la ampliación son proporcional a la otra.

Bordes de la imagen

Mediante el modificador BORDER se puede añadir bordes a nuestras imágenes.

Alineación de texto con imágenes

La alineación del texto con las imágenes se realiza mediante el modificador ALIGN. Los valores que este modificador puede tomar son: TOP, TEXTOP, CENTER, ABSCENTER, MIDDLE, ABSMIDDLE, BOTTOM, LEFT, y RIGTH.

Además podemos especificar la distancia que queremos establecer entre el gráfico y el texto.

Si este parámetro no se establece, el texto es situado justo a continuación de la imagen. Para introducir espacios horizontales y verticales a continuación de la imagen se utilizan los modificadores VSPACE y HSPACE.

Imágenes con texto alternativo

Los visualizadores tienen la opción de no mostrar las imágenes,  en un intento de acelerar el acceso a las páginas. Muchas veces, las imágenes incluidas en una página son fundamentales para comprender la información que se ofrece. Por ejemplo, una página destinada a alumnos universitarios de asignaturas de estadística o matemáticas puede contener imágenes de fórmulas matemáticas. Para estos casos se puede añadir a la imagen un texto ALTernativo, que dé una idea del contenido de la imagen. Para añadir un texto alternativo, se utiliza la orden como se muestra a continuación:

<IMG SRC="nombre_imagen" ALT="Texto_alternativo">

Uso de imágenes como enlace

Para utilizar una imagen como enlace a otra parte de la página o a otra página, simplemente hay que introducirlas dentro de la etiqueta:

<A HREF> de la siguiente manera:<A HREF=”enlace”><IMG SRC=”imagen”> </A>

Imágenes de fondo de un documento

Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML. La manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>.

La imagen de fondo en general será más pequeña que el área de documento del navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen que hemos elegido como fondo del documento.

A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento debe ser legible por encima dela imagen, por lo que hay que evitar colocar imágenes con colores demasiado fuertes.