Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Cómo poner una imagen en HTML

Categoría:

Insertar imágenes en HTML

Para poner una imagen en una página web con HTML debemos utilizar la etiqueta img con la siguiente sintáxis:

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

Generalmente, la imagen se encontrará en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos de imagen más habituales son los archivos con extensiones gif, jpg, png, webP o svg.

Aunque el formato svg es un tipo de archivo de imagen vectorial y no se puede ver con cualquier visor de imágenes, los navegadores modernos son compatibles y permiten utilizarlos y visualizarse correctamente.

Se suele emplear para el logo en el HTML debido a que ocupa poco espacio en disco.

Como mínimo, debemos emplear el atributo src de la etiqueta img para insertar una imagen en HTML. En este se especifica la ruta donde se encuentra el fichero de la imagen.

Adicionalmente se recomienda usar el atributo alt.

referencia relativa a una imagen en la misma carpeta
En esta imagen se representa la estructura de carpetas en forma de árbol de directorios en la que la barra representa la carpeta en la que nos encontramos.

En el ejemplo de arriba el archivo de imagen estaría ubicado en la misma carpeta en la que se encuentra el fichero en el que estamos escribiendo el código, que en la estructura de árbol de la captura se llamaría "articulo1.html".

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

Atributo src de una img HTML

En el atributo src indicamos la url de la imagen, es decir, ruta al recurso (por ello lo de source en inglés) 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 este caso, como se ve en el ejemplo básico de arriba, no es necesario emplear ninguna ruta de carpetas.

Atributo alt de una img HTML

El atributo alt, de texto alternativo, 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
El cuadro azul llamadao imagenes representa una carpeta o directorio, que contiene el fichero de imagen

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

Ten en cuenta que las rutas relativas y absolutas son la manera de referenciar archivos, de modo que se pueden usar en otros tipos de etiqueta, como los enlaces o hipervínculos.

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.

A continuación puedes ver esto explicado en vídeo. Este vídeo forma parte de mi Curso Online de HTML5.

¡Accede para ver todos los detalles y más clases de acceso gratuito!

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:

http://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.

Aquí puedes ver otro vídeo gratuito de mi curso de HTML5 sobre rutas absolutas.

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 el porcentaje % 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

Imágenes de nueva generación WebP

Las imágenes de nueva generación como el formato WebP, son nuevos tipos de archivo de imagen soportados por los nuevos navegadores que comprimen aún más las imágenes, de forma que los tiempos de carga se reducen.

Desde hace un tiempo Google recomienda usarlas para mejorar el SEO de nuestas páginas, pero como no son compatibles con navegadores no actualizados, debemos tener cuidado al usarlas.

En la actualidad, para gestores de contenido como WordPress, hay plugins que nos generan versiones webp de nuestras imágenes y las sirven exclusivamente a los usuarios que pueden visualizarlas, de esta forma evitamos el problema de las incompatibilidades.

Dos ejemplos de plugins que hacen esto son WPRocket y SG Optimizer de Siteground.

Iconos HTML

Para agregar iconos en HTML se puede usar cualquier etiqueta que muestre imágenes, aunque normalmente se usa la etiqueta span o i.

<i class="fa fa-cloud"></i>

El ejemplo anterior sería la forma habitual de insertar un icono en nuestro código HTML usando la librería de iconos Font Awesome, una de las más populares.

Adicionalmente, si quieres poner el favicon (el icono que aparece en la pestaña del navegador), tienes que usar la etiqueta link en el head de la página de la forma que verás justo en la sección que te indico de mi artículo Favicon. Qué es y cómo crearlo e instalarlo.

Cómo centrar imágenes en HTML

Para centrar imágenes hay que tener en cuenta que es un elemento inline, por lo que se ubica por defecto a continuación del texto, no en una nueva línea, por lo que un truco es simplemente ponerla en un nuevo párrafo, que sí es un elemento de bloque y en consecuencia te la pasa a una nueva línea.

Una vez hecho eso, tendremos que recurrir a CSS para centrarla con la propiedad text-align y el valor "center".

<p style="text-align: center">
    <img src="image.jpg" alt="imagen centrada">

Tambien podemos emplear el truco del auto centrado con los márgenes en CSS:

<div>
    <img style="margin: 0 auto" src="image.jpg" alt="imagen centrada">
</div>

Cómo poner una imagen de fondo en HTML

Para poner imágenes como fondo en HTML es necesario recurrir a código CSS. Mediante el uso de la propiedad background, entre muchas otras cosas podemos especificar la url con la ruta a al archivo de imagen que queremos emplear.

Este sería un ejemplo del código CSS:

background: url('imagen1.jpg');

Si no tienes claras las nociones básicas del funcionamiento de CSS, empieza por aquí.

Y aqui tienes un ejemplo en el que pongo un fondo con 4 imágenes a la vez, cada cual en una zona.

Otros temas de interés sobre poner imágenes HTML

Debes saber que existen otras etiquetas un poco más avazadas para insertar imágenes en el documento HTML.

La etiqueta figure está pensada para agregar diversos elementos gráficos como imágenes, fotografías, gráficos, etc. Va a acompañada de la etiqueta figcaption, para especificar el título o descripción del elemento visual.

<figure>
  <img src="imagen.jpg" alt="descripción">
  <figcaption>Título de la imagen.</figcaption>
</figure>

También existe la etiqueta picture, con la que tenemos mayor control de los elementos y es similar a video o audio, que fueron incorporadas en HTML5, por lo que lo puedes encontrar en este apartado de mi artículo Novedades y estructura de páginas web HTML5.

4 comments on “Cómo poner una imagen en HTML”

  1. hola como puedo ver con un link las fotos que estan en una carpeta en mi hosting pero que ese codigo no tenga img1.jpg img2.jpg .. asi no,,,,,,,, sino ke las mueste todas. si llega una imagen nueva que la muestre igual

  2. Buenas tardes Diego,...

    Tengo un archivo.html como sliders y tengo en la carpeta de mi unidad c:

    Cual sería la ruta para que puede ser leer en otros dispositivos tanto en el smarthphone o Ipads.

    Esperando recibir tus noticias en breve,

    Un cordial saludo,

    Iñi

    1. Hola Iñigo,
      Lo ideal es trabajar con rutas relativas, así si mueves el archivo sigue funcionando.
      Tienes en el artículo varios ejemplos con rutas relativas, trata de encontrar el que más se adapte a tu caso y si quieres me das más detalles y te ayudo. Con la información que aportas no entiendo muy bien lo que quieres hacer.
      ¿Te refieres a cargar imágenes en tu slider que estén en otro dispositivo?
      Eso será complicado y requiere de programación. Lo mejor es ubicar los archivos en el mismo lugar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram