Etiqueta img en HTML: imágenes, alt y carga adaptable

La etiqueta <img> incorpora una imagen al documento y ofrece una alternativa textual mediante alt. Úsala cuando una fotografía, un dibujo o un icono formen parte del contenido: por ejemplo, para mostrar cómo es la entrada de un aula. La dirección del archivo se escribe en src; HTML no dibuja la imagen ni convierte su nombre en una descripción accesible.

Ejemplo mínimo: una entrada con rampa

Descarga la ilustración de la fachada, de 640 × 360 píxeles y guárdala como fachada-640.png junto a tu documento HTML. Es un dibujo original del sitio que puedes usar para practicar. Inserta este fragmento dentro del cuerpo de un documento con codificación UTF-8:

<img src="fachada-640.png"
     alt="Entrada del aula con una rampa a la izquierda"
     width="640" height="360"
     style="max-width: 100%; height: auto;">

Verás una fachada con una puerta, una rampa a la izquierda y escalones a la derecha. alt comunica el acceso que interesa al lector. Las dimensiones permiten reservar espacio con proporción 16:9 antes de cargar el archivo; el CSS evita que la imagen supere el ancho disponible y conserva esa proporción.

Si cambias src, cambia el recurso solicitado: actualiza también alt y las dimensiones cuando corresponda. Si retiras todo el <img>, desaparecen tanto la imagen como su alternativa; el navegador no deja su descripción como un párrafo. Cambiar solo alt modifica la alternativa textual, no los píxeles del dibujo.

Sintaxis y contexto válido

<img> es un elemento vacío: no contiene hijos y no tiene etiqueta de cierre. No escribas </img> ni pongas su descripción entre dos etiquetas. En HTML, la barra final de <img ... /> es innecesaria.

Pertenece al contenido de frase y de flujo. Puede aparecer dentro de un <p>, un enlace, una figura u otro contenedor que admita ese contenido. Dentro de <picture>, va después de los elementos <source>. Al usar usemap, pasa a ser contenido interactivo y aparecen restricciones adicionales, como no situarlo dentro de un enlace.

Debe existir al menos uno de los atributos src o srcset. En los ejemplos conservamos src como dirección básica. Una URL relativa como fachada-640.png se resuelve respecto de la URL base del documento; una que empieza por / apunta a la raíz del sitio, no a la carpeta del archivo HTML. El HTML Living Standard define el contexto, contenido y atributos de <img>.

Cómo escribir un alt útil

La misma imagen puede necesitar textos distintos según su propósito. Decide qué perdería el lector al no verla:

• Informativa: describe la información relevante. En el ejemplo interesa la rampa, no enumerar las ventanas ni escribir alt="fachada-640.png". Si un gráfico aporta datos, incluye esos datos o proporciona una explicación equivalente cercana. Consulta las imágenes informativas de W3C WAI.
• Decorativa o redundante: usa alt="" si retirarla no cambia la información. Una estrella junto a «Visita al aula» puede adornar ese título. Omitir alt no equivale a dejarlo vacío; algunas tecnologías de asistencia pueden anunciar el archivo. La guía de imágenes decorativas explica la diferencia.
• Funcional dentro de un enlace: si la imagen es su único contenido, expresa el destino o la acción. Un enlace que abre el dibujo grande podría llevar alt="Ampliar la entrada del aula". Si ya hay texto visible que nombra el enlace y el icono no añade información, deja el icono con alt="". Véanse las imágenes funcionales de W3C WAI.

No añadas «imagen de» por rutina: normalmente la tecnología de asistencia ya identifica la imagen. Sí puede ser relevante distinguir una fotografía de un plano cuando eso cambie la interpretación. Un pie de figura aporta contexto, pero no sustituye automáticamente la alternativa de la imagen.

¿Alt y title son lo mismo? No. alt reemplaza la información de la imagen; title es un atributo global con información adicional que algunos navegadores muestran al mantener el puntero encima. Ese aviso no está disponible de la misma manera con teclado, pantalla táctil o lector de pantalla. No uses title para evitar escribir alt ni para guardar instrucciones esenciales.

Tamaño, proporción y selección del archivo

