Imágenes

Insertar una imagen

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

<img> es distinta a la mayoría de las etiquetas que vimos hasta ahora: no tiene cierre ni contenido — toda la información va en atributos. src (de source) indica qué archivo mostrar, usando la misma lógica de rutas relativas que ya conocés.

El atributo alt

Una imagen puede no estar disponible para todos los visitantes: puede fallar la conexión, o la persona puede usar un lector de pantalla que no puede "ver" la imagen. El atributo alt describe el contenido de la imagen en esos casos:

<img src="foto.jpg" alt="Estudiantes trabajando en una computadora">

¿Qué texto debería llevar el alt de una foto de tres estudiantes programando?

• ❌ alt="foto" — no dice nada sobre el contenido
• ❌ alt="imagen123.jpg" — es el nombre del archivo, no una descripción
• ✅ alt="Tres estudiantes programando frente a una computadora" — describe lo que efectivamente se ve

Imagen decorativa

No toda imagen transmite información importante — a veces es puramente decorativa (un adorno, una línea divisoria con estilo). En esos casos, se deja el alt vacío a propósito:

<img src="adorno.png" alt="">

Esto es distinto a no poner alt directamente — un alt="" le dice explícitamente a un lector de pantalla "esta imagen no tiene información, se puede saltear sin problema". No ponerlo lo deja adivinando.