Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 7 · Semana 3

Imágenes correctamente utilizadas

Hoy · Hoja de ruta

  1. 1. Aprende: Que el alt correcto depende de la función de la imagen y no de lo que se ve en ella, y qué atributos mejoran el rendimiento.
  2. 2. Haz: Decide el texto alternativo de cinco imágenes con funciones distintas y añade imágenes a tu proyecto.
  3. 3. Comprueba: Desactiva las imágenes y comprueba si la página sigue entendiéndose.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Desde qué archivo se resuelve una ruta relativa?
  2. ¿Qué convierte un grupo de enlaces en una navegación?
  3. Desde paginas/productos.html, escribe la ruta hacia index.html.

La etiqueta

<img src="img/portatil.webp"
     alt="Portátil gris abierto sobre una mesa de trabajo">

src indica el archivo y alt el texto alternativo. img es un elemento vacío: no se cierra.

El alt no describe la imagen: la sustituye

La pregunta habitual, «¿qué pongo en el alt?», casi siempre se responde describiendo lo que se ve. Es la respuesta equivocada.

El texto alternativo es lo que ocupa el lugar de la imagen cuando la imagen no está: porque no ha cargado, porque la conexión es mala, o porque quien lee la página no la ve. Así que la pregunta correcta es:

Si borro esta imagen, ¿qué tendría que decir aquí para que no se pierda nada?

De ahí salen tres casos, y solo tres:

La imagen… El alt es… Ejemplo
Informa: aporta contenido que no está escrito en ningún otro sitio La información que aporta alt="El modelo A consume 45 W, el B 65 W y el C 90 W"
Actúa: es el único contenido de un enlace o un botón La acción o el destino, no el dibujo alt="Buscar en la tienda"
Decora: no aporta nada que no esté ya en el texto Vacío, y se escribe igualmente alt=""

Imagen informativa

<img src="img/placa-solar.webp"
     alt="Paneles solares instalados sobre la cubierta del edificio">

Imagen decorativa

<img src="img/separador.webp" alt="">

Un texto alternativo vacío puede ser exactamente la decisión correcta.

alt="" no es lo mismo que no poner alt

alt="" significa «esta imagen es decorativa, ignórala». Un lector de pantalla la salta en silencio, que es justo lo que queremos.

Si directamente no escribes el atributo, el lector no sabe qué hacer y suele leer el nombre del archivo. Quien usa la página escucha «guion bajo img guion 47 punto webp». Por eso toda imagen lleva alt: la duda es solo si va vacío o lleno.

Lo que no debemos hacer

alt="foto"

No aporta información alguna. Tampoco la aporta esto:

alt="ordenador portátil barato comprar ordenador portátil
ofertas portátiles ordenador gaming tienda Alicante"

El alt no es un sitio donde meter palabras clave. Quien depende de él tiene que escuchar eso entero.

figure y figcaption

Cuando la imagen lleva un pie visible, los dos se marcan juntos:

<figure>
    <img src="img/prototipo.webp"
         alt="Primer prototipo del robot, con la carcasa abierta">

    <figcaption>
        Primer prototipo desarrollado en 2026.
    </figcaption>
</figure>

figcaption es el pie que ve todo el mundo; alt sustituye a la imagen para quien no la ve. No deben decir lo mismo, porque no hacen lo mismo: si los repites, quien use un lector de pantalla escucha la misma frase dos veces.

Dos atributos de rendimiento

<img src="img/producto.webp"
     alt="Teclado mecánico compacto"
     width="800"
     height="600"
     loading="lazy">

width y height reservan el hueco antes de que la imagen llegue, y evitan que el texto salte cuando termina de cargar. loading="lazy" retrasa la descarga de las imágenes que todavía no se ven. Más adelante veremos cómo CSS adapta visualmente estas imágenes.

Extra · una imagen no tiene por qué ser un único archivo

HTML permite ofrecer varias versiones del mismo contenido y dejar que el navegador elija:

<picture>
    <source srcset="img/portada.webp" type="image/webp">
    <img src="img/portada.jpg" alt="Estudiantes en un laboratorio">
</picture>

