El elemento <source> permite a los autores aportar varios recursos (diferentes versiones) de un archivo multimedia en un documento HTML, ya sea una imagen, un vídeo o un audio. Por lo tanto, este elemento debe usarse dentro de las etiquetas de los elementos <picture>, <vídeo> y <audio>.
Cada uno de los recursos aportados de un elemento multimedia será una versión diferente. En el caso de las imágenes adaptables (elemento <picture>), se tratará de versiones adaptadas a cada tipo de pantalla o dispositivo. En los casos de vídeo y audio (<video> y <audio>) se tratará de versiones codificadas con otro códec.
Con el uso de <source> queda en manos del navegador web la elección del recurso más apropiado que debe cargar. Esta decisión se tomará basándose en las dimensiones de la imagen para el caso de <picture> y en los formatos que soporta en los casos de <video> y <audio> (mejor coincidencia).
Cabe mencionar que si se usa el atributo src para cargar un archivo multimedia directamente desde los elementos <video> y <audio>, los recursos alternativos provistos a través del elemento <source> no se cargarán.
El elemento <source> no tiene etiqueta de cierre, por lo que se trata de un elemento vacío. Para definir su configuración se usan varios atributos.
Atributos de los recursos
Los atributos del elemento <source> tienen un papel de gran importancia, ya que al tratarse de un elemento vacío, es la única manera que existe para indicar la ruta de los archivos multimedia y algunas de sus opciones.
El atributo ‘src’
El atributo más importante es sin duda src, y su valor especifica la ruta en la que se encuentra un archivo multimedia. Por lo tanto, debe introducirse una URL válida. Este atributo sólo puede ser usado cuando el elemento <source> se encuentra dentro de los elementos <video> y <audio>.
El atributo ‘srcset’
Por su parte, el atributo srcset permite indicar una lista de cadenas de imágenes separadas por coma. A diferencia del atributo anterior, este sólo puede ser usado cuando el elemento <source> sea hijo del elemento <picture>. Con este atributo se pretende proveer varias imágenes para distintos tamaños de dispositivo.
Cada cadena está compuesta por los siguientes valores:
- Una URL válida de imagen (valor mínimo).
- Opcionalmente, uno de los siguientes valores:
- El ancho de imagen en píxeles y la letra
w. - La densidad del píxel con la letra
x.
- El ancho de imagen en píxeles y la letra
Los valores se separan con espacios. Referente al punto 2, sólo se admite uno de los dos valores. En caso de incluir los dos se considerará que hay descriptores duplicados y no será válido; por tanto, no deben mezclarse. En caso de que no se especifique ningún descriptor, el valor por defecto será 1x.
Cabría esperar que como unidad de los píxeles se usara px. Sin embargo, se usa la letra w como descriptor ya que se trata del tamaño real de la imagen.
Ejemplo de código HTML del atributo scrset:
<source
srcset="image-small.png 320w,
image-medium.png 800w,
image-large.png 1200w"
El atributo ‘sizes’
El atributo sizes es utilizado como complemento del atributo scrset, por lo que su uso tiene como requisito que este último esté declarado. Por tanto, el atributo sizes se usa para indicar una lista de cadenas de tamaños separados por coma. Cada cadena debe tener lo siguiente:
- Una propiedad CSS entre paréntesis; es opcional.
- El ancho de la imagen en unidades de CSS.
Ejemplo de código HTML del atributo sizes:
<source
srcset="image-small.png 320w,
image-medium.png 800w,
image-large.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
Haciéndose uso de la información aportada en los atributos scrset y sizes, los navegadores web mostrarán la imagen que mejor se adapte a la configuración del dispositivo del usuario.
El atributo ‘type’
El atributo type es utilizado para definir un tipo de medio válido para los elementos multimedia. El valor de este atributo dependerá del formato del archivo.
Los tipos de medio más comunes para vídeo son:
- MP4:
video/mp4 - WebM:
video/webm - Ogg:
video/ogg
Estos son los tipos de medio más habituales para audio:
- MP3:
audio/mpeg - OGG:
audio/ogg - WAV:
audio/wav
El atributo ‘media’
Gracias al atributo media es posible definir una condición de media query. Esto hará que el recurso enlazado se muestre bajo una condición de resolución de la pantalla del dispositivo. Este atributo sólo debe usarse cuando <source> sea hijo del elemento <picture>. Algunos ejemplos de su valor:
(min-width: 1024px)(max-width: 320px)(orientation: landscape)(orientation: portrait)
Los atributos ‘width’ y ‘height’
Los atributos width y height son de gran utilidad para especificar el ancho y alto de una imagen. Su valor será un número entero que representa el total de píxeles. Estos dos atributos sólo pueden ser usados cuando el elemento <source> se encuentre entre las etiquetas <picture> y </picture>.
