No me aparecen las imágenes en mi página web

En ocasiones nos podemos encontrar con que no somos capaces de visualizar las imágenes en nuestra página web. En este artículo analizamos las posibles causas de este error.

Posibles causas del error

Sintaxis

Para insertar imágenes en una página web utilizamos la etiqueta IMG, cuya sintaxis es la siguiente:

<img src="nombre_de_la_imagen.ext">

Formato de imagen

Los formatos de imagen más empleados en las páginas web son GIF, JPG y PNG. El formato BMP no es recomendable, pues asigna a cada píxel un valor cromático y suelen ser archivos de excesivo tamaño.

Caracteres especiales

Lo primero que debemos hacer es asegurarnos de que el nombre de la imagen no tenga ningún espacio ni carácter especial (y especialmente acentos).

En algunos navegadores los caracteres son codificados con el carácter “%” antes. Por ejemplo, un espacio se convierte en “%20”. Si el carácter “%” se encuentra en la dirección, ello quiere decir que el nombre del archivo es incorrecto.

Ruta relativa y absoluta

Por otro lado, debemos asegurarnos de indicar la ruta relativa (o absoluta) de la imagen de manera correcta. Para llevarlo a cabo, únicamente indicaremos el nombre de la imagen cuando esta se encuentre en la misma carpeta que la página HTML. En caso contrario deberemos indicar su ruta relativa.

Por ejemplo:

../carpeta/img.jpg

O también podemos indicar su ruta absoluta. Por ejemplo:

<img src="http://site.net/images/img.jpg">

En el caso de la ruta absoluta será la misma para todas las páginas del sitio web.

Mayúsculas y minúsculas

También hay que respetar el uso de mayúsculas y minúsculas.

Por ejemplo, si la imagen se encuentra en:

 mis_imagenes/imagen_1.png

La ruta debe ser escrita de la misma manera:

<img src="mis_imagenes/imagen_1.png">

Y no:

<img src="Mis_Imagenes/imagen_1.png">

<img src="mis_imagenes/Imagen_1.png">

Foto: © Everypixel