Unidad 5. Imágenes (I)

Vamos a ver cómo se usan las imágenes en una página Web, cuáles son los formatos más usados en Internet y cómo combinar imágenes y texto para tener una Web atractiva.

Formatos de imágenes usadas en Internet: GIF y JPG.

Para mostrar fotos o dibujos, se suelen usar principalmente dos formatos de imagen: GIF y JPG. El primero, GIF, se suele usar para dibujos y pequeñas fotos de pocos colores. JPG es usado para presentar fotos a todo color. Pero, ¿qué son exactamente GIF y JPG?

GIF es una abreviatura de Graphic Interchange Format. Este formato utiliza como máximo 256 colores, por lo que al representar una foto puede perderse colorido. Por ello es usado para mostrar dibujos, esquemas, fondos y pequeñas fotos. Tiene varias características interesantes, como son el entrelazado y la transparencia. Al contrario que JPG, que veremos a continuación, no se pierde calidad con este formato.

El entrelazado permite que la imagen se cargue en el ordenador que visualiza la página Web poco a poco, mientras va mostrando versiones de la imagen cada vez más aproximadas a la versión normal. Esta característica es interesante para ordenadores con una conexión lenta a Internet, porque el usuario puede decidir que la imagen que se está cargando no le interesa, dejando entonces esa página para cargar otra. Sin embargo esta característica no se usa mucho actualmente, excepto para páginas Web con muchas imágenes. Un ejemplo del entrelazado sería el siguiente:

Imagen original/final	Imagen cargando

La transparencia permite elegir un color de los 256 para hacerlo transparente y representar el fondo que se encuentre detrás del dibujo. Veamos el siguiente ejemplo. El primer logo es un GIF sin transparencia, mientras que el segundo es un GIF con transparencia (hacemos transparente el color rojo).

Todas estas características podemos cambiarlas con nuestro editor de imágenes favorito.

JPG o JPEG es una abreviatura de Joint Photographic Experts Group. Este formato utiliza 16 millones de colores, por lo que es el adecuado para mostrar fotos. Además, JPG puede comprimir la imagen para que ocupe menos espacio, por lo que grandes imágenes pueden ser cargadas con una velocidad aceptable.

La compresión tiene un precio, y es la pérdida de calidad respecto a la imagen original. JPG nos permite comprimir más o menos las fotos, perdiendo más o menos calidad.

También podemos elegir la cantidad de barridos antes de mostrar la imagen final. Es una característica similar al entrelazado del GIF.

Veamos un ejemplo de una foto guardada en formato GIF, en JPG y en JPG con mucha compresión, así como su tamaño para hacernos una idea de cuanto tardaría en cargarse desde Internet (suponiendo una conexión con módem, que es la más lenta pero la más extendida).

Foto original	FOTO GIF	FOTO JPG poca compresión	FOTO JPG mucha compresión
188 kb - 22 segundos	37 kb - 5 segundos	17 kb -2 segundos	8 kb - 1 segundo

Todas estas características podemos cambiarlas con nuestro editor de imágenes favorito.

Insertar una imagen.

Vamos a insertar imágenes en nuestra página Web. La forma más sencilla y rápida es la siguiente:

Pulsamos con el ratón sobre el lugar donde queremos poner la imagen.

Pulsamos el icono Insertar imagen desde archivo .

Nos aparecerá el cuadro de diálogo Imagen:

Ahora tan sólo tenemos que elegir la imagen de nuestro disco duro que queremos incluir en nuestra página, pulsando en Insertar para cargarla. Como podemos observar podemos cargar distintos tipos de imagen. FrontPage las guardará automáticamente como GIF si la imagen tiene 256 o menos colores, o como JPG si tiene más.

Cambiar el tamaño de una imagen.

Tras cargar la imagen, es el momento para que ajustemos su tamaño al que más nos interese. Para ello hacemos clic en ella con el botón izquierdo del ratón sobre la imagen y aparecerán 4 cuadraditos en la imagen. Pinchando en ellos con el botón izquierdo del ratón y sin soltar, arrastrando el ratón, podemos cambiar el tamaño de la imagen (el ratón cambia de forma cuando lo situamos encima de uno de estos cuadraditos a o ).

Para ajustarla en horizontal, pinchamos en los cuadraditos que salen a la derecha o a la izquierda. Para ajustarla en vertical pinchamos en los cuadraditos de arriba o abajo. Para ambos ajustes pinchamos en los cuadraditos de las esquinas (arrastramos en diagonal).

Cambiar el tamaño de una imagen hace que pueda parecer distorsionada. Esto puede notarse más o menos según el tamaño original de la imagen. Mientras más cambie una imagen, más se distorsiona. Si queremos cambiar el tamaño de una imagen conservando todo lo que se pueda la imagen original, debemos usar un programa de tratamiento de imágenes, aunque para pequeños cambios podemos usar FrontPage perfectamente.

El archivo que contiene la imagen no cambia aunque cambiemos su tamaño en FrontPage. Siempre podemos volver al tamaño original, como explicamos en el punto de Propiedades de la imagen.

Usar una imagen como fondo de una página.

Podemos usar una imagen como fondo de una página Web.

Para poner una imagen de fondo hacemos clic en Formato y después en Fondo.

En la ventana que se nos abrirá debemos hacer clic en la pestaña Fondo y asegurarnos de marcar la opción Fondo de imagen.

Después tenemos que buscar qué imagen queremos poner como fondo, haciendo clic en Examinar. 

La imagen saldrá como fondo de página y, si no ocupa toda la pantalla, el explorador automáticamente la llenará con copias de la imagen.

Si queremos cambiar la imagen de fondo repetimos el proceso eligiendo otra imagen, y si queremos quitar la imagen de fondo, repetimos el proceso desmarcando la opción Fondo de imagen.

Podemos activar la opción de marca de agua. En ese caso el fondo no se desplaza cuando nos movemos por la página al subir o bajar la barra de desplazamiento. No todos los exploradores admiten este efecto, por lo que no se recomienda usarlo.

Es importante seguir los siguientes consejos cuando usemos fondos:

• No usemos imágenes demasiado grandes excepto cuando sea necesario, ya que harán más lenta la carga de la Web.

• Las imágenes deben seguir el estilo de la página, de esta forma conseguiremos que la imagen acompañe la estética de la Web.

• Si usamos una imagen oscura, es conveniente usar texto de color claro y viceversa. Cuando la imagen contenga zonas claras y oscuras, evite usar texto en estas zonas.

Pág. 5.1