Referencia de etiquetas

Etiqueta source en HTML: fuentes para imágenes y medios

La etiqueta <source> declara un recurso alternativo dentro de <picture>, <audio> o <video>. Úsala para ofrecer varios formatos del mismo vídeo o distintas versiones de una imagen y dejar que el navegador seleccione una opción adecuada. No muestra una imagen ni crea un reproductor por sí sola: esas funciones corresponden a <img> y a los elementos de medios.

Ejemplo mínimo: dos formatos de vídeo

Descarga los archivos originales WebM y MP4, y conserva sus rutas en tu sitio o adapta las URLs. Ambos muestran el mismo recorrido de unos tres segundos, sin sonido. Inserta este fragmento en el cuerpo de un documento HTML:

<video controls style="max-width: 100%; height: auto;">
  <source src="/ejemplos/param/recorrido.webm" type="video/webm">
  <source src="/ejemplos/param/recorrido.mp4" type="video/mp4">
</video>
<p>Vídeo sin sonido: un cuadrado azul ocupa, de izquierda a derecha,
  las posiciones numeradas 1, 2 y 3.</p>
<p><a href="/ejemplos/param/recorrido.mp4" download>Descargar el MP4</a></p>

Aparecen controles nativos; al pulsar reproducir verás el recorrido. El navegador considera primero WebM y puede elegir MP4 si la primera fuente no es reproducible. Esto requiere archivos existentes y códecs compatibles. controls pertenece a <video>; <source> únicamente declara las alternativas. El texto y el enlace exteriores siguen disponibles si la reproducción falla.

Si retiras la primera fuente antes de abrir el documento, solo se ofrece MP4. Si retiras ambas, quedan los controles sin un recurso que reproducir. Cambiar el orden cambia la primera opción considerada, no convierte el vídeo ni obliga a cargar ambos archivos completos.

Sintaxis y lugar de source

<source> es un elemento vacío: no contiene texto ni otras etiquetas y no lleva </source>. Debe ser hijo directo del elemento que utiliza sus recursos:

En <picture>, las fuentes van antes del único <img> final. Se permiten elementos de soporte de scripts intercalados, pero no envolver las fuentes en un contenedor arbitrario.
En <audio> o <video> sin atributo src, van al principio, antes de cualquier <track> y del contenido alternativo permitido. No añadas simultáneamente src al reproductor esperando que sus fuentes actúen como alternativas: esa combinación incumple el modelo de contenido y el src del padre tiene prioridad.

No coloques <source> directamente en un párrafo para mostrar un archivo. Estas restricciones se recogen en el modelo de source del estándar HTML y los modelos de los elementos de medios.

Src frente a srcset y los demás atributos

La misma etiqueta cambia sus atributos según el padre. src indica una URL de audio o vídeo; srcset enumera candidatos de imagen. No son intercambiables.

Atributo	Contexto y efecto
`src`	Obligatorio en fuentes de `<audio>` y `<video>`; identifica el archivo. No se permite en fuentes de `<picture>`.
`srcset`	Obligatorio en `<picture>`; una o varias URLs, con descriptores opcionales `w` de anchura o `x` de densidad. No se permite en audio ni vídeo. No mezcles ambos tipos de descriptor.
`sizes`	Solo en `<picture>`, con candidatos `w`: describe el ancho de presentación previsto para ayudar a elegir. No establece el tamaño mediante CSS.
`type`	Tipo MIME opcional, como `image/webp` o `video/mp4`. Ayuda a descartar formatos incompatibles sin descargarlos; no convierte el recurso.
`media`	Consulta de medios opcional, por ejemplo `(max-width: 600px)`. Si no coincide, se descarta esa fuente. También se admite en audio y vídeo.
`width`, `height`	Solo en `<picture>`: dimensiones enteras sin unidades que pueden aportar tamaño y proporción a `<img>`. No dimensionan un vídeo; allí se ponen en `<video>`.

Si hay descriptores w, declara sizes conforme al diseño. El estándar permite omitirlo cuando el <img> siguiente admite tamaños automáticos, como una imagen con loading="lazy"; en ese caso equivale a auto. Con candidatos 1x y 2x no uses sizes. Los ejemplos siguientes tienen un candidato por fuente y no lo necesitan.

