Cómo insertar una imagen en HTML correctamente

Insertar una imagen en HTML es una de las primeras cosas que debes aprender si estás empezando en desarrollo web. Las imágenes ayudan a mejorar el diseño, explicar mejor una idea, mostrar productos, crear banners, hacer tarjetas visuales y construir páginas mucho más atractivas.

En HTML, las imágenes se insertan usando la etiqueta <img>. Esta etiqueta necesita principalmente dos atributos: src, que indica la ruta de la imagen, y alt, que describe la imagen en caso de que no cargue o para mejorar la accesibilidad. MDN explica que el atributo alt funciona como texto alternativo cuando la imagen no se puede mostrar y también ayuda a los lectores de pantalla.

Ejemplo básico para insertar una imagen en HTML

El código más simple para mostrar una imagen es este:

<img src="imagen.jpg" alt="Descripción de la imagen">

En este ejemplo, imagen.jpg es el archivo que quieres mostrar y alt es el texto alternativo que describe la imagen.

Si tu imagen está en la misma carpeta que tu archivo HTML, puedes colocar directamente el nombre del archivo:

<img src="paisaje.jpg" alt="Paisaje de montaña al atardecer">

Cómo insertar una imagen desde una carpeta

Lo más recomendable es organizar las imágenes dentro de una carpeta llamada img, images o assets. Por ejemplo:

proyecto/
├── index.html
└── img/
    └── logo.png

En ese caso, el código sería:

<img src="img/logo.png" alt="Logo de la empresa">

Esto ayuda a mantener tu proyecto ordenado y evita confusiones cuando empiezas a tener muchas imágenes, estilos y archivos.

Cómo insertar una imagen desde una URL

También puedes mostrar una imagen usando una URL externa:

<img src="https://ejemplo.com/imagen.jpg" alt="Imagen de ejemplo">

Aunque funciona, no siempre es lo más recomendable. Si la imagen externa se borra, cambia de URL o el servidor falla, tu imagen dejará de mostrarse. Para proyectos propios, lo mejor es subir las imágenes a tu servidor o biblioteca de medios.

Cómo cambiar el tamaño de una imagen en HTML

Puedes usar los atributos width y height:

<img src="img/foto.jpg" alt="Foto de una página web" width="600" height="400">

Sin embargo, para diseño web moderno es mejor controlar el tamaño con CSS:

<img class="imagen-responsive" src="img/foto.jpg" alt="Diseño de página web responsive">

