Insertar una imagen en el documento HTML

Para insertar una imagen dentro de una página web con HTML debemos utilizar la etiqueta <img>, la cual, no tiene cláusula de cierre.

Generalmente, la imagen se encontrará en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

La sintaxis de esta etiqueta es:

<img src="imagen.jpg" alt="texto descriptivo"> 

referencia relativa a una imagen en la misma carpeta

Como mínimo, debemos emplear los atributos src y alt de la etiqueta HTML img.

<img> viene de image
src viene de source
alt viene de alternative

Atributo src

En el atributo src indicamos la ruta y el nombre del archivo de imagen.

Es muy recomendable no emplear ni espacios, ni símbolos, ni tildes, ni eñes ni mayúsculas en los nombres de archivo para evitar dificultades.

Si la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo es suficiente, en ese caso, como se ve en el ejemplo, no es necesario indicar ninguna ruta de carpetas.

Atributo alt

El atributo alt lo usamos para especificar un texto que verán los usuarios cuando la imagen no se pueda mostrar.

También es lo que lee una aplicación de lectura de pantalla como las que usan las personas deficientes visuales e invidentes, de modo que el texto debe describir el contenido de la imagen.

Uso de la ruta y forma de referenciar a los archivos

Rutas relativas

Si la imagen se encontrara en una subcarpeta llamada imagenes, la ruta para obtenerla sería:

<img src="imagenes/imagen.jpg" alt="Imagen">

Ruta relativa a una imagen en una carpeta

Es decir, anteponemos al nombre del archivo de la imagen el nombre de la carpeta y la barra /.

Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML, la sintaxis será:

<img src="../imagen.jpg" alt="imagen">

subir un nivel de carpetas con rutas relativas

Es decir, le anteponemos .. y la barra / al nombre del archivo de la imagen.

Los dos puntos seguidos, por tanto, sirven para dirigirnos a una capeta padre. De tal modo que si tuviéramos que subir dos niveles quedaría así:

<img src="../../imagen.jpg" alt="imagen">

 

subir dos carpetas con rutas relativas

En la imagen anterior nos encontramos en articulo1.html y debemos subir dos niveles para llegar a la imagen.

Por último, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes y el archivo HTML desde el que referenciamos en otra carpeta que está al mismo nivel que la de imágenes, primero deberíamos subir un nivel y luego acceder a la carpeta imágenes, quedando del siguiente modo:

<img src="../imagenes/imagen.jpg" alt="imagen">

Arbol de archivos y carpetas de un proyecto web HTML

Esta forma de emplear rutas de archivos es por referencias relativas, es decir, que determinamos la ruta respecto al elemento desde el que solicitamos el recurso externo.

Esto mismo lo aplicaremos más adelante cuando por ejemplo queramos referenciar un archivo de estilos css o un script js.

Rutas absolutas

Otra forma de referenciar archivos es mediante rutas absolutas. Las rutas absolutas tienen como referencia la raíz del sistema de archivos en el que nos encontremos.

Si por ejemplo, tenemos un proyecto en una carpeta llamada blog en la unidad C del disco, siguiendo con los ejemplos anteriores, la ruta absoluta en un sistema Windows sería la siguiente:

<img src="C:/blog/imagen.jpg" alt="texto descriptivo">

Cuando trabajamos con archivos no es recomendable emplear rutas absolutas, ya que si moviéramos el proyecto por ejemplo a una unidad de almacenamiento externa como un pendrive USB, la ruta absoluta dejaría de funcionar, ya que la letra de la unidad cambiaría. Mientras que mediante relativas no tendríamos ese problema.

Por el contrario, cuando trabajamos en servidores web, se suelen emplear rutas absolutas que parten del nombre de dominio como elemento raíz.

Esta sería la ruta absoluta del logotipo de esta web:

https://www.diegocmartin.com/wp-content/uploads/2016/08/logo-diego-004-e1499697890812.png

Podemos perfectamente emplear una URL completa como esta como valor del atributo src de la etiqueta img.

Especificar el tamaño de las imágenes

Hemos visto que la etiqueta img tiene 2 atributos, src alt obligatorios, pero puede tener más. Dos muy útiles son width height, con los que podemos controlar la anchura y la altura respectivamente.

Estos atributos nos sirven para mostrar las imágenes al tamaño que queramos independientemente de las dimensiones que tenga el archivo.

Normalmente utilizaremos uno sólo de los atributos, ya que de esta forma el navegador recalculará la otra dimensión de forma proporcional para que la imagen no se vea distorsionada.

Ejemplo:

<img src="logo.png" alt="Esto es mi logo" width="150px">

Como se puede observar, estamos expresando la medida en px, píxels.

También es usual emplear % como unidad de media. De esta forma, el tamaño de la imagen se ajustará al espacio disponible según el tamaño de la pantalla. Veremos más sobre esto en CSS.

Imagen con enlace o enlace con imagen

Hipervínculo con una imagen. <a> e <img>

Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página, ahora podemos crear hipervínculos que muestren imágenes.

La solución consiste en colocar la etiqueta <img> entre las cláusulas de apertura y cierre del enlace (<a>), en sustitución del texto ancla habitual.

A continuación un ejemplo de una página que muestra dos imágenes (foto1.jpg y foto2.jpg) como hipervínculos. Al hacer clic irán a otra página.

Las imágenes se suponen colocadas en una carpeta llamada imágenes:

<html>
<head>
</head>
<body>
<h2>Clic en las imagenes para +info.</h2>
<a href="pagina2.html"><img src="/imagenes/foto1.jpg" 
alt="Pintura Geométrica"></a>
<br>
<a href="pagina2.html"><img src="/imagenes/foto2.jpg" 
alt="Pintura Geométrica"></a>
</body>
</html>

Para que el ejemplo funcione al abrirlo en el navegador, debes tener una estructura de archivos y carpetas como la que se propone, es decir, los archivos html juntos en una carpeta junto con otra carpeta que contenga a las imágenes.

Puedes descargar este ejemplo comentado sobre imágenes y enlaces:

Ejemplo de imágenes y enlaces2

Sería genial leer tus experiencias y consejos sobre esto. Comenta y suscríbete a los comentarios para mantenerse al día en la conversación.

Por favor, si te ha gustado, ¡comparte!. Me será de gran ayuda. ¡¡Gracias!!