width="640" y height="360" son números enteros sin unidades, expresados en píxeles CSS. Declarar ambos con una proporción coherente ayuda a reducir saltos de contenido durante la carga. No escribas width="100%" ni height="360px": los porcentajes y unidades pertenecen al CSS. Tampoco reducen el peso del archivo descargado. La referencia de <img> en MDN explica la reserva de espacio.

CSS puede cambiar el tamaño visible. Al fijar el ancho, usa height: auto para conservar la proporción. Si impones ancho y alto incompatibles, puedes estirar el dibujo; object-fit permite ajustarlo dentro de una caja, aunque valores como cover pueden recortar información.

srcset ofrece archivos candidatos. Con descriptores como 640w, el número debe coincidir con el ancho real del archivo. sizes declara cuánto ancho ocupará la imagen en el diseño; no aplica estilos. El navegador combina esa pista con la densidad de pantalla y otras condiciones para seleccionar un recurso. Para imágenes de tamaño fijo también existen descriptores 1x, 2x; no mezcles w y x en la misma lista. MDN desarrolla estas diferencias en su guía de imágenes adaptables.

El ejemplo siguiente mantiene el mismo dibujo y encuadre. Usa <picture> con <source> cuando debas ofrecer otros formatos o cambiar el encuadre según una condición. La imagen visible y su alt siguen perteneciendo al <img> final.

Ejemplo práctico: imagen adaptable e icono decorativo

Descarga estos archivos en una misma carpeta: fachada-640.png, fachada-960.png, fachada-1280.png y estrella.svg. Las fachadas miden 640 × 360, 960 × 540 y 1280 × 720; son variantes reales de una ilustración original en SVG, con igual proporción y contenido. Puedes usar también el icono original para practicar.