id, class y lang son atributos globales. max-width y height: auto son CSS; currentSrc es una propiedad de JavaScript del elemento que muestra o reproduce el recurso, no un atributo de <source>.

Orden, tipo MIME y selección

En <picture>, el navegador recorre las fuentes en orden y toma la primera con candidatos válidos cuyas condiciones y tipo sean adecuados; después elige dentro de su srcset. Si ninguna sirve, utiliza las opciones de <img>. Pon las condiciones específicas antes de una fuente general que también pueda coincidir. Con varios candidatos influyen la densidad de pantalla, el ancho previsto y las decisiones del navegador. Consulta el algoritmo de selección de imágenes.

En audio y vídeo se consideran las fuentes en orden hasta encontrar un recurso reproducible. Una fuente puede descartarse por media, type o un fallo al obtener o procesar el recurso. No es una orden de reproducirlas consecutivamente ni una garantía de que solo haya una solicitud de red. El algoritmo de carga de medios distingue esos pasos.

Una extensión como .mp4 es un nombre; el contenedor MP4 organiza las pistas; un códec, como H.264, codifica la imagen en movimiento. Un navegador puede admitir el contenedor y no el códec de un archivo concreto. type puede incluir un parámetro codecs cuando conoces su valor real. Comprueba el contenido y la cabecera HTTP Content-Type del servidor; cambiar la extensión o escribir un MIME distinto no transforma los datos.

media también tiene una diferencia importante: <picture> reacciona a cambios del entorno; en audio y vídeo se evalúa durante la selección, sin cambiar automáticamente la reproducción al redimensionar la ventana.

Caso práctico: una imagen y un vídeo con alternativas

Prepara una página con dos fragmentos coordinados. Usa un documento con <!doctype html>, lang="es", codificación UTF-8 y <meta name="viewport" content="width=device-width, initial-scale=1">. Sirve los recursos con las rutas indicadas; en Astro se guardan en public/ y ese prefijo se omite de las URLs. No hace falta JavaScript.

Fuentes de la imagen

Descarga el WebP móvil, el JPEG móvil, el WebP amplio y el JPEG amplio.

<figure style="margin: 0; max-width: 960px;">
  <picture>
    <source media="(max-width: 600px)" type="image/webp"
      srcset="/ejemplos/picture/fronalpstock-movil.webp" width="480" height="600">
    <source media="(max-width: 600px)" type="image/jpeg"
      srcset="/ejemplos/picture/fronalpstock-movil.jpg" width="480" height="600">
    <source type="image/webp"
      srcset="/ejemplos/picture/fronalpstock-amplio.webp" width="960" height="540">
    <img src="/ejemplos/picture/fronalpstock-amplio.jpg" width="960" height="540"
      alt="Laderas verdes y crestas rocosas de Fronalpstock bajo un cielo con nubes"
      style="display: block; width: 100%; height: auto;">
  </picture>
  <figcaption>Foto de <a href="https://commons.wikimedia.org/wiki/File:Fronalpstock_big.jpg">Hannes Röst</a>,
    <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>.
    Versiones recortadas, reducidas y convertidas.</figcaption>
</figure>

Hasta 600 píxeles CSS de ventana se elige el recorte vertical, WebP o JPEG según el soporte. Por encima se ofrece la composición amplia. Los recortes conservan un significado común para que el único alt de <img> describa ambas versiones. Conserva el crédito y la licencia al redistribuir las fotografías.

Fuentes del vídeo

Usa los dos archivos del ejemplo mínimo y añade nombre, precarga de metadatos y descargas de ambos formatos:

