Las imágenes nos ayudan a hacer una web más atractiva y a aportar más información. Pero no es recomendable su uso indiscriminado y debemos saber cuándo usarlas.
Hay tres formatos de imagen que podemos utilizar: JPEG, GIF y PNG. El JPEG es el más adecuado para imágenes con muchos colores o gradientes, como fotografías. El formato GIF es más adecuado para imágenes con colores planos, sólo pueden almacenar hasta 256 colores diferentes, pero permite que uno de ellos sea transparente. Las imágenes en PNG son el estándar y permiten elegir varias profundidades de paleta (número de colores). También tenemos la posibilidad de agregarle un canal alfa y crear efectos con transparencias de distinta opacidad. Pero hay que tener cuidado porque el navegador Ya-Sabes-Cuál en su versión 6 y anteriores no implementa correctamente el formato PNG.
Insertar una imagen
La etiqueta mediante la cual insertamos una imagen es <img>, a la que se le agregan unos cuantos atributos más:
<img src="image.gif" width="ancho" height="alto" alt="descripción" />
En src ponemos qué imagen queremos mostrar, teniendo en cuenta, al igual que con los links, la ruta hacia la imagen. Generalmente, por razones de organización las imágenes se colocan en un subdirectorio llamado images, así que tendríamos que escribir src=images/algo.gif.
Con los atributos width y height establecemos el ancho y el alto de la imagen. Aunque su valor lo podemos indicar tanto en unidades relativas como absolutas, es recomendable utilizar píxeles y hacerlo con las dimensiones reales de la imagen para ahorrar trabajo al navegador a la hora de maquetar la página. Con dimensiones reales me refiero a que si la imagen tiene 200 píxeles de ancho, coloquemos width="200".
El atributo alt contiene una descripción de la imagen que se mostrará cuando ésta no se haya podido mostrar en el navegador por algún motivo. También se muestra en la mayoría de los navegadores al pasar el mouse por encima de la imagen. Por cuestiones de accesibilidad, este atributo es obligatorio: hay personas que utilizan navegadores de texto como Lynx, o usuarios que deshabilitan las imágenes para ahorrar tiempo y hay usuarios que sencillamente son ciegos.
Ejemplo:
<img src="images/banner.gif" width="200" height="40" alt="BenKo?s Art" />
Imágenes como links
Las imágenes también pueden funcionar como enlaces. Esto lo podemos hacer colocando una imagen dentro de la etiqueta <a>, así:
<a href="http://art.ladybenko.net" title="Mi portafolio">
<img src="images/banner.gif" width="200" height="40" alt="BenKo?s Art" />
</a>
Los navegadores suelen agregarle un borde azul para indicar que se trata de un link. ¡¡¡No uses el nefasto border=0!!! con CSS se puede cambiar el aspecto.
Hay una técnica para implementar galerías de imágenes que consiste en la utilización de thumbnails. Un Thumbnail es una imagen más pequeña que la original, que al pulsar sobre ella se carga la imagen a tamaño completo. A algunos se les ocurre esto:
<a href="matrix.jpg" title="Wallpaper">
<img src="matrix.jpg "width="100" height="50"
alt="Wallpaper de Trinity" />
</a>
Esto está mal. Si la imagen Trinity pesa 100 KB, tendremos esos 100 KB ¡como thumbnail! Escalar una imagen con width y height no modifica su peso. Justamente si hacemos una galería de imágenes pequeñas, lo que queremos evitar es el peso de las imágenes grandes. Lo que tenemos que hacer es una copia pequeña de la imagen original que ocupe, por ejemplo, 5 KB:
<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
Se dice que una imagen vale más que mil palabras. Pero en web, la sobrecarga de imágenes o la utilización de pocas mal empleadas, son desesperantes. ¿Te ha pasado de entrar en un sitio web con fondo de color estridente, letras fluorescentes, una plaga de GIFs animados, applets Java, marquesinas, etc? ¿Cuánto tiempo demoras antes de cerrarla? Yo lo hago instantáneamente, temo un ataque de epilepsia.
Debemos limitar el uso de GIFs animados y no poner imágenes indiscriminadamente. Recuerda poner sólo las que sean necesarias, las que aporten, las que sumen, y por otro lado ahorrarás en ancho de banda de tu servidor.
Insertar una imagen
La etiqueta mediante la cual insertamos una imagen es <img>, a la que se le agregan unos cuantos atributos más:
<img src="image.gif" width="ancho" height="alto" alt="descripción" />
En src ponemos qué imagen queremos mostrar, teniendo en cuenta, al igual que con los links, la ruta hacia la imagen. Generalmente, por razones de organización las imágenes se colocan en un subdirectorio llamado images, así que tendríamos que escribir src=images/algo.gif.
Con los atributos width y height establecemos el ancho y el alto de la imagen. Aunque su valor lo podemos indicar tanto en unidades relativas como absolutas, es recomendable utilizar píxeles y hacerlo con las dimensiones reales de la imagen para ahorrar trabajo al navegador a la hora de maquetar la página. Con dimensiones reales me refiero a que si la imagen tiene 200 píxeles de ancho, coloquemos width="200".
El atributo alt contiene una descripción de la imagen que se mostrará cuando ésta no se haya podido mostrar en el navegador por algún motivo. También se muestra en la mayoría de los navegadores al pasar el mouse por encima de la imagen. Por cuestiones de accesibilidad, este atributo es obligatorio: hay personas que utilizan navegadores de texto como Lynx, o usuarios que deshabilitan las imágenes para ahorrar tiempo y hay usuarios que sencillamente son ciegos.
Ejemplo:
<img src="images/banner.gif" width="200" height="40" alt="BenKo?s Art" />
Imágenes como links
Las imágenes también pueden funcionar como enlaces. Esto lo podemos hacer colocando una imagen dentro de la etiqueta <a>, así:
<a href="http://art.ladybenko.net" title="Mi portafolio">
<img src="images/banner.gif" width="200" height="40" alt="BenKo?s Art" />
</a>
Los navegadores suelen agregarle un borde azul para indicar que se trata de un link. ¡¡¡No uses el nefasto border=0!!! con CSS se puede cambiar el aspecto.
Hay una técnica para implementar galerías de imágenes que consiste en la utilización de thumbnails. Un Thumbnail es una imagen más pequeña que la original, que al pulsar sobre ella se carga la imagen a tamaño completo. A algunos se les ocurre esto:
<a href="matrix.jpg" title="Wallpaper">
<img src="matrix.jpg "width="100" height="50"
alt="Wallpaper de Trinity" />
</a>
Esto está mal. Si la imagen Trinity pesa 100 KB, tendremos esos 100 KB ¡como thumbnail! Escalar una imagen con width y height no modifica su peso. Justamente si hacemos una galería de imágenes pequeñas, lo que queremos evitar es el peso de las imágenes grandes. Lo que tenemos que hacer es una copia pequeña de la imagen original que ocupe, por ejemplo, 5 KB:
<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
Se dice que una imagen vale más que mil palabras. Pero en web, la sobrecarga de imágenes o la utilización de pocas mal empleadas, son desesperantes. ¿Te ha pasado de entrar en un sitio web con fondo de color estridente, letras fluorescentes, una plaga de GIFs animados, applets Java, marquesinas, etc? ¿Cuánto tiempo demoras antes de cerrarla? Yo lo hago instantáneamente, temo un ataque de epilepsia.
Debemos limitar el uso de GIFs animados y no poner imágenes indiscriminadamente. Recuerda poner sólo las que sean necesarias, las que aporten, las que sumen, y por otro lado ahorrarás en ancho de banda de tu servidor.
Serviweb
Diseño web Murcia