.imagen-responsive {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Con max-width: 100%, la imagen nunca será más ancha que su contenedor. Con height: auto, mantiene su proporción original y no se deforma.

Cómo hacer una imagen responsive en HTML

Una imagen responsive se adapta correctamente a móviles, tablets y ordenadores. El método más básico es este:

<img class="img-fluid" src="img/web-responsive.jpg" alt="Página web responsive en diferentes dispositivos">

.img-fluid {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
}

MDN define las imágenes responsive como imágenes que funcionan bien en pantallas con diferentes tamaños y resoluciones, ayudando también al rendimiento en distintos dispositivos.

Qué es el atributo alt en una imagen HTML

El atributo alt es el texto alternativo de la imagen. Sirve para explicar qué muestra la imagen si no carga correctamente y también ayuda a las personas que usan lectores de pantalla.

Ejemplo correcto:

<img src="img/calculadora-html.jpg" alt="Calculadora básica creada con HTML CSS y JavaScript">

Ejemplo poco útil:

<img src="img/calculadora-html.jpg" alt="imagen">

Ejemplo incorrecto por exceso de palabras clave:

<img src="img/calculadora-html.jpg" alt="html html calculadora html tutorial html curso html gratis">

Google recomienda escribir textos alternativos útiles, con información relevante y sin rellenarlos de palabras clave de forma artificial. El abuso de keywords en el atributo alt puede generar una mala experiencia y parecer spam.

Diferencia entre src y alt

src indica dónde está la imagen. Sin este atributo, el navegador no sabe qué archivo debe mostrar.

alt describe la imagen. No muestra la imagen, pero aporta contexto cuando la imagen no carga o cuando el usuario utiliza tecnología de asistencia.

Ejemplo:

<img src="img/banner-html.jpg" alt="Banner de curso para aprender HTML desde cero">

En este caso:

src = ruta de la imagen
alt = descripción de la imagen

Código completo con imagen en HTML

Aquí tienes un ejemplo completo de una página sencilla con una imagen:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imagen en HTML</title>

  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f4f8ff;
      color: #111827;
    }

    .contenedor {
      max-width: 900px;
      margin: 60px auto;
      padding: 30px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

    h1 {
      font-size: 42px;
      margin-bottom: 16px;
    }

    p {
      font-size: 18px;
      line-height: 1.7;
      color: #4b5563;
    }

    img {
      width: 100%;
      height: auto;
      margin-top: 24px;
      border-radius: 16px;
      display: block;
    }
  </style>
</head>
<body>

  <div class="contenedor">
    <h1>Cómo insertar una imagen en HTML</h1>

    <p>
      Este es un ejemplo básico de cómo mostrar una imagen dentro de una página web
      usando la etiqueta img de HTML.
    </p>

    <img src="img/diseno-web.jpg" alt="Diseño de una página web moderna en un ordenador">
  </div>

</body>
</html>

Errores comunes al insertar imágenes en HTML

Uno de los errores más comunes es escribir mal la ruta de la imagen. Si el archivo está dentro de una carpeta, debes incluir el nombre de la carpeta en el atributo src.

Otro error frecuente es olvidar la extensión del archivo. No es lo mismo imagen.jpg que imagen.png o imagen.webp.

También es común usar imágenes demasiado pesadas. Esto puede hacer que la página cargue más lento. Para una web real, intenta usar imágenes optimizadas y formatos modernos como WebP cuando sea posible.

Otro error importante es dejar el atributo alt vacío en imágenes que sí aportan información. Si la imagen es decorativa, puede usarse alt="", pero si ayuda a entender el contenido, debe tener una descripción clara.

Buenas prácticas para usar imágenes en HTML

Usa nombres de archivo descriptivos. En lugar de IMG_1234.jpg, es mejor usar algo como calculadora-html.jpg.

Escribe textos alternativos naturales. El alt debe describir la imagen, no ser una lista de palabras clave.

Optimiza el peso de tus imágenes antes de subirlas. Una imagen muy pesada puede afectar la velocidad de carga.

Usa CSS para controlar el tamaño visual de las imágenes. Así tendrás más control sobre el diseño responsive.

Organiza tus archivos en carpetas. Esto hará que tu proyecto sea más fácil de mantener.

Preguntas frecuentes sobre imágenes en HTML

¿Cuál es la etiqueta para insertar imágenes en HTML?

La etiqueta para insertar imágenes en HTML es <img>.

<img src="foto.jpg" alt="Descripción de la foto">

¿Para qué sirve src en HTML?

El atributo src sirve para indicar la ruta o ubicación de la imagen que quieres mostrar.

¿Para qué sirve alt en HTML?

El atributo alt sirve para describir la imagen. Es importante para accesibilidad, para usuarios que usan lectores de pantalla y para mostrar un texto alternativo si la imagen no carga.

¿Puedo poner imágenes desde internet en HTML?

Sí, puedes usar una URL externa en el atributo src, pero para proyectos propios es más seguro alojar la imagen en tu propia web.

¿Cómo hago que una imagen no se deforme?

Usa CSS con height: auto.

img {
  max-width: 100%;
  height: auto;
}

Para finalizar

Insertar imágenes en HTML es sencillo, pero hacerlo bien marca una gran diferencia. No se trata solo de colocar una imagen en la página, sino de usar una ruta correcta, escribir un buen texto alternativo, cuidar el tamaño del archivo y hacer que la imagen se adapte correctamente a cualquier pantalla.

Si estás aprendiendo HTML desde cero, dominar la etiqueta <img> te ayudará a crear páginas más visuales, profesionales y fáciles de entender.