#06 Imágenes y multimedia#06 Imágenes y multimedia

La etiqueta <img>

Para mostrar una imagen se usa <img>, un elemento vacío (sin etiqueta de cierre) con dos atributos imprescindibles:

<img src="perro.jpg" alt="Un perro marrón corriendo por la playa">

• src (source, origen): la ruta de la imagen. Funciona igual que el href de los enlaces: puede ser relativa (fotos/perro.jpg) o absoluta (https://…).
• alt (alternative text): la descripción de la imagen en texto.

1
2
3

Imágenes de tu proyecto

Lo normal es guardar las imágenes dentro de la carpeta del proyecto, a menudo en una subcarpeta propia:

mi-web/
├── index.html
└── img/
    ├── perfil.jpg
    └── logo.svg

<img src="img/perfil.jpg" alt="Mi foto de perfil sonriendo">

El texto alternativo importa

El atributo alt es obligatorio, y no es un trámite. Lo usan:

• Las personas ciegas: su lector de pantalla lee el alt en voz alta.
• Los buscadores: Google no «ve» las fotos; lee su alt.
• Todo el mundo, cuando la imagen no carga.

Cómo escribir un buen alt:

Tamaño: width y height

Puedes indicar el ancho y el alto de la imagen en píxeles, sin escribir px:

<img src="perro.jpg" alt="Un perro marrón" width="600" height="400">

Aunque luego cambies el tamaño con CSS, conviene ponerlos: así el navegador reserva el hueco mientras la imagen se descarga y el texto no da saltos. Escribe el tamaño real de la imagen (o en la misma proporción).

Pies de foto: <figure> y <figcaption>

Cuando una imagen lleva un pie de foto, se agrupan con <figure>:

1
2
3
4

¿Qué formato elijo?

Vídeo y audio

HTML también reproduce vídeo y audio sin nada más. El atributo controls muestra los botones de reproducir, volumen, etc.:

<video src="video/paseo.mp4" controls width="640"></video>
<audio src="audio/podcast.mp3" controls></audio>

A diferencia de <img>, estos sí llevan etiqueta de cierre. Para vídeos de YouTube o mapas de Google Maps, esos servicios te dan un código ya hecho (un <iframe>) en su botón Compartir → Insertar: solo tienes que copiarlo y pegarlo.

Errores típicos

• Olvidar el alt o escribir cosas como alt="imagen".
• Confundir src con href. Las imágenes usan src; los enlaces, href.
• Rutas mal escritas: una mayúscula de más, la carpeta equivocada o una ruta de tu ordenador (C:\…).
• Subir fotos enormes directamente desde la cámara o el móvil.
• Escribir </img>. <img> es un elemento vacío: no se cierra.

Ejercicios

Ejercicio 1: arregla las imágenes (fácil)

Estas imágenes tienen errores. Corrígelos para que se vean y sean accesibles.

1
2

<img src="https://picsum.photos/id/1025/300/200" alt="Un perro carlino envuelto en una manta">
<img src="https://picsum.photos/id/1084/300/200" alt="Morsas descansando sobre las rocas">

Ejercicio 2: galería con pies de foto (medio)

Crea una pequeña galería con tres <figure>, cada una con una imagen (usa direcciones como https://picsum.photos/id/10/300/200, cambiando el número), su alt, su width y height, y un <figcaption>.

1

<h2>Mis viajes</h2>
<figure>
  <img src="https://picsum.photos/id/10/300/200" alt="Bosque junto a un lago" width="300" height="200">
  <figcaption>Asturias, 2024.</figcaption>
</figure>
<figure>
  <img src="https://picsum.photos/id/15/300/200" alt="Río con rocas y cascada" width="300" height="200">
  <figcaption>Pirineos, 2025.</figcaption>
</figure>
<figure>
  <img src="https://picsum.photos/id/1015/300/200" alt="Río entre montañas" width="300" height="200">
  <figcaption>Alpes, 2026.</figcaption>
</figure>

Ejercicio 3: imagen que enlaza (medio)

Haz que una imagen sea un enlace a https://es.wikipedia.org. Piensa qué alt necesita ahora.

1

<a href="https://es.wikipedia.org">
  <img src="https://picsum.photos/id/24/200/120" alt="Ir a Wikipedia" width="200" height="120">
</a>

Ficha resumen

• <img src="ruta" alt="descripción"> es un elemento vacío.
• alt siempre: describe lo que aporta la imagen. Si es solo decoración, alt="".
• width y height reservan el hueco mientras carga.
• <figure> + <figcaption> para imagen con pie de foto.
• JPG para fotos, PNG para transparencias, SVG para logos e iconos, WebP para fotos ligeras.
• <video controls> y <audio controls> reproducen multimedia.

Glosario