<img>

Incrusta una imagen en la página. Es un void element: no tiene contenido ni etiqueta de cierre — toda su configuración vive en los atributos. El navegador descarga el archivo apuntado y lo dibuja en el flujo del texto como una caja en línea.

<img> es el mecanismo principal para incorporar imágenes rasterizadas (fotos, gráficos, íconos) al documento HTML. A diferencia de insertar imágenes como fondo con CSS (background-image), un <img> forma parte del contenido semántico: tiene texto alternativo, puede ser enlazado, lo leen los lectores de pantalla y lo indexan los buscadores. Es la diferencia entre una imagen que comunica algo y una imagen que decora el layout.

Como elemento incrustado (embedded content), <img> funciona como “hueco de contenido externo”: le indica al navegador dónde colocar el recurso y cuánto espacio reservar, pero el archivo en sí viaja en una petición de red separada. Ese comportamiento asincrónico es lo que hace necesarios atributos como width/height (para que el navegador reserve el espacio antes de que llegue la imagen), loading (para controlar cuándo se dispara la descarga) y alt (para que el contenido no sea inaccesible mientras la imagen carga o si nunca llega).

Cómo funciona

Cuando el navegador encuentra un <img>, dispara la descarga del archivo en paralelo mientras sigue armando el resto de la página: la imagen no frena el render. Pero si no le declarás dimensiones, el navegador no sabe cuánto espacio reservar hasta que la imagen termina de llegar, y el contenido de alrededor “salta” cuando aparece (layout shift).

Varios de sus atributos existen justamente para controlar cuándo se descarga y cuánto espacio reservar de antemano. Por ser un elemento en línea, fluye con el texto salvo que lo cambies con CSS (display).

Modelo de contenido

<img> es un void element (no tiene contenido ni etiqueta de cierre) y, en la clasificación de HTML, es contenido incrustado (embedded): trae a la página un recurso externo, igual que <video>, <audio> o <iframe>. Toda su información vive en los atributos; no envuelve nada.

Su display por defecto es en línea (inline): fluye dentro de una línea de texto, como una palabra más, salvo que lo cambies con CSS (display: block, display: inline-block). Puede ir en cualquier sitio donde se admita contenido en flujo: dentro de un <p>, de un <a> (imagen-enlace), de un <button>, de un <figure> (el patrón recomendado cuando la imagen lleva pie de foto).

A nivel de accesibilidad, su rol implícito es img: los lectores de pantalla lo anuncian como imagen y leen el alt como su nombre accesible. Una imagen con alt="" se vuelve presentacional y el lector la salta (ver alt más abajo).

Sintaxis

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

Atributos

src (obligatorio)

