La forma de incluir imágenes en nuestras páginas es muy similar a como lo hacemos con los enlaces a otras páginas. La única diferencia es que, en lugar de indicar el nombre y la localización de un documento HTML, se le indica el nombre y la localización de un archivo que contiene una imagen.

La etiqueta que utilizamos es IMG y el atributo SRC (image source, fuente de la imagen):

<IMG SRC="URLimagen" />

Dentro de una etiqueta se pueden añadir otros comandos, a los que denominamos atributos o parámetros. En el caso de las imágenes, un parámetro inportante es ALT, por medio de este, podemos introducir una descripción (una palabra o una frase breve) indicativa de la imagen. Si bien se puede omitir, es la manera por la cual un programa navegador de sólo texto puede acceder a ellas o, por lo menos, hacerse una idea de lo que pretendemos mostrar. Además, como es posible que, por alguna razón, no pueda cargarse un imagen y, muchas veces se las utiliza como enlace a otras páginas, es fundamental que mostremos algún texto alternativo que indique su destino

<IMG SRC="URLimagen" ALT="Un texto que explica la imagen" />

Las reglas respecto a la forma de ingresar el destino son las mismas que las que rigen para los enlaces. Si no se indica nada quiere decir que el archivo está en el mismo directorio que el documento HTML. Si la imagen está fuera de nuestro sitio, se debe indicar la URL o dirección completa,

El formato de la imagen es, en términos generales, irrelevante aunque normalmente se utilizan los formatos GIF, JPG y PNG.

Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes. Cuanto más grande sea el archivo, más tiempo de carga será necesario. Dado que los navegadores leen y ejecutan secuencialmente, al encontrarse una etiqueta IMG, se inicia la carga de la imagen y recién cuando termina, se continúa con el resto de la página. Esto es así por una simple razón, el navegador desconoce el tamaño de la imagen y, por lo tanto debe cargarla por completo para saber dónde continuar.

Una forma de minimizar este efecto es utilizar otros dos parámetros, WIDTH (ancho) y HEIGHT (alto). De esta manera, le decimos al navegador cuál es el tamaño de la imagen y puede “reservar” el espacio necesario para continuar con la carga del resto de la página a la vez que también va cargando la imagen.

<IMG SRC="URLimagen" ALT="texto" WIDTH="ancho" HEIGHT="alto" />

Es conveniente hacer esto con todas las imágenes, incluso con las más pequeñas (iconos, botones, etc), para que no haya ninguna interrupción en el proceso de carga del documento.

Para elegir la posición de la imagen con respecto al texto hay distintas posibilidades. La más sencilla es colocarla entre dos párrafos, con un titular a un lado. Se puede poner arriba, en el medio o abajo de la imagen. Para ello se añade el parámetro ALIGN a la etiqueta:

<IMG SRC="URLimagen" ALIGN="top" /> Título alineado arriba
<IMG SRC="URLimagen" ALIGN="middle" /> Título alineado en medio
<IMG SRC="URLimagen" ALIGN="bottom" /> Título alineado abajo

Las imágenes pueden combinarse con el texto de tal forma que este se ubique en cierta posición, rodeándola. Para eso, los atributos ALIGN admiten varios valores. En los siguientes ejemplos se muetran las distintas posibibilidades. En todo los casos, el texto se escribe sin saltos de línea, inmediatamente después de la etiqueta IMG:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”Left” (Default)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”right”
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”top”
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”middle”
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”absmiddle”
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”bottom”
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ALIGN=”absbottom”

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las variaciones de etiqueta <BR />:

<BR CLEAR=LEFT>   busca el primer margen libre a la izquierda
<BR CLEAR=RIGHT>  busca el primer margen libre a la derecha
<BR CLEAR=ALL>    busca el primer margen libre a ambos lados
Este texto está a un lado de la imágen.

Este también está a un lado de la imágen, en la línea siguiente.

Este otro texto, en cambio, se muestra en el primer margen libre a la izquierda.

Otra posibilidad que nos dan las imágenes es la de utilizarlas como enlace a otra página. La forma de hacerlo es crear un enlace normal y reemplazar el texto explicativo por la imagen:

<A HREF="URL"> Un enlace con un texto </A>

<A HREF="URL">
   <IMG SRC="URLimagen" />
</A>

Por defecto, si la imagen es un vínculo, está rodeada de un rectágulo del mismo color de los enlaces. Si no se desea que aparezca, hay que indicarlo dentro de la etiqueta mediante el atributo BORDER=0, es decir:

<A HREF="URL">
   <IMG SRC="URLimagen" BORDER="0" />
</A>

Por medio de los parámetros WIDTH y HEIGHT podemos mostrar las imágenes con una dimensión diferente a la que realmente tiene, variando el ancho o el alto. Esto es muy utilizado para poner en la página un thumbnail (una reproducción en pequeño de una imagen), que hace de enlace a la imagen. De esta manera podemos no “recargamos” la página, y el visitante será quien decida qué imágenes desea ver con su tamaño real.

<A HREF="URL">
   <IMG SRC="URLimagen" WIDTH="50" HEIGHT="50" BORDER="0"
      ALT="click para ver la imagen de 500x500" />
</A>

WIDTH y HEIGHT no modifican el archivo original y, por lo tanto, aún cuando las veamos pequeñas, la cantidad de bytes a cargar será la misma que si la mostráramos completas.

En todos los casos, es esencial minimizar la demora en la carga de las imágenes y para eso, debemos hacer un uso razonable de las herramientas que nos proveen los programas gráficos:

  • Reduciendo su tamaño (menos pixeles = menos kilobytes para cargar)
  • Reduciendo el número de colores
  • Simplificándolas o comprimiéndolas
  • Si es posible, el archivo no debería sobrepasar los 100K y su tamaño no debería superar los 500×500 pixeles.

Cuando se carga la imagen de una página, esta queda almacenada en el caché. Por lo tanto, si esta misma imagen se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.