<section aria-labelledby="source-recorrido-titulo">
  <h2 id="source-recorrido-titulo">Recorrido de un cuadrado</h2>
  <video controls preload="metadata" width="640" height="360"
    aria-labelledby="source-recorrido-titulo" aria-describedby="source-recorrido-texto"
    style="max-width: 100%; height: auto;">
    <source src="/ejemplos/param/recorrido.webm" type="video/webm">
    <source src="/ejemplos/param/recorrido.mp4" type="video/mp4">
    <p>Tu navegador no admite el elemento video.</p>
  </video>
  <p id="source-recorrido-texto">Vídeo sin sonido: un cuadrado azul ocupa,
    de izquierda a derecha, las posiciones numeradas 1, 2 y 3.</p>
  <p>Descargas: <a href="/ejemplos/param/recorrido.webm" download>WebM</a>
    y <a href="/ejemplos/param/recorrido.mp4" download>MP4</a>.</p>
</section>

El vídeo es una animación original del sitio. Su descripción exterior transmite toda su información; no necesita una transcripción de voz porque no contiene sonido. Si utilizas una grabación hablada, prepara subtítulos y una alternativa textual adecuados. El mensaje interior está destinado a navegadores que no reconocen <video>; no aparece necesariamente cuando falla un archivo en un navegador que sí lo reconoce.

Comprobar currentSrc y provocar las alternativas

Abre la página a 375 y 1280 píxeles CSS. Comprueba la foto vertical y amplia y reproduce el vídeo. Prueba Tab, Mayús+Tab y Espacio en los controles, y verifica los enlaces de descarga.
Después de cargar, consulta en la consola:

document.querySelector("picture img").currentSrc
document.querySelector("video").currentSrc

Las propiedades de imagen y medios devuelven la URL absoluta seleccionada. Una URL no prueba que el recurso se haya descargado o decodificado correctamente: comprueba también la imagen, la reproducción y la pestaña Red.

En una copia, cambia los tipos WebP a image/x-formato-de-prueba y el WebM a video/x-formato-de-prueba. Estos valores desconocidos son errores deliberados para descartar fuentes: deben quedar JPEG móvil a 375, JPEG amplio a 1280 y MP4 en el vídeo. Prueba también cada vídeo por separado. Restaura los tipos.
Retira todos los <source> de la imagen: queda el JPEG amplio a ambas anchuras. Una imagen seleccionada que devuelve 404 no garantiza que se pruebe el JPEG; provoca ese fallo por separado. Haz fallar ambas URLs de vídeo y comprueba que siguen visibles descripción y descargas, aunque estas tampoco puedan recuperar archivos ausentes.
Desactiva JavaScript y recarga: la selección, los controles nativos y las alternativas exteriores continúan funcionando. El código de consola sirve para diagnosticar, no para activar los ejemplos.

Errores frecuentes y preguntas

¿Dónde se coloca source? Dentro de <picture>, <audio> o <video>, en el orden indicado. srcset en una fuente de audio y src en una fuente de imagen son usos incorrectos.

¿Se usan todas las fuentes? Son alternativas para un mismo contenido. Pueden solicitarse otros recursos al cambiar condiciones o fallar una fuente; no esperes una galería ni una lista de reproducción.

¿Por qué no se usa la fuente que esperaba? Comprueba primero el padre, el atributo correcto y el orden; después media, type, el archivo real y la respuesta HTTP. Cambiar una fuente de vídeo ya cargada no cambia por sí solo la reproducción: para una selección dinámica debes usar la API de medios y reiniciar la carga cuando corresponda.

Para decidir entre picture y sus recortes o img con distintas resoluciones, consulta sus guías. La guía de audio desarrolla controles y transcripciones. <video> se ocupa del reproductor y <track> de las pistas: no traslades sus atributos a <source>.

Compatibilidad y fuentes

Consultado el 4 de octubre de 2026: MDN describe source como ampliamente disponible. El soporte de la etiqueta no garantiza el de cada formato o códec. Los datos de compatibilidad de MDN sitúan las dimensiones en Chrome 90, Firefox 108 y Safari 15; también registran que Firefox 53–119 solo aplicaba media a fuentes de <picture>, no de audio o vídeo.

El Living Standard enlazado en las secciones anteriores fija las reglas vigentes. Mantén alternativas accesibles fuera del reproductor y prueba tus recursos en los navegadores de tu público; <source> no aporta controles, texto alternativo ni permisos de reproducción automática.