Una forma de hacer más agradables las páginas Web más allá del
contenido de texto que pueda tener, es agregando imágenes en diferentes
partes del cuerpo del documento. Estas imágenes se agregan en el
documento utilizando el elemento <img> y varios de
sus atributos, de acuerdo al caso. La imagen debe tener como mínimo el
atributo src que hace relación a su ubicación con su
respectivo valor. Esta ubicación puede ser una ruta completa a una
imagen en Internet, o una ruta relativa al mismo dominio o subdominio
donde se publica la página que se está editando. Observemos algunos
ejemplos:
Éste es un ejemplo con una ruta completa de imagen en Internet en alguna parte del contenido del documento:
Ejemplo 2.6. Agregando una imagen simple con una ruta completa
<img src="http://upload.wikimedia.org/HTML.svg" />
Ahora un ejemplo con una imagen ubicada en el mismo subdominio de publicación, con una ruta relativa al mismo:
El mismo ejemplo, pero agregando atributos relacionados con el ancho y alto que va a tener la imagen al momento de mostrarse en el navegador:
Ejemplo 2.8. Agregando una imagen simple ancho y alto regulados
<img src="images/HTML.svg" width="200" height="150" />
El mismo ejemplo, además agregándole un atributo especial para que muestre un texto específico en el caso de que por alguna razón no se logre mostrar la imagen:
Ejemplo 2.9. Agregando una imagen simple con ancho, alto y un texto alternativo
<img src="images/HTML.svg" width="200" height="150"
alt="Imagen ilustrativa de HTML" />
Usualmente los navegadores Web interpretan formatos de imágenes comunes como GIF, JPEG y PNG, pero en la actualidad también soportan formatos de gráficos vectoriales, como SVG, que se utilizó en el ejemplo anterior. Cada formato tiene pros y contras, de forma que vale la pena recurrir a información detallada de estos formatos antes de incrustarlos como parte de los documentos HTML.