Como hemos adelantado antes, con este nombre se conoce al resultado de la combinación de imágenes inline con imágenes externas. El objetivo de los thumbnails es proporcionar una previsualización, un aperitivo, de la imagen completa (que será externa) usando una imagen inline de menor tamaño. Esta imagen inline es, de hecho, la que recibe el nombre de thumbnail, y será o bien una versión de dimensiones reducidas de la imagen final o una parte de ella. En general, o bien el propio thumbnail, o bien un texto adjunto (o ambas cosas) servirán como enlace para obtener la imagen completa tal y como podemos ver en la figura 5.27.

Figura 5.27. Ejemplos de Thumnails. En el primer caso se muestra un trozo de la imagen y en el segundo la imagen completa reducida, el efecto es similar en ambos casos.

que muestra dos ejemplos de thumbnails de la imagen completa de la figura 5.28.

Figura 5.28. Imagen completa que será mostrada cuando el visitante seleccione los enlaces que acompañan a los thumbnails de la figura 5.27

Como vemos, el uso de thumbnails permite al visitante si decide cargar la imagen completa elegir entre el formato GIF, de mayor tamaño y calidad, o en formato JPEG con calidad ligeramente peor pero mucho menor tamaño. Sobre las imágenes de aperitivo hay que decir que en el primer caso se ha usado un trozo de la imagen mientras que en el segundo se ha usado la imagen entera que ha sido reducida en tamaño con un programa de edición de imágenes. En ambos casos el tamaño de la imagen a quedado reducido a unos 15-20Kb que las hace más apropiadas para incluirlas como imágenes inline.

Es importante resaltar que para la creación de thumbnails no se pueden usar los atributos WIDTH y HEIGHT ya que se perdería su utilidad. El objetivo del thumbnail es tener una imagen en un archivo aparte que sea de menor tamaño en bytes que la original para que cargue más rápido. Al usar WIDTH y HEIGHT la imagen sigue siendo la misma, y por tanto su tamaño también, luego no conseguiremos reducir el tiempo de carga.

El uso apropiado imágenes externas y de thumbnails nos permitirá crear páginas de gran contenido gráfico y de pequeño tamaño.

Imágenes mapa

Empezamos a adentrarnos ya en algunas de las características más avanzadas del lenguaje HTML. En este caso es el turno de las imágenes mapa.

Con bastante probabilidad el lector habrá visitado alguna página en la que había alguna imagen en la que se podía pulsar en diferentes partes para acceder a diferentes destinos. Estas son las llamadas imágenes mapa y en la gran mayoría de páginas Web podemos encontrar una. En un principio para realizar las imágenes mapa era necesario usar determinados programas especiales que debían estar en el servidor Web, sin embargo con el estándar HTML 3.2 se incluyeron algunas etiquetas HTML que nos permitirán realizar estas imágenes mapa con mayor facilidad.

Fuente: Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1