El lenguaje Html tiene una etiqueta específica para incluir imágenes en un documento: la etiqueta <img>. Tiene atributos para definir cómo debe mostrarse la imagen y su comportamiento, y no existe etiqueta de cierre.

Aunque hay muchos formatos de imagen, en la web sólo se usan tres:

• gif - para imágenes de hasta 256 colores, estáticas o animadas, y con posibles partes transparentes,
• jpg o jpeg - para fotografías o imágenes con muchos colores, y
• png - como alternativa a ambas, aunque no completamente soportada por todos los navegadores.

Atributos de <img>

• src="direccion_imagen"
  
  De manera semejante al atributo href de un enlace, direccion_imagen es el camino para localizar el fichero de la imagen, que puede ser relativo si éste se encuentra en el mismo equipo o servidor donde está el documento html en el que se referencia, o absoluto si la imagen está en otro servidor web.
  Evidentemente este es el atributo básico de la etiqueta <img>, si falta o la dirección no es correcta no será posible que se muestre la imagen.

• width="anchura" y height="altura"
  
  Anchura y altura en píxeles de la imagen.
  Normalmente en estos atributos se pondrán las dimensiones reales de la imagen (que se pueden saber cargando ésta con cualquier editor o visor gráfico y mirando sus propiedades), pero si son otras el navegador estirará o encogerá la imagen para mostrarla con las dimensiones que aquí se indiquen.
  Es conveniente poner estos atributos para que el navegador pueda saber el tamaño del 'hueco' donde irá la imagen y muestre la página con su forma correcta aunque la imagen aún no le haya llegado.

• hspace="separación" y vspace="separación"
  
  Espacio de separación en píxeles alrededor de la imagen, con hspace en sentido horizontal (a izquierda y derecha) y con vspace en sentido vertical (encima y debajo).
  Los navegadores pueden dejar por defecto algunos píxeles de separación alrededor de la imagen, por lo que si en algún caso quisieramos asegurarnos de que no haya ninguna separación deberíamos poner estos atributos con 0 píxeles.

• alt="descripción corta"
  
  Con este atributo puede ponerse un texto que se mostrará en el lugar de la imagen si ésta no puede visualizarse por algún motivo. Conveniente poner esta descripción, sobre todo si la imagen está en un enlace.

• title="descripción corta"
  
  Este atributo es semejante al anterior, pero con éste el texto se mostrará en un 'bocadillo' al poner el cursor sobre la imagen o sobre su hueco si la imagen no se ha podido visualizar.

• align="posición"
  
  Este atributo nos permite indicar la posición de la imagen respecto a su contexto.
  posición puede tener uno de los siguientes valores:
  bottom - alinea la parte inferior de la imagen con la base del texto (por defecto).
  middle - alinea el centro de la imagen con el centro del texto.
  top - alinea la parte superior de la imagen con la del texto.
  left - alinea la imagen a la izquierda del texto.
  right - alinea la imagen a la derecha del texto.
  

• border="grosor"
  
  grosor del borde de la imagen en píxeles.
  Normalmente una imagen no se muestra por defecto con borde, excepto si está dentro de un enlace que aparece con un borde con el color del enlace. Por lo tanto tendremos que usar este atributo cuando queramos que la imagen tenga un borde si no está dentro de un enlace, o si queremos que aunque esté en un enlace tenga un borde más grueso, o que no tenga borde poniendo border="0".

Ejemplos:

<!-- imagen sola -->
<img src="libros.gif" width="48" height="47"  alt="libros">

<!-- imagen sola con dimensiones cambiadas -->
<img src="libros.gif" width="88" height="66"  alt="libros">

<!-- imagen dentro de un enlace -->
Con borde: <a href="https://es.wikipedia.org/wiki/Libro">
<img src="libros.gif" width="48" height="47" alt="libros"></a>
&nbsp; Sin borde: <a href="https://es.wikipedia.org/wiki/Libro">
<img src="libros.gif" width="48" height="47" alt="libros" border="0"></a>
&nbsp; Con borde más grueso: <a href="https://es.wikipedia.org/wiki/Libro">
<img src="libros.gif" width="48" height="47" alt="libros" border="5"></a>

Con borde:   Sin borde:   Con borde más grueso:

<!-- imagen animada con transparencia -->
<table border="0" align="center" cellspacing="20"><tr>
<td bgcolor="aqua"><img src="pez.gif" width="208" height="99" alt="pez"></td>
<td bgcolor="lime"><img src="pez.gif" width="208" height="99" alt="otro pez"></td>
</tr></table>

<!-- imagen alineada a la derecha del resto -->
<table width="530" align="center"><tr><td>
<img src="galax.jpg" width="300" height="233" hspace="8" alt="Galaxia" align="right">
Texto de prueba para ver cómo se alinea una imagen cuando está junto a un texto
y etcetera etc., un texto o cualquier cosa en línea como otra imagen:
<img src="libros.gif" width="24" height="24" alt="libritos" align="middle">
y más texto seguido y a continuación...
<br><img src="pez.gif" width="208" height="99" title="pejcao">
</td></tr></table>

Texto de prueba para ver cómo se alinea una imagen cuando está junto a un texto y etcetera etc., un texto o cualquier cosa en línea como otra imagen: y más texto seguido y a continuación...