Insertar imagen en HTML [Guía completa 2021]

Escrito por Luis Cruz | última actualización: 05 de enero del 2021


Las imágenes le dan vida a una página web, por eso ahora voy a explicarte todo lo que necesitas saber para insertar imágenes en HTML.

Puedes descargar aquí el código completo que veremos en este artículo sobre como insertar una imagen en HTML.

Como insertar una imagen en HTML

Para insertar una imagen usamos la etiqueta img, que en su forma más básica solo necesita un atributo que es la imagen para mostrar, por ejemplo, el código siguiente muestra una imagen llamada imagen.jpg

<img src="imagen.jpg">

Como puedes ver se usa el atributo src y luego le definimos un valor, su valor será el nombre de la imagen a mostrar. Para que este código funcione la imagen debe estar en la misma carpeta de tu página web.

Carpeta de imágenes para HTML

Insertar imágenes que están en otra carpeta.

Cuando creamos una página web, terminamos con muchos archivos y lo usual es organizar todos los archivos en carpetas, usualmente creamos una carpeta llamada img o imagenes en donde colocamos todas las imágenes de nuestra página web, esta carpeta puede tener otras subcarpetas para organizar las imágenes.

Entonces además del nombre del archivo de imagen, también debemos proporcionar la ruta. La ruta se define en relación del archivo que la llama, pero para entenderlo mejor vamos a ver algunos ejemplos.

En este ejemplo nuestra página web se llama index.html y queremos cargar la imagen que está en la carpeta fotos que está dentro de la carpeta img.

Insertar imágenes que están en otra carpeta

Entonces como la carpeta img está al mismo nivel o en la misma carpeta que nuestro archivo index.html, definimos la ruta de esta forma:

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

Ahora tenemos otro caso, vamos a insertar la misma imagen desde otra página web que está en una carpeta llamada admin, entonces tenemos que ir hacia arriba y luego bajar hasta la ubicación del archivo de imagen.

Insertar imagen en HTML desde una carpeta superior

El código sería algo como esto:

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

Usamos ../ para saltar a una carpeta superior una vez, si necesitamos ir dos niveles hacia arriba podríamos usar ../../ para saltar dos veces. Luego colocamos la ruta de la imagen como en el ejemplo anterior.

Texto alternativo en imágenes

La etiqueta img también tiene otro atributo llamado alt, este se usa para mostrar a las personas una descripción de la imagen, en caso de que la imagen no pueda ser mostrada.

<img src="imagen.jpg" alt="Monitor de computadora, mostrando codigo">

También es considerado una buena práctica agregar el atributo alt en todas las imágenes y ayuda a los motores de búsqueda a indexar mejor tu página web.

Como centrar una imagen en HTML

Centrar una imagen en una página web es un tema un poco más complicado, pero ya he escrito un artículo sobre como centrar imágenes en HTML.

Como conseguir imágenes gratis para tu página web.

Si publicas una página web, no puedes usar cualquier imagen que encuentres, porque algunas pueden tener derechos de autor. Pero hay varios sitios web que ofrecen imágenes que puedes utilizar sin tener que pagar por ellas y sin violar derechos de autor, mi favorita es pixabay