Curso HTML 6.1 Etiqueta img: src, alt, title y dimensiones

Etiqueta img en HTML

La etiqueta img se utiliza para incorporar imágenes dentro de un documento HTML. Es una etiqueta vacía (no tiene etiqueta de cierre) y emplea varios atributos clave para controlar qué imagen se muestra, su texto alternativo, tooltip y dimensiones.

1. Atributo src

Define la fuente de la imagen. Puede apuntar a:

• Ruta relativa (ej. images/foto.jpg).
• Ruta absoluta (ej. https://ejemplo.com/imagen.png).
• Data URI (codificación Base64 dentro de la propia página).

Ejemplo con ruta relativa:

<!-- Imagen desde carpeta local 'assets' -->
<img src='assets/logo.svg' alt='Logotipo de la empresa'>

Ejemplo con Data URI (útil para iconos pequeños):

<!-- Imagen PNG embebida en Base64 -->
<img
  src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...'
  alt='Icono incrustado'
/>

2. Atributo alt

Proporciona un texto alternativo que describe la imagen. Es fundamental para:

• Accesibilidad: los lectores de pantalla leen el alt a usuarios con discapacidad visual.
• SEO: los motores de búsqueda indexan este texto para entender el contenido visual.
• Fallback: se muestra si la imagen no carga.

Buenas prácticas:

• Describir la función o contenido de la imagen brevemente.
• Si la imagen es puramente decorativa, usar alt='' (vacío) para que se ignore.
• No repetir información redundante que ya esté en el contexto textual.

<!-- Imagen informativa: descripción breve -->
<img src='paisaje.jpg' alt='Valle montañoso al atardecer'>

<!-- Imagen decorativa: alt vacío -->
<img src='ornamento.svg' alt=''>

3. Atributo title

Proporciona información adicional que aparece como tooltip al situar el cursor sobre la imagen. No sustituye a alt:

• No es necesariamente leído por todos los lectores de pantalla.
• Se utiliza para textos complementarios, no descriptivos.

<!-- Imagen con título descriptivo adicional -->
<img
  src='grafico-ventas.png'
  alt='Gráfico de ventas trimestrales'
  title='Datos recogidos en noviembre de 2023'
/>

4. Dimensiones: width y height

Estos atributos sirven para reservar espacio en el flujo del documento antes de que cargue la imagen. Se especifican en píxeles:

• width: ancho de la imagen.
• height: alto de la imagen.

Ventajas de usarlos:

• Evitan cambios de diseño bruscos (layout shift) al cargar.
• Mejoran la experiencia de usuario y el rendimiento percibido.

Si no se incluyen, el navegador ajusta el espacio cuando se descarga la imagen.

<!-- Imagen con dimensiones fijas -->
<img
  src='foto-perfil.jpg'
  alt='Retrato de usuario'
  width='200'
  height='200'
/>

Resumen y recomendaciones

• Siempre incluir src y alt.
• Usar title con moderación para info adicional.
• Definir width y height si es posible para mejorar el rendimiento.
• Emplear rutas relativas para mantenimiento más fácil, y Data URI para recursos muy pequeños.
• Priorizar la accesibilidad y el SEO describiendo correctamente el alt.