Comunidad de diseño web y desarrollo en internet

Imágenes

Nada en la vida existe para que lo temamos,simplemente para que lo entendamos.
Marie Curie, científica

Las imágenes son un elemento importante a la hora de hacer más atractiva una web, o de aportar más información. No obstante, hay que saber cuándo utilizarlas y no abusar de ellas.

Podemos usar tres formatos de imagen: GIF, JPEG y PNG. El JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos. Las imágenes GIF sólo pueden almacenar hasta 256 colores diferentes, pero uno de estos colores puede ser transparente. El formato PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). Además, les podemos añadir un canal alpha para crear efectos con transparencias de diferente opacidad. Pero Ya-Sabéis-Cuál navegador en su versión 6 y anteriores no implementa correctamente los PNG, así que hay que llevar cuidado.

Insertar una imagen

Para poner una imagen, hacemos uso de la etiqueta <img> con unos cuantos atributos:

<img src="image.gif" width="ancho" height="alto" alt="descripción" />

Con src establecemos qué imagen queremos mostrar. Al igual que con los links, hay que tener en cuenta la ruta hacia la imagen. Por motivos de organización, normalmente tendremos las imágenes en un subdirectorio (o varios) llamado images, así que escribiríamos src="images/algo.gif".

Los atributos width y height nos permiten establecer el ancho y el alto de la imagen. Podemos indicar un valor absoluto en píxeles o uno relativo en tanto por ciento. Por ejemplo, width="200" mostraría la imagen con 200 píxeles de ancho, mientras que width="100 %" hace que la imagen ocupe toda la pantalla de ancho. Estos dos atributos no son obligatorios, pero sí es conveniente que indiquemos las dimensiones en píxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la página.

El atributo alt contiene una descripción de la imagen, que veremos cuando no se haya podido cargar por cualquier motivo. La mayoría de navegadores también muestran esta descripción al pasar el ratón por encima de la imagen. Este atributo es obligatorio, por cuestiones de acesibilidad: hay personas que deshabilitan las imágenes para ahorrar tiempo; otras, usan navegadores de texto como Lynx; y otras, sencillamente son ciegas.

Una cita muy común entre desarrolladores web suele ser: "El visitante más importante de tu web es ciego y se llama Google".

Como ejemplo, así podríamos insertar la imagen de un banner:

<img src="images/banner.gif" width ="200" height ="40" alt="BenKo?s Art" />

Imágenes como links

También podemos hacer que una imagen sea a su vez un enlace a una página. Los navegadores suelen mostrarla con un reborde para indicarnos que se trata de un link, pero lo podemos cambiar con CSS.

Para poner una imagen como un link, la introducimos dentro de la etiqueta <a>:

<a href="http://art.ladybenko.net" title ="Mi portafolio">
<img
src="images/banner.gif" width ="200" height="40" alt="BenKo?s Art" />

</a>

Hay una técnica muy popular a la hora de implementar galerías de imágenes que consiste en usar thumbnails. ¿Qué es esto? Una thumbnail es una imagen más pequeña que la original, de modo que al hacer clic sobre ella, cargamos la imagen a tamaño completo.

Entonces, algunos que reciben Iluminación Divina hacen:

<a href ="matrix.jpg" title ="Wallpaper">
	<img src="matrix.jpg" width="100" height="50" alt="Wallpaper de Trinity" />
</a>

Eso está mal. Si nuestro wallpaper de Trinity ocupa 100KB (o más), tendremos esos 100KB ¡como thumbnail! Es decir, justo lo que queremos evitar. El escalar una imagen con width y height no hace que pese menos. Tenemos que coger un programa de dibujo, escalar la imagen, y guardar esta copia más pequeña (de 5KB, por ejemplo):

Firefox no es tan bueno.

<a href="matrix.jpg" title="Wallpaper">
	<img src="matrix_thumb.jpg" width="100" height="50" alt="Wallpaper de Trinity" />
</a>

Sobre el uso y abuso de imágenes

Dicen que una imagen vale más que mil palabras. Cierto, pero muchas imágenes, o pocas mal puestas, pueden llegar a desesperar.

¿Te resulta esto familiar? Entras a una web con un fondo de color chillón, letras verde fosforito, una cantidad obscena de GIF's animados, marquesinas, applets de Java, etc. ¿Cuánto tardas en cerrar la página? Yo menos de un segundo, es ya un acto reflejo.

Es por esto que debemos limitar los GIF's animados, así como evitar el uso indiscriminado de imágenes. Recuerda: sólo hay que poner las imágenes necesarias. Además, te ahorrarás una pasta en ancho de banda de tu servidor.

 

Información adicional

Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)

Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.