Páginas Web

Unidad 9. Imágenes (I)

9.1. Introducción

Ya hemos visto que podemos incluir imágenes en nuestra página web utilizando la etiqueta <img src="imagen.png" alt="texto alternativo" />, y que estas imagen deben de ser del formato jpg, gif o png, dependiendo del tipo de imagen, para obtener la mejor relación calidad-tamaño.

En nuestro sitio de ejemplo, vamos a utilizar imágenes para mostrar fotografías, pero también como parte del diseño.

Por ejemplo, vamos a crear una galería fotográfica para las imágenes de las distintas flores que queremos colgar en nuestro sitio. La idea es tener cuatro páginas, una para cada categoría de flores (silvestres, ornamentales, exóticas y plantas), desde las que podamos acceder a las fotografías de las flores, que son de gran tamaño.

Como la mecánica es la misma, sólo haremos la galería de flores silvestres. Pero te invitamos a que intentes hacer alguna otra sin ayuda al acabar el tema.

9.2. Galería con miniaturas

Las fotografías que utilizaremos puedes encontrarlas en la carpeta fotos_flores que habrás descargado con los archivos del sitio.

La idea es simple: mostrar imágenes en una página. En principio, bastaría con ir poniendo las etiquetas img para cada imagen. Esto bastaría si fuesen imágenes de pequeño tamaño. Pero imagina una página con 15 o 20 imágenes, donde cada una ocupa toda la pantalla. La página tardaría mucho en cargarse, por el peso de las imágenes, y sería muy larga.

Por eso, lo normal cuando creamos una galería es crear miniaturas (o thumnails) de las imágenes. Se trata toda o parte de la imagen original, de menor tamaño, que al pulsar sobre ella muestra la imagen original.

La forma más simple de hacer esto es crear un enlace hacia el archivo de la imagen. Por ejemplo:
<a href="imagen_grande.jpg"><img src="miniatura.jpg" alt="Descripción" /></a>.
También se suele utilizar javascript para abrir la imagen, consiguiendo efectos más vistosos.

Para crear una miniatura de una fotografía, podríamos poner un valor menor en los atributos width y height de la etiqueta img. Y aunque esto hace que se muestre más pequeña, el archivo sigue siendo el mismo, por lo que la página tardaría lo mismo en cargar. La solución es crear un nuevo archivo de imagen, reduciendo el original.

Para trabajar con imágenes debemos de emplear algún programa especializado. Nosotros hemos elegido GIMP, por ser un potente programa de retoque fotográfico totalmente gratuito y libre. Puedes descargar su última versión desde http://www.gimp.org.es/modules/mydownloads/. Si necesitas ayuda para instalarlo, consulta este básico . También puedes utilizar otros programas, como Photoshop. Incluso, si sólo vamos a redimensionar alguna foto puntualmente, puedes utilizar programas más simples, como Paint, preinstalado en Windows.

Utilizando este programa, nos resultará sencillo crear las miniaturas. Si no conoces los programas de retoque fotográfico, puedes realizar el ejercicio paso a paso Recortar y redimensionar imágenes con GIMP.

 

En nuestro sitio de ejemplo, tendremos todas las fotografías de las flores en la carpeta fotos, dentro de la carpeta flores. Para cada foto, tendremos la fotografía que queremos mostrar, de un tamaño mayor, y la miniatura, que se llamará igual, pero terminado en _mini. La mayoría de las fotos, ya están redimensionadas y tienen la miniatura, por lo que sólo tienes que copiarlas de la carpeta fotos_flores, en la carpeta de ejercicios, que habrás descargado a la carpeta del sitio, sitio_flores/flores/fotos. La foto buganvilla.jpg es mucho mayor que las demás. Debes reducirla al 50% y obtener la miniatura tal y como se explica en el ejercicio anterior.