El navegador usa el primer source que entiende y, si no entiende ninguno, cae en el img. No hace falta dominarlo ahora. Lo importante es saber que existe y que una imagen web no es necesariamente un solo archivo para cualquier situación.

Extra · audio, vídeo y contenido incrustado

HTML también incorpora multimedia:

<video controls>
    <source src="media/demo.mp4" type="video/mp4">
    Tu navegador no puede reproducir este vídeo.
</video>

<audio controls>
<source src=“media/audio.mp3” type=“audio/mpeg”>
</audio>

El texto suelto dentro del elemento es lo que se muestra si el navegador no puede reproducirlo.

Y con <iframe> se puede incrustar un documento externo dentro del tuyo:

<iframe src="https://example.com"
        title="Contenido externo de ejemplo"
        loading="lazy"></iframe>

Un iframe no debería ser la opción automática para cualquier contenido: estás metiendo una página ajena dentro de la tuya, con implicaciones de seguridad, privacidad, rendimiento y accesibilidad. El title no es opcional, porque es lo único que identifica ese marco.

Un vídeo de 200 MB en tu web también es una decisión: tamaño, ancho de banda, formato y compatibilidad. Volveremos a este problema al estudiar optimización.

Tarea 6 · ¿Qué alt pondrías?

Paso 1 · Te enseño uno

El logotipo de la empresa en la cabecera, enlazado a index.html.

¿Qué función tiene?
Actúa: es el único contenido de un enlace.
Si la borro, ¿qué se pierde?
Un enlace sin ningún texto. Quien no vea la imagen se encuentra un enlace que no dice adónde va.
Entonces, ¿qué escribo?
El destino, no el dibujo. No «logotipo azul de PixelStore», sino adónde lleva.
Solución
alt="PixelStore · Inicio"

Paso 2 · Ahora tú

Para cada caso, decide si el alt debe ser descriptivo, funcional o vacío, escríbelo, y di por qué:

  1. Un gráfico de barras que compara el consumo energético de tres portátiles.
  2. Una fotografía decorativa que separa dos secciones.
  3. Un icono de lupa dentro de un enlace, sin ningún texto alrededor.
  4. La foto de un producto en su ficha: un teclado mecánico con iluminación RGB.
  5. La foto del equipo en la página «Acerca de», con un pie que ya dice quiénes son.
Ver soluciones recomendadas

1 · Informa. alt="El modelo A consume 45 W, el B 65 W y el C 90 W". Un gráfico se sustituye por sus datos, no por la palabra «gráfico».

2 · Decora. alt="".

3 · Actúa. alt="Buscar en la tienda": es la única etiqueta accesible que tiene ese enlace.

4 · Informa. alt="Teclado mecánico compacto con interruptores rojos y retroiluminación RGB". En una ficha de producto la foto sí aporta contenido.

5 · Depende del pie. Si el figcaption ya identifica a las personas, el alt describe lo que se ve sin repetirlo: alt="Nueve personas en la oficina". Si el pie no dice nada, el alt carga con la información.

Ahora tú · Imágenes en tu proyecto

Crea la carpeta img/ y añade al menos tres imágenes a tu sitio: una informativa, una decorativa y una dentro de un figure con su pie. Enlázalas con rutas relativas.

Comprobación · la prueba de las imágenes apagadas

Desactiva la carga de imágenes en el navegador y recarga tu proyecto. Si alguna zona pasa a ser incomprensible, o aparece un hueco sin ninguna explicación, ese alt está mal resuelto.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué diferencia hay entre alt="" y no escribir alt?
  2. Una lupa dentro de un enlace de búsqueda: ¿qué alt lleva?
  3. ¿Por qué alt y figcaption no deben decir lo mismo?
Ver respuestas

1 · alt="" declara que la imagen es decorativa y hace que se ignore. Sin el atributo, el lector de pantalla acaba leyendo el nombre del archivo.

2 · La acción, no el dibujo: alt="Buscar en la tienda".

3 · Porque el pie lo lee todo el mundo y el alt solo sustituye a la imagen. Si coinciden, se oye la misma frase dos veces.