La etiqueta <source> se utiliza para indicar la dirección/ubicación de las imágenes en la etiqueta <picture>, el audio en la etiqueta <audio> o el video en la etiqueta <video>. No se usa como una etiqueta independiente.

HTML
<audio>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no admite el elemento de audio.
</audio>

Para imágenes:

HTML
<picture>
  <source media="(min-width: 650px)" srcset="large-image.jpg">
  <source media="(min-width: 465px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Imagen">
</picture>

Atributos de la Etiqueta <source>

  • type:  Indica el tipo MIME del archivo multimedia. Si se tienen varios archivos multimedia del mismo tipo pero con diferentes formatos, el atributo type ayuda a seleccionar el primero que sea compatible con el navegador.
HTML
<video controls width="250" height="200" muted>
  <source src="birthday.webm" type="video/webm">
  <source src="birthday.mp4" type="video/mp4">
</video>

Nota

Si el navegador admite el formato WebM, se cargará el archivo del primer tag <source>. De lo contrario, se cargará el del segundo. Se recomienda enumerar varios formatos de video o audio, comenzando por el más eficiente en relación a “tamaño-calidad”.

  • src: Indica el archivo multimedia específico. Este atributo es requerido para las etiquetas <audio> y <video>, y indica la ruta al archivo multimedia. Si la etiqueta <source> está dentro de <picture>, el atributo src se ignora.
HTML
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>
  • srcset: Este atributo se utiliza para proporcionar diferentes versiones de una imagen, generalmente para diferentes resoluciones de pantalla.
HTML
<source srcset="640x480.png 1x, 1280x960.png 2x">

Este atributo indica que para pantallas con densidad de píxeles normal se utilizará la imagen 640x480.png, mientras que para pantallas con doble densidad de píxeles (como las pantallas retina) se utilizará la imagen 1280x960.png.

Otra forma de escribir el atributo es:

HTML
<source srcset="1024x768.png 1024w, 640x480.png 640w">

En este caso, se le indica al navegador que la imagen 1024x768.png tiene un ancho de 1024 píxeles, y la imagen 640x480.png tiene un ancho de 640 píxeles. Esta información ayuda al navegador a determinar qué imagen elegir al analizar el atributo sizes.

  • sizes: Este atributo indica al navegador qué ancho se necesita para la imagen del elemento <source> actual al dibujar la página. En otras palabras, el navegador determina el ancho del espacio reservado para la imagen. De esta manera, se le informa al navegador con anticipación cuánto espacio “reservar” en la página para la imagen. El valor del atributo puede ser un valor absoluto (por ejemplo, 150px o 30em), o relativo al viewport (por ejemplo, 20vw). Los valores en porcentaje no están permitidos.

Los atributos srcset y sizes trabajan de manera eficiente en conjunto. Veamos un ejemplo:

HTML
<source
  srcset="images/600x100.png 600w, images/1000x200.png 1000w"
  sizes="(max-width: 1200px) 50vw, 1000px">

Cuando el navegador analiza la etiqueta <source>, realiza las siguientes acciones:

  • Comprueba el ancho actual de la ventana del navegador.
  • Busca la opción adecuada en el atributo sizes, teniendo en cuenta la densidad de píxeles.
  • Selecciona la imagen adecuada del atributo srcset para el espacio reservado: mayor o igual que este.

Así funciona nuestro ejemplo con diferentes anchos:

  • 1000 píxeles: Se cumple la condición (max-width: 1200px) (1200 píxeles o menos), y el navegador establece el ancho del espacio reservado como 50vw (500 píxeles en este caso). Del atributo srcset, el navegador selecciona la imagen adecuada: en una pantalla de 1x se mostrará 600x100.png, en una pantalla de 2x se mostrará 1000x200.png, las más cercanas al ancho del espacio reservado de 500 píxeles.
  • 1201 píxeles: No se cumple la condición (max-width: 1200px), y el ancho del espacio reservado se selecciona de la lista sizes: 1000px. El navegador tiene la imagen más grande en srcset: 1000x200.png 1000w es igual al ancho del espacio reservado, por lo que tanto en las pantallas de 1x como de 2x se mostrará la imagen 1000x200.png.
  • media: Define las condiciones (por ejemplo, ancho mínimo de pantalla) bajo las cuales se debe usar esta fuente. Se utiliza solo dentro de la etiqueta <picture>. Contiene una expresión de medios para seleccionar la imagen adecuada.
HTML
<picture>
  <source srcset="big.jpg" media="(min-width: 600px)">
  <img src="small.jpg" alt="Imagen abstracta">
</picture>

Si el ancho de la pantalla es de 600 píxeles o más, se cargará la imagen del tag <source>. De lo contrario, se cargará la imagen del tag <img>.

  • width y height: Indican las dimensiones del recurso multimedia.

Resumen

La etiqueta <source> es una herramienta esencial para optimizar la entrega de contenido multimedia en diferentes formatos y resoluciones. Al utilizar los atributos correctos, se puede garantizar que los usuarios vean las imágenes, escuchen el audio y vean los videos en la mejor calidad posible, independientemente del dispositivo que estén utilizando.

5/5 - (1 voto)