Guarda este documento completo como visita.html en esa carpeta y ábrelo en el navegador. Funciona desde archivos locales, sin servidor ni JavaScript:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Visita al aula</title>
    <style>
      body { margin: 0; font-family: sans-serif; line-height: 1.5; }
      .visita {
        width: calc(100vw - 32px);
        max-width: 768px;
        margin: 24px auto;
      }
      .foto-aula { display: block; width: 100%; height: auto; }
      .estrella { vertical-align: middle; }
      a:focus-visible { outline: 3px solid #174e9c; outline-offset: 3px; }
    </style>
  </head>
  <body>
    <div class="visita">
      <h1>
        <img class="estrella" src="estrella.svg" alt="" width="24" height="24">
        Visita al aula
      </h1>
      <p>Consulta el acceso antes de tu primera visita.</p>
      <img class="foto-aula"
           src="fachada-640.png"
           srcset="fachada-640.png 640w,
                   fachada-960.png 960w,
                   fachada-1280.png 1280w"
           sizes="(max-width: 800px) calc(100vw - 32px), 768px"
           alt="Entrada del aula con una rampa a la izquierda"
           width="1280" height="720"
           decoding="async">
      <p>Para entrar sin utilizar los escalones, toma la rampa de la izquierda.</p>
      <p><a href="fachada-1280.png">Abrir la ilustración grande</a></p>
    </div>
  </body>
</html>

1. Observa la estrella junto al título y la fachada debajo. La estrella no añade información: su alternativa está vacía. La fachada informa sobre el acceso.
2. Reduce la ventana. A 375 píxeles, la imagen dispone de 343; a partir de 800, alcanza como máximo 768. sizes refleja exactamente esa regla del CSS. Si modificas el diseño, revisa también esa pista.
3. Abre las herramientas de desarrollo. En una página servida por HTTP, la pestaña Red/Network, filtrada por imágenes, permite comprobar qué archivo se solicita y si responde correctamente. Desactiva la caché y recarga al comparar tamaños; el navegador puede conservar una variante grande ya descargada.
4. Con JavaScript habilitado, ejecuta el siguiente fragmento en la consola después de cargar la imagen. currentSrc muestra la URL seleccionada. Comprueba la carga con complete y naturalWidth > 0: complete también puede ser verdadero después de un error. Consulta la propiedad currentSrc en MDN.

const imagen = document.querySelector(".foto-aula");
console.table({
  archivo: imagen.currentSrc,
  cargada: imagen.complete && imagen.naturalWidth > 0,
  anchoVisible: imagen.getBoundingClientRect().width,
  densidadPantalla: window.devicePixelRatio
});

No esperes un archivo fijo para cada ancho: la densidad de pantalla, la caché y las decisiones del navegador influyen. srcset ofrece opciones, no una orden universal. src queda como alternativa para navegadores sin selección adaptable; no asegura recuperar una variante rota del srcset.

Usa Tab y Enter para abrir el enlace a la ilustración grande. Desactiva JavaScript y recarga: las dos imágenes, la selección adaptable y el enlace siguen funcionando; solo la inspección por consola necesita JavaScript. Retirar la estrella conserva toda la información. Retirar la fachada elimina el dibujo, aunque permanece la indicación textual de la rampa.

Atributos de carga y casos especiales

Los atributos más habituales de <img> son los siguientes:

No añadas loading="lazy" automáticamente a la imagen principal que el lector verá al llegar: aplazarla puede retrasar contenido importante. Evalúa la carga diferida para imágenes alejadas de la primera vista y conserva dimensiones. El umbral depende del navegador; con JavaScript deshabilitado, la carga diferida nativa se desactiva. Véase MDN sobre loading.

decoding="async" permite presentar otro contenido sin esperar la decodificación de la imagen; no significa descargarla más tarde. fetchpriority="high" puede orientar al navegador para una imagen prioritaria, pero no garantiza una mejora y asignarlo a todas pierde utilidad. Consulta las referencias de decoding y fetchPriority.

En casos específicos, crossorigin="anonymous" solicita CORS sin credenciales entre orígenes; use-credentials las incluye y exige autorización adecuada del servidor. Puede ser necesario para leer en <canvas> píxeles de una imagen de otro origen. No lo añadas para arreglar una ruta: sin los encabezados CORS correctos, puede impedir la carga. referrerpolicy decide qué información de referencia se envía; por ejemplo, no-referrer la omite. No concede permisos sobre el archivo. MDN documenta CORS y la política de referencia.

usemap="#accesos" asocia la imagen con un <map name="accesos"> del documento. Sus regiones <area> necesitan nombres accesibles y coordenadas coherentes; no combines usemap con un <img> dentro de <a> o <button>. La guía de <area> explica las regiones enlazadas.

class, id, style y title son atributos globales. max-width, height: auto y object-fit son CSS; currentSrc y naturalWidth son propiedades DOM de JavaScript, no atributos que debas escribir en HTML. El <img> informativo ordinario no necesita un role="img" redundante.

Errores frecuentes y etiquetas relacionadas

¿Por qué no aparece mi imagen? Comprueba en este orden:

1. La URL resuelta: carpeta, mayúsculas, extensión y posible URL base. Con srcset, revisa también el archivo de currentSrc.
2. La existencia del archivo y la respuesta del servidor. Un 404 indica que no lo encuentra; un 403 puede indicar permisos. Abrir la URL directamente ayuda a separar una ruta errónea de un problema de presentación.
3. El formato y los bytes reales: renombrar un archivo a .png no lo convierte en PNG. Comprueba que el navegador pueda decodificarlo.
4. Bloqueos de seguridad, como CORS o una política del sitio, y después CSS que lo oculte o le dé dimensiones nulas.

alt ofrece una alternativa, pero no repara una descarga. No omitas ese atributo por rutina, no uses el nombre del archivo como descripción y no confundas reducir el tamaño con comprimirlo.

Usa <img> para incorporar la imagen; una imagen de fondo CSS sirve para decoración y no dispone de alt. <picture> y <source> intervienen en la selección de archivos; <map> define regiones. Una <figure> agrupa contenido autónomo y puede añadir un <figcaption>, sin convertirse en sustituto de <img>.

Compatibilidad y fuentes

Revisión: 5 de octubre de 2026. MDN registra disponibilidad amplia para <img>, srcset y sizes. El soporte del elemento no garantiza que todas las pistas de carga se apliquen igual: revisa la compatibilidad específica de cada atributo en los enlaces anteriores y comprueba tu página en los navegadores objetivo. La selección adaptable no necesita scripts del autor.

• HTML Living Standard: <img>, para significado, contexto, sintaxis y atributos.
• MDN: <img> y compatibilidad, para referencia del elemento y soporte de sus funciones.
• W3C WAI: tutorial de imágenes, para alternativas según información, decoración o función.