La Etiqueta SOURCE

La etiqueta <source> en HTML se utiliza para proporcionar múltiples recursos de medios (imágenes, audio, video) en diferentes formatos o tamaños, permitiendo al navegador elegir la opción más adecuada según la compatibilidad del formato, el tamaño de la pantalla u otros criterios. Es esencial para optimizar la carga de recursos y garantizar compatibilidad entre navegadores.

¿Para qué sirve <source>?

• Propósito:

  • Especificar alternativas de recursos para elementos como <picture>, <audio> y <video>.

  • Mejorar la compatibilidad (ejemplo: ofrecer formatos como MP4, WebM y Ogg para video).

  • Optimizar recursos en diseño responsivo (ejemplo: cargar imágenes según el ancho de pantalla).

• Etiqueta vacía: No requiere cierre (</source>).

Atributos principales

Atributo	Descripción
src	Ruta al archivo de recurso (obligatorio en <audio> y <video>).
srcset	Lista de imágenes para <picture> (se usa con sizes).
type	Tipo MIME del recurso (ejemplo: image/webp, video/mp4).
media	Consulta de medios (media query) para aplicar el recurso en ciertos viewports.
sizes	Define tamaños de imagen para <picture> (junto con srcset).

Casos de uso y ejemplos

a) En <picture>: Imágenes responsivas

Proporciona diferentes versiones de una imagen según el tamaño de pantalla o formato soportado.

<picture>
  <!-- Usa WebP si el navegador lo soporta -->
  <source srcset="imagen.webp" type="image/webp">
  <!-- Carga JPEG como alternativa -->
  <img src="imagen.jpg" alt="Imagen de ejemplo">
</picture>

Ejemplo con media y srcset:

<picture>
  <!-- Imagen para pantallas grandes (min-width: 800px) -->
  <source 
    media="(min-width: 800px)" 
    srcset="imagen-grande.jpg"
  >
  <!-- Imagen para móviles -->
  <img 
    src="imagen-mobile.jpg" 
    alt="Imagen responsiva"
  >
</picture>

b) En <audio>: Formatos alternativos

Ofrece múltiples formatos de audio para garantizar compatibilidad.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Tu navegador no soporta audio. Descarga el <a href="audio.mp3">archivo</a>.</p>
</audio>

c) En <video>: Formatos alternativos

Proporciona varios formatos de video.

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Tu navegador no soporta video HTML5.</p>
</video>

Buenas prácticas

1. Orden de los <source>:

   • El navegador usa el primer recurso compatible. Ordena los formatos de más moderno a menos (ejemplo: WebM antes que MP4).

2. Incluye el atributo type:

   • Ayuda al navegador a identificar rápidamente si puede reproducir el recurso.

3. Usa srcset y sizes para imágenes:

   • Optimiza el rendimiento cargando imágenes según el ancho de pantalla.

4. Provee contenido de respaldo:

   • Dentro de <audio> o <video>, añade un mensaje o enlace para navegadores antiguos.

Ejemplo avanzado: <picture> con srcset y sizes

<picture>
  <!-- Imagen WebP para navegadores modernos -->
  <source 
    srcset="
      imagen-480w.webp 480w,
      imagen-800w.webp 800w
    " 
    sizes="(max-width: 600px) 480px, 800px"
    type="image/webp"
  >
  <!-- JPEG como alternativa -->
  <source 
    srcset="
      imagen-480w.jpg 480w,
      imagen-800w.jpg 800w
    " 
    sizes="(max-width: 600px) 480px, 800px"
    type="image/jpeg"
  >
  <!-- Imagen predeterminada -->
  <img 
    src="imagen-800w.jpg" 
    alt="Imagen optimizada"
  >
</picture>

Explicación:

• srcset: Lista de imágenes y sus anchos (480w = 480px de ancho).

• sizes: Define cómo se mostrará la imagen en diferentes viewports.

Compatibilidad

• Navegadores modernos: Soporte total para <source> en <picture>, <audio> y <video>.

• Navegadores antiguos:

  • <picture>: No soportado en IE11 (usa Polyfill o <img> como respaldo).

  • <audio>/<video>: Requieren formatos alternativos como MP3 o MP4.

Errores comunes

Olvidar el type:

<source src="video.mp4"> <!-- Falta type="video/mp4" -->

Orden incorrecto de <source>:

<video>
  <source src="video.mp4" type="video/mp4"> <!-- El navegador podría ignorar WebM -->
  <source src="video.webm" type="video/webm">
</video>

Conclusión

La etiqueta <source> es clave para:

• Optimizar recursos: Cargar imágenes/videos según el dispositivo.

• Garantizar compatibilidad: Ofrecer múltiples formatos.

• Mejorar rendimiento: Reducir el peso de los archivos.

Ejemplo rápido:

<!-- Imagen responsiva y moderna -->
<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="Logo">
</picture>

¡Usa <source> para crear experiencias web más eficientes y accesibles!