En la pestaña Red de casi cualquier web de un estudio de diseño verás lo mismo: lo que más pesa son las imágenes y los vídeos. Además de escribir bien el HTML, elegir el formato y el tamaño es lo que más hace que una web cargue rápido, sobre todo en el móvil.

Ya conoces <img> (lección HTML: estructura y contenido). Cuando la imagen lleva un pie, se agrupa con <figure> y el pie va en <figcaption>:

<figure>
  <img src="img/cartel-festival.webp"
       alt="Cartel del Festival de Otoño: tipografía condensada roja sobre fondo negro"
       width="800" height="1131" loading="lazy">
  <figcaption>Cartel para el Festival de Otoño, 2026.</figcaption>
</figure>

loading="lazy" hace que el navegador no descargue la imagen hasta que esté a punto de verse: úsalo en las imágenes que quedan por debajo de la primera pantalla.

• Mapa de bits (JPG, PNG, WebP, AVIF, GIF): la imagen es una cuadrícula de píxeles. Si la amplías por encima de su tamaño, se ve borrosa o pixelada.
• Vectorial (SVG): la imagen se describe con formas (líneas, curvas, rellenos). Se ve nítida a cualquier tamaño y, para formas sencillas, pesa muy poco. Admite colores, degradados y animación.

Logotipos, iconos e ilustraciones planas, en SVG. Fotografías, en mapa de bits.

Una foto de cámara tiene unos 6000 × 4000 px y pesa varios megas. Si la subes tal cual, el navegador la mostrará más pequeña, pero descargará todo el peso. Antes de ponerla en una web:

1. Redimensiona al tamaño máximo al que se va a ver. Para una imagen a todo el ancho bastan unos 1600–2000 px; para una miniatura, unos 600 px.
2. Comprime en WebP (o JPG). Con Squoosh lo haces en el navegador y comparas el antes y el después.
3. Pon nombres claros al fichero, sin espacios ni tildes: cartel-festival-2026.webp.

Como referencia, una foto grande de una web debería pesar menos de 300 KB.

<video controls width="640" poster="img/portada-reel.webp">
  <source src="video/reel.webm" type="video/webm">
  <source src="video/reel.mp4" type="video/mp4">
  Tu navegador no puede reproducir este vídeo.
</video>

<audio controls>
  <source src="audio/entrevista.mp3" type="audio/mpeg">
</audio>

• controls: muestra los botones de reproducir, pausa y volumen. Sin él, el vídeo no se puede manejar.
• poster: la imagen que se ve antes de darle a reproducir.
• <source>: puedes ofrecer el mismo vídeo en varios formatos; el navegador usa el primero que entiende. Su atributo type es el tipo MIME: le dice al navegador qué formato es para que decida si puede reproducirlo sin descargarlo antes.
• Para un vídeo de fondo que se mueve solo, como un GIF: autoplay muted loop playsinline. Los navegadores solo dejan arrancar solo un vídeo si va silenciado.

Un fichero de vídeo tiene dos capas:

• El contenedor es la caja que empaqueta la imagen, el sonido y los subtítulos. Es la extensión del fichero: MP4, WebM, MOV.
• El códec es cómo se comprime la imagen dentro de la caja: H.264, VP9, AV1.

Por eso un .mp4 a veces no se reproduce en el navegador: la caja es conocida, pero el códec de dentro no. Para la web, lo más seguro es MP4 con H.264 y, si quieres menos peso, una versión WebM. El type de <source> indica el contenedor, no el códec.

1. Abre la web de un estudio o de un fotógrafo que te guste, abre la pestaña Red, filtra por Img y recarga. ¿Qué imagen pesa más? ¿En qué formato está?
2. Pasa una foto tuya por Squoosh: compárala en JPG y en WebP con calidad 75. Apunta el peso de cada una.
3. En una página tuya, pon una de las imágenes dentro de un <figure> con su <figcaption>.

• Subir fotos de cámara sin redimensionar: la web tarda segundos en cargar en el móvil.
• Guardar fotos en PNG «para que tengan más calidad»: pesan varias veces más y no se nota.
• Usar un GIF para una animación: más peso y peores colores que un vídeo corto.
• Un <video> sin controls ni autoplay: se ve el primer fotograma y no hay forma de reproducirlo.