HTML
Cómo insertar imágenes en HTML y escribir textos alternativos útiles según el propósito de la imagen, su contexto y su valor informativo.
El elemento integra una imagen y necesita una alternativa textual que cumpla la misma función cuando la imagen no puede verse.
img<img
src="avatar.webp"
alt="Nicolás Garzón con el pulgar arriba"
width="320"
height="320"
><img
src="dashboard.webp"
alt="Dashboard de DomiSys con métricas de ventas e inventario"
>La alternativa comunica la información relevante.
<img src="gradient-shape.svg" alt="">alt="" indica que no aporta información y puede ignorarse en la experiencia accesible.
No omitas el atributo:
<img src="gradient-shape.svg">Sin alt, tecnologías de asistencia pueden anunciar filename, URL u otro fallback poco útil.
<a href="/portfolio/domisys">
<img src="domisys.webp" alt="">
<span>DomiSys</span>
</a>El texto ya nombra el destino; repetirlo en alt produciría un nombre duplicado.
<a href="/">
<img src="logo.svg" alt="Nicolás Garzón — Inicio">
</a>El alt nombra el propósito del enlace, no solo “logo”.
<button type="submit">
<img src="search.svg" alt="Buscar">
</button>Puede funcionar, pero suele ser más robusto usar SVG decorativo y texto accesible asociado al botón.
<button type="submit" aria-label="Buscar">
<svg aria-hidden="true">...</svg>
</button>Un gráfico necesita:
<figure>
<img
src="revenue-chart.svg"
alt="Ingresos mensuales de enero a junio"
aria-describedby="revenue-description"
>
<figcaption id="revenue-description">
Los ingresos aumentaron de 20 a 46 millones, con la mayor subida entre abril y mayo.
</figcaption>
</figure>Una tabla de datos puede ofrecer una alternativa aún más precisa.
Alt útil:
alt="Nicolás Garzón trabajando frente a dos monitores"Menos útil:
alt="imagen"
alt="foto de una persona"No necesitas comenzar con “imagen de”; el rol ya comunica que es una imagen, salvo que el medio forme parte del significado.
Evita usar imágenes para texto. Si es inevitable, el alt debe contener el texto relevante.
Logos pueden usar su nombre:
<img src="company-logo.svg" alt="Acme">figcaption y alt no siempre deben repetir lo mismo.
<figure>
<img
src="domisys-dashboard.webp"
alt="Panel con ventas del día, pedidos activos y alertas de stock"
>
<figcaption>Dashboard principal de DomiSys.</figcaption>
</figure>El alt explica la imagen; caption la contextualiza dentro del documento.
<img src="/images/product.webp" alt="...">Si falla, el alt sigue aportando significado y el layout debería mantener una experiencia comprensible.
<img
src="project.webp"
alt="..."
width="1200"
height="750"
>Declaran dimensiones intrínsecas y permiten reservar proporción antes de descargar, reduciendo layout shift.
CSS puede mostrar otro tamaño manteniendo proporción.
<img src="hero.webp" alt="..." decoding="async">Es una sugerencia sobre decodificación. No debe añadirse mecánicamente a todas las imágenes sin entender prioridad y resultado.
<img src="project.webp" alt="..." loading="lazy">Difiere imágenes fuera del viewport. No hagas lazy load de la imagen principal visible inicialmente si retrasa LCP.
<img
src="hero.webp"
alt="Vista principal de DomiSys"
fetchpriority="high"
>Es una pista para priorización. Úsala con medición y solo para recursos realmente críticos.
<img
src="https://cdn.example.com/chart.png"
alt="..."
crossorigin="anonymous"
referrerpolicy="no-referrer"
>Afectan CORS, canvas y referrer. La respuesta del servidor debe ser compatible.
<img src="" alt="">Puede provocar una solicitud a la URL del documento según entorno. Omite el elemento hasta tener recurso o usa una estrategia explícita.
<article>
<a href="/portfolio/domisys">
<img
src="/projects/domisys-card.webp"
alt=""
width="960"
height="600"
loading="lazy"
>
<h2>DomiSys</h2>
</a>
</article>La imagen es decorativa dentro del enlace porque el heading ya nombra el destino.
alt="".¿Por qué el avatar animado de un hero podría usar alt=""?
Si el nombre y la información de la persona ya están en texto y el avatar solo decora o refuerza visualmente el hero, anunciarlo añadiría ruido sin información nueva.
Imágenes responsive con srcset y sizes permite elegir recursos según viewport y densidad.