Para insertar una imagen en un documento HTML utilizaremos la etiqueta <img>, este elemento carece de su cierre correspondiente.

La forma general de uso sería:

El atributo src tomará como valor el ULR de la imagen, absoluto o relativo, aunque es recomendable no utilizar externas a nuestro sitio Web.

Atributos de la etiqueta img.

Mediante HTML no se tienen muchas opciones para alinear las imágenes, es más la alineación de imágenes está siempre referida al flujo del texto alrededor de ella más que a su posición en la pantalla, se limitan a dos posiciones horizontales, izquierda (left) y derecha (right) y tres posiciones verticales, arriba (top), abajo (bottom) y centro (middle).

Solamente en las posiciones horizontales hay una verdadera alineación de la imagen en el margen indicado además de que el texto fluye alrededor de la imagen. En las alineaciones verticales la imagen siempre se ajusta al margen izquierdo y únicamente la primera línea del texto cumple con la alineación marcada, el resto de las líneas del párrafo se mostrarán por debajo de la imagen. En el ejemplo 1 podrás comprobarlo.

Si utilizamos las alineaciones left o right y deseamos que algún párrafo fluya por debajo de la imagen podemos utilizar el elemento <br> con el atributo clear que puede tomar los valores, left, right, none y all. Para entenderlo mejor visita el ejemplo2.

El uso de este atributo es obligatorio en el estándar HTML 4.0 y su finalidad es proporcionar información sobre la imagen cuando ésta no se muestra. Debemos tener en cuenta que todavía puede haber personas que utilizan navegadores antiguos que no admiten la carga de imágenes o que su conexión es lenta y pueden haber desactivado en el navegador la carga de las mismas.

También mostrará el texto al colocar el ratón encima de la imagen en el caso de que no hayamos definido el atributo title, si es así mostrará el contenido de éste último.

En el caso de no querer mostrar texto alternativo, porque la imagen es simplemente decorativa bastará con establecer el valor a nada, es decir, alt="". En caso contrario si una imagen tiene un valor informativo el contenido de alt debería consistir en una descripción lo más detallada posible.

Indica el ancho en píxeles del borde que rodea a la imagen. El valor por defecto es cero pero en algunos navegadores si la imagen es el soporte de un enlace puede aparecer un borde color azul, para desactivarlo deberemos incluir el atributo border con valor cero, aunque entonces el usuario no tendrá ninguna ayuda visual para determinar qué imagenes son enlaces y le obligaremos a pasar el ratón por todas las imágenes.

Podemos utilizar este atributo para crear marcos sencillos alrededor de las imágenes, mediante hojas de estilos podemos hacer estos marcos mucho más atractivos.

Estos atributos se utilizan para dejar un espacio de separación, vertical y horizontal, entre la imagen y cualquier otro elemento colcoado a continuación. Pueden ayudarnos a colocar la imagen de una manera más precisa y a realizar correctamente los saltos de línea. No existe la posibilidad de marcar una distancia diferente para izquierda/derecha o para arriba/abajo lo que limita los resultados de su uso. Su valor debe de expresarse en píxeles aunque existen navegadores que admiten valores en porcentaje.

Su función es establecer las dimensiones con las que la imagen será mostrada en el navegador. Admite valores tanto en píxeles como en porcentajes. Se recomienda su inclusión en el código ya que si no se incluyen el navegador detiene la carga de otros elementos de la página, hasta haber cargado totalmente la imagen, si se especifica el navegador reserva el espacio indicado y carga simultáneamente texto e imagen.

Width y height se pueden utilizar para disminuir o aumentar el tamaño de la imagen en el navegador, esto no afecta al tamaño del archivo gráfico original. Esta práctica está totalmente desaconsejada ya que podemos distorsionar la imagen o perder calidad, lo más correcto sería establecer las dimensiones con las que se vaya a utilizar con un programa de gráficos.

Un pequeño truco para cargar más rápidamente las imágenes es colocar una imagen, que vaya a ser vista en una página posterior, en la página actual con sus dimensiones reducidas a 1 píxel, de esta forma no será apreciada en la página pero se cargará en la memoria caché del ordenador, cuando el usuario visite dicha página la imagen se mostrará sin demora ya que la imagen ha sido descargada previamente. Este truco solamente tiene utilidad si se visitan las páginas ordenadamente.

Con Windows podemos saber fácilmente las dimensiones originales de una imagen, para ello basta seleccionar el icono de la imagen y en el apartado DETALLES de la columna de la izquierda se nos mostrará sus dimensiones y su tamaño en bytes.