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, JPG y PNG.

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

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.

Además de estas caracteristicas el formato GIF89a una versión de GIF permite contener varias imágenes en la misma imagen consiguiendo una pequeña animación (imagen en movimiento). Como por ejemplo la imagen que utilizamos para indicar una animación

PNG es una abreviatura de Portable Network Graphics . Este formato puede llegar a terner 48 bits, con los cuales puede mostrar trillones de colores. El inconveniente de tanta calidad es que genera archivos de gran tamaño.

Este formato puede llegar a comprimir entre un 10 ó un 30% más que el formato GIF. Este formato incluye grados de transparencia, entrelazado, corrección de gamma (es el ajuste de luz y sombras) y paletas de colores. Una carencia que tiene este formato es que no tiene la capacidad del formato Gif89a, es decir no admite imágenes animadas.

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 con gran calidad. 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 con 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 (pasadas para dibujar la imagen) 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, PNG, 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 PNG	FOTO JPG poca compresión	FOTO JPG mucha compresión
188 kb - 22 segundos	15 kb - 5 segundos	39 kb - 5 segundos	6 kb -2 segundos	3 kb - 1 segundo

Con imágenes pequeñas a simple vista no notamos demasiado la perdida de calidad, pero cuando estamos trabajando con imágenes de grandes dimensiones y deseamos hacer zoom (acercarnos) sobre la imagen es cuando notamos si tiene o no calidad, una imagen con poca calidad no admite zoom, o mejor dicho admite zoom pero la imagen se distorsiona, por cada zoom que hacemos vemos la imagen cada vez más pixelada (los pixel son los puntos de color que tiene una imagen, a mayor resolución más pixeles tiene la imagen en un recuadro) y por tanto con menos definición.

Todas estas características podemos cambiarlas con nuestro editor de imágenes favorito (Coreldraw, Corel Photo Paint, Photoshop, Fireworks, etc).

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.

Pág. 5.1