La ruta del archivo de imagen. Puede ser relativa (fotos/cafe.jpg), absoluta del sitio (/img/cafe.jpg) o una URL completa (https://…). Si falta o la ruta está rota, el navegador muestra el texto del alt y un ícono de imagen rota en su lugar.

Cicatriz de este sitio: dentro del sandbox las imágenes deben ser SVG inline como data-URI (src="data:image/svg+xml,…"); las URLs externas no cargan en el preview (docs/CICATRICES.md A.0.5).

alt (esencial para accesibilidad)

Texto alternativo que describe la imagen. Cumple tres funciones:

• Lo lee el lector de pantalla para quien no ve la imagen.
• Se muestra si la imagen no carga.
• Los buscadores lo usan para entender el contenido.

Reglas de uso:

• Describí la función de la imagen, no que “es una imagen” (el lector ya lo anuncia). Mal: alt="foto". Bien: alt="Taza de café sobre una mesa de madera".
• alt="" (vacío pero presente) es una decisión deliberada para imágenes puramente decorativas: le indica al lector de pantalla que la salte. Es distinto de omitir alt, que es un error de accesibilidad (el lector entonces lee la URL del archivo, que es ruido).

width / height

Dimensiones en píxeles, sin unidad (width="320", no width="320px"). Aunque el tamaño visual final conviene controlarlo con CSS, declarar estos atributos en el HTML le da al navegador la proporción de la imagen para reservar el espacio correcto antes de descargarla y así evitar el salto de layout.

Si declarás solo uno, el otro se ajusta manteniendo la proporción.

<img src="foto.jpg" alt="…" width="320" height="200" />

loading

Controla cuándo se descarga la imagen.

• eager (valor por defecto) — la descarga arranca apenas se parsea el <img>. Correcto para imágenes visibles al cargar la página (las del primer pantallazo).

• lazy — difiere la descarga hasta que la imagen está por entrar al viewport (el usuario scrollea cerca). Ahorra datos y acelera la carga inicial en páginas largas con muchas imágenes.

  Gotcha: no lo uses en imágenes del primer pantallazo — retrasaría algo que se ve de entrada.

srcset / sizes (imágenes responsive)

Permiten ofrecer varias versiones de la imagen para que el navegador descargue la más adecuada según la densidad de píxeles o el tamaño del viewport. Son los atributos clave de las imágenes responsive.

Descriptores de densidad (1x / 2x) — para pantallas retina:

<img src="foto.jpg"
     srcset="foto.jpg 1x, foto-2x.jpg 2x"
     alt="Descripción">

1x es para pantallas normales; 2x es para pantallas de alta densidad (retina, HDPI). El navegador elige según la densidad real del dispositivo. Si el navegador no entiende srcset, usa el src como fallback.

Descriptores de ancho (w) con sizes — para tamaños variables:

<img src="foto-400.jpg"
     srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
     sizes="(min-width: 768px) 50vw, 100vw"
     alt="Descripción">

Los descriptores w indican el ancho intrínseco del archivo en píxeles. El atributo sizes le dice al navegador qué tamaño visual ocupa la imagen en cada breakpoint — así puede calcular cuántos píxeles reales necesita y elegir el candidato más eficiente. Sin sizes, el navegador asume 100vw.

La diferencia entre los dos enfoques: 1x/2x controla la densidad para la misma composición; w con sizes controla la resolución óptima cuando la imagen ocupa distintos porcentajes del viewport en distintos tamaños de pantalla.

decoding

Sugiere al navegador cómo decodificar la imagen respecto del resto de la página.

• async — decodifica en paralelo, sin frenar la presentación del contenido vecino. Es la recomendación habitual para que la imagen no bloquee el render del texto.
• sync — decodifica de forma sincrónica.
• auto (valor por defecto) — el navegador decide.

fetchpriority

Ajusta la prioridad de descarga de esta imagen frente a los demás recursos: high (subila de prioridad, útil en la imagen hero del primer pantallazo), low (bajala) o auto (default). Es una pista de rendimiento, no una orden.

Otros atributos (de nicho)

Existen pero se usan poco mientras aprendés; se nombran para que los reconozcas:

• referrerpolicy — controla qué información de referer se envía al pedir la imagen.
• crossorigin — configura el pedido CORS cuando la imagen viene de otro dominio (necesario, por ejemplo, para leerla después desde un <canvas>).
• ismap / usemap — asocian la imagen a un mapa de zonas clicables (<map>), un patrón hoy raro.

Imágenes responsive

Una imagen con ancho fijo en HTML (width="600") ocupa siempre 600px. En un teléfono de 375px, desborda el contenedor y aparece scroll horizontal. La solución base es CSS:

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

max-width: 100% hace que la imagen nunca supere el ancho de su contenedor — si el contenedor tiene 375px, la imagen se achica a 375px; si el contenedor tiene 1200px y la imagen mide 600px, se queda en 600px (no se estira). height: auto ajusta la altura proporcionalmente para que la imagen no se deforme. Este par va siempre junto.

Para servir la resolución correcta según la pantalla, combiná max-width: 100% + height: auto en CSS con srcset en el HTML:

<img src="foto.jpg"
     srcset="foto.jpg 1x, foto-2x.jpg 2x"
     alt="Descripción"
     width="600"
     height="400"
     style="max-width:100%;height:auto">

Cuando se necesita art direction — servir imágenes con composición distinta según el viewport, no solo diferente resolución — el elemento <picture> es la herramienta adecuada. <picture> envuelve varios <source> con condiciones de media query y un <img> de fallback.

Ejemplo realista

<img
  src="cafe.jpg"
  alt="Taza de café sobre una mesa de madera"
  width="320"
  height="200"
  loading="lazy"
/>

Cuándo usar qué

Notas, gotchas e interacción

• alt ausente ≠ alt="": el primero es un error de accesibilidad; el segundo es una decisión deliberada (“imagen decorativa, saltear”).
• Declarar width/height en el HTML y además dimensionar con CSS no se contradice: el HTML reserva el espacio inicial (evita el salto), el CSS manda en el tamaño final. Para que la imagen no se deforme al fijar solo una dimensión en CSS, usá height: auto.
• Al ser en línea, una imagen sola en un contenedor puede dejar un pequeño espacio debajo (por la línea base del texto); se resuelve con display: block o vertical-align: middle.

Vigente / legacy

El atributo align (alinear la imagen respecto al texto) es LEGACY → se hace con CSS (float, margin, vertical-align), no con HTML.

Los atributos border, hspace y vspace también son legacy → CSS.

Aprendelo en el recorrido

Esta entrada complementa la lección El elemento <img>: incrustar imágenes del módulo Imágenes y medios. La lección cubre los atributos esenciales y los formatos de imagen; acá encontrás atributos de rendimiento y accesibilidad más detallados.

Ver también

• figure — contenedor semántico para imagen + pie de foto
• picture — imágenes responsive con múltiples fuentes según contexto de pantalla
• video — incrustar video en la página
• audio — incrustar audio en la página