Imágenes y Multimedia HTML

Introducción

HTML no solo facilita la organización de texto, sino que también permite incorporar contenido multimedia, como imágenes, audio y video, enriqueciendo notablemente la experiencia del usuario. Las imágenes se insertan mediante la etiqueta , que utiliza atributos como src para especificar la ubicación del archivo y alt para proporcionar una descripción alternativa, garantizando accesibilidad si la imagen no se carga.

Para incluir audio y video, se emplean las etiquetas <audio> y <video>, respectivamente, que permiten reproducir contenido directamente en el navegador. Se aconseja usar formatos compatibles como MP3 para audio y MP4 para video, añadir controles de reproducción mediante el atributo controls y optimizar los archivos para minimizar el tiempo de carga, mejorando así la accesibilidad y el rendimiento del sitio web.

Imágenes y Multimedia HTML
Página Web que muestra una Imagen y un vídeo con HTML.

Imágenes HTML <img>

Las imágenes pueden embellecer y optimizar el diseño visual de una página web, mejorando su estética, funcionalidad y experiencia del usuario al captar la atención y transmitir información de manera más efectiva.

En HTML, se usa la etiqueta <img> para insertar imágenes en una página web.

La etiqueta <img> en HTML permite integrar imágenes en una página web, potenciando su atractivo visual y enriqueciendo la experiencia del usuario. Este elemento crea un espacio reservado para mostrar la imagen, que no se inserta directamente, sino que se vincula mediante una referencia, conectando el archivo gráfico al sitio.

Como etiqueta vacía, <img> no requiere cierre y se define únicamente por sus atributos. Los atributos esenciales son src y alt, a saber:

  • src: Define la ruta o dirección del archivo de la imagen.
  • alt: Proporciona un texto alternativo que describe la imagen para accesibilidad. Es importante por varias razones:
    • Accesibilidad: Las personas con discapacidades visuales que utilizan lectores de pantalla podrán escuchar el texto alternativo, lo que les permitirá comprender el contenido o propósito de la imagen.
    • SEO (Optimización para Motores de Búsqueda): Los buscadores emplean el texto alternativo para interpretar el contenido de la imagen, lo que puede mejorar la visibilidad de la página en los resultados de búsqueda de imágenes.
    • Cuando la imagen no carga: Si la imagen no se muestra debido a errores (como una ruta incorrecta o problemas de conexión), el texto alternativo aparecerá en su lugar, proporcionando una descripción del contenido.

Otros parámetros opciones podrían ser:

  • width: Ancho en píxeles o porcentaje.
  • height: Alto en píxeles o porcentaje.
  • title: Texto que aparece al pasar el mouse sobre la imagen.
    Este atributo permite mostrar información contextual adicional sobre una imagen, como una breve explicación que aparece al pasar el cursor, mejorando la experiencia del usuario al aclarar el contenido o propósito de la imagen sin ocupar espacio en la página. Aunque no reemplaza al atributo alt, complementa la accesibilidad al proporcionar detalles extra, y en imágenes que actúan como enlaces o botones, facilita la navegación intuitiva al indicar qué acción se desencadenará al hacer clic.
  • id: Identificador único del elemento.
  • class: Clases CSS.
  • loading: Controla cómo y cuándo se carga una imagen en la página, mejorando el rendimiento web.
    • lazy: carga diferida (mejora rendimiento).
    • eager: carga inmediata, por defecto.
  • aria-label: Proporciona una etiqueta de texto accesible para describir el propósito o contenido de una imagen en tecnologías de asistencia, como lectores de pantalla, cuando no hay otro texto descriptivo disponible.
<img
  src="https://cdn.pixabay.com/photo/2016/12/28/09/36/web-1935737_1280.png"
  alt="Diseño web"
  width="80%"
  class="centrar-imagen"
  title="Algunas tecnologías para la realización de páginas web"
  loading="lazy"
  aria-label="Algunas tecnologías para la realización de páginas web, p. ej. CSS, JS, HTML, angular, vue.js, ruby, python..."
/>
.example {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.centrar-imagen {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

Imagen con <img>

Diseño web

Videos HTML <video>

El elemento <video> en HTML se utiliza para insertar y reproducir contenido de video en una página web. Fue introducido en HTML5 con el objetivo de proporcionar soporte nativo para videos en navegadores, eliminando la necesidad de complementos (plug-ins) externos como Flash o Java applets.

Los atributos más comunes y útiles que se pueden usar con la etiqueta <video> son:

  • src: Ruta del archivo de video (puede ser relativa o absoluta).
  • controls: Muestra los controles de reproducción.
  • autoplay: Reproducción automática (debe usar el atributo muted).
  • loop: Repite el video.
  • muted: Inicia sin sonido.
  • poster: Imagen de vista previa mientras se espera que el video comience a reproducirse. Si no se especifica, el navegador mostrará el primer fotograma del video tan pronto como esté disponible.
  • preload: Controla qué tanto precargar.
    • none: El video no debe ser almacenado en caché, generalmente para minimizar el tráfico innecesario.
    • metadata: Recomienda al navegador capturar información básica sobre la fuente (por ejemplo, dimensiones, duración, primer fotograma).
    • auto: Es el valor predeterminado y sugiere al navegador descargar el archivo tan pronto como sea posible.
  • aria-label: se utiliza para proporcionar una descripción accesible del video a usuarios que dependen de tecnologías adaptables, como lectores de pantalla. Este atributo define una etiqueta de texto que describe el propósito o contenido del video, especialmente cuando no hay controles visibles o texto asociado que lo explique claramente.
  • width: Este atributo le indica al navegador que el vídeo debe ocupar el porcentaje indicado del ancho del contenedor que la contiene. Si está dentro de un <div, tomará todo el ancho de ese <div. Si está dentro de <body, tomará todo el ancho de la página.

En el siguiente ejemplo el navegador comenzará a reproducir el video automáticamente autoplay tan pronto como sea posible, pero algunos navegadores también requieren el atributo muted para que funcione, tal como en este caso.

<video
  src="./multimedia/202368-918049003_small.mp4"
  width="80%"
  autoplay
  muted
  loop
></video>
.example {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

Reproducción Automática de un Vídeo

En el siguiente ejemplo se muestra la configuración más usada:

<video
  src="./multimedia/202368-918049003_small.mp4"
  poster="https://i.postimg.cc/3xWF9xR2/poster.png"
  width="80%"
  controls
  width="80%"
  preload="auto"
  loop
  aria-label="Video que muestra la panorámica de un parque de diversiones y al fondo hay una rueda de Chicago."
></video>
.example {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

Reproducción un Vídeo

Otra Forma de usar <video>:

<video controls width="80%">
  <source
    src="./multimedia/202368-918049003_small.mp4"
    type="video/mp4"
  />
  Your browser does not support the video tag.
</video>

Reproducción Moderna de un Vídeo

Este ejemplo presenta un reproductor de video HTML5 estándar que reproduce un archivo WEBM con los controles nativos del navegador. El video se redimensiona al 80% del ancho disponible. Sin embargo, no incluye un manejo robusto de errores: si el archivo no está disponible, el reproductor mostrará un error o quedará en blanco. Además, si el navegador no soporta el formato WEBM, se mostrará el mensaje "Your browser does not support the video tag.", aunque esto es poco común en navegadores modernos.

Audio HTML <audio>

El elemento HTML <audio> es una característica introducida en HTML5 que permite incrustar contenido de audio directamente en una página web. Funciona de manera muy similar al elemento <video>.

Esta etiqueta posee los siguientes principales atributos:

  • src (source): Este atributo especifica la dirección (URL) del archivo de audio que se desea reproducir. En este caso, se trata de una pista musical alojada en Pixabay, un sitio web que ofrece música gratuita.
  • controls: (Obligatorio) Muestra los botones de reproducir/pausar y control de volumen.
  • autoplay: Reproduce automáticamente (a menudo bloqueado por navegadores).
  • loop: Repite el audio cuando termina.
  • muted: Inicia silenciado.
  • preload: Funciona igual que en <video>
  • aria-label: Ofrece un texto descriptivo para que los lectores de pantalla lo interpreten, lo que ayuda cuando los controles del reproductor de audio no son claros o cuando el elemento <audio> está oculto pero operable mediante botones personalizados.
<audio
  src="./multimedia/commercial-upbeat-energetic-rock-354637.mp3"
  preload="auto"
  loop
  controls
  autoplay
  aria-label="Reproductor de audio para una pista musical de rock"
></audio>
.example {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

Reproducción de un Archivo mp3

Etiqueta HTML <figure>

El elemento HTML semántico <figure> se emplea para agrupar contenido independiente relacionado con el flujo principal del documento, como imágenes, ilustraciones, diagramas, fragmentos de código o tablas, acompañado de una descripción o pie de figura proporcionado por el elemento <figcaption>.

La función principal del elemento <figure> es proporcionar un significado semántico al contenido que engloba. Esto indica a los navegadores, a las tecnologías de asistencia y los a lectores de pantalla, que el contenido agrupado forma una unidad con un propósito específico, usualmente como una ilustración o un complemento del texto principal.

Aquí se explican algunos ejemplos de su utilidad:

  • Accesibilidad: Optimiza la accesibilidad para personas con discapacidades visuales, permitiendo que los lectores de pantalla interpreten con claridad el contenido y la descripción de la figura.
  • Organización: Facilita la estructuración del contenido web, resultando en un código más claro, ordenado y comprensible.
  • Estilo: Posibilita la aplicación de estilos CSS de forma precisa a un conjunto de contenido y su leyenda.
  • Contenido contextual: Destaca el contenido dentro de <figure> como un elemento relevante, pero independiente, de la narrativa principal.

Sintaxis básica:

<figure class="text-center">
  <img
    src="https://cdn.pixabay.com/photo/2016/12/28/09/36/web-1935737_1280.png"
    alt="Diseño web"
    width="80%" />
  <figcaption>
Mi primera imagen con una leyenda.   </figcaption>
</figure>
.centrar-imagen {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

Uso <img> con <figure>

Diseño web
Mi primera imagen con una leyenda.

Cuándo usar <figure>:

  • Para ilustraciones que tienen una leyenda explicativa.
  • Para gráficos o tablas que requieren contexto adicional.
  • Para códigos fuente con explicación:
    <figure>
      <pre class="language-js"><code>console.log("Hola mundo");</code></pre>
      <figcaption>
        Ejemplo de salida en la consola con JavaScript.   
    </figcaption>
    </figure>

    Código fuente con explicación

    console.log("Hola mundo");
    Ejemplo de salida en la consola con JavaScript.

Ejemplo: Uso de <figure> con varias imágenes

<figure>
  <img
    src="https://i.ibb.co/cSbZB8mf/figure-0101.png"
    width="32%"
    alt="Paso 1: Fijar el brazo am la base." />
  <img
    src="https://i.ibb.co/DfvjRzqy/figure-0102.png"
    width="32%"
    alt="Paso 2: Instalar la bombilla." />
  <img
    src="https://i.ibb.co/Gv0PwQHr/figure-0103.png"
    width="32%"
    alt="Paso 3: Colocar la pantalla" />
  <figcaption>
Pasos la instalación de una lámpara de escritorio básica.
  </figcaption>
</figure>

<figure> con varias imágenes

Paso 1: Fijar el brazo am la base. Paso 2: Instalar la bombilla. Paso 3: Colocar la pantalla
Pasos la instalación de una lámpara de escritorio básica.

Características importantes:

  • Todas las imágenes están agrupadas semánticamente.
  • El pie de figura <figcaption> describe el conjunto, no cada imagen individual.
  • Cada imagen tiene su propio atributo alt, mejorando la accesibilidad.
  • Puede usarse con CSS para mostrar las imágenes en fila, como una galería.

Etiqueta HTML <picture>

La etiqueta <picture> permite manejar imágenes de forma más versátil.

La etiqueta HTML <picture> permite mostrar la versión más adecuada de una imagen entre múltiples opciones, adaptándola al dispositivo, tamaño de pantalla, resolución o formato (como PNG o JPG), optimizando así la compatibilidad, el rendimiento y la adaptación visual, en lugar de una sola imagen redimensionada.

El elemento <picture> incluye dos tipos de etiquetas: una o más etiquetas <source> y una etiqueta <img>.

El navegador identifica el primer elemento <source> cuya consulta de medios (media query) coincida con el ancho actual del viewport y, a continuación, muestra la imagen especificada en el atributo srcset. La etiqueta <img /> es obligatoria como último hijo del elemento <picture>, sirviendo como alternativa predeterminada si ninguna etiqueta es compatible.

Consejo: El elemento <picture> opera de manera similar a los elementos <video> y <audio>. Se configuran distintas fuentes, y se utiliza la primera que cumpla con las condiciones establecidas.

<div class="centrar-imagen">
  <h3>
    <picture> Diferentes imágenes dependientes el ancho del viewport
  </h3>
  <picture>
    <source
      style="width: 100%; height: auto"
      media="(width >= 992px)"
      srcset="https://i.postimg.cc/tC9VfH0g/pexels-gasparzaldo-6779117-lg.jpg"
    />
    <source
      style="width: 100%; height: auto"
      media="(width >= 576px)"
      srcset="https://i.postimg.cc/G3Fyqm5N/pexels-optical-chemist-340351297-31284696-md.jpg"
    />
    <img
      style="width: 100%; height: auto"
      src="https://i.postimg.cc/fyfSL8dZ/pexels-rachel-claire-5864618-sm.jpg"
      style="width: auto"     />
    <!-- Leyenda -->
    <figcaption>
      Figura 2: Ejemplo que muestra una imagen que depende del ancho del viewport.     </figcaption>
  </picture>
</div>
.centrar-imagen {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<picture> Diferentes imágenes dependientes el ancho del viewport

Figura 2: Ejemplo que muestra una imagen que depende del ancho del viewport.

Funcionamiento:

El navegador evalúa las condiciones de arriba hacia abajo:

  • Pantalla ≥ 992px: Muestra la imagen grande
  • Pantalla entre 576px-991px: Muestra la imagen mediana
  • Pantalla < 576px: Muestra la imagen pequeña

Explicación del código:

<picture>: Esta etiqueta HTML permite incluir múltiples versiones de una misma imagen en diferentes tamaños, formatos o resoluciones, habilitando al navegador seleccionar y mostrar la más adecuada según el ancho del viewport, las características del dispositivo, la resolución de pantalla o las capacidades del navegador. Esto facilita la creación de imágenes adaptables, optimizando la experiencia visual, el rendimiento de carga y la compatibilidad, al tiempo que reduce el consumo de datos y mejora la accesibilidad en diversos contextos de uso.

<source>: Se usa para definir las distintas versiones de la imagen.

  • srcset: ruta de la imagen.
  • media: condición de media query para determinar cuándo usar esa imagen.
  • type: opcional, define el formato de la imagen (por ejemplo, image/webp).

<img>: Es el elemento de respaldo (fallback), que se usará si ninguna de las condiciones anteriores se cumple o si el navegador no soporta <picture>.

proceso de selección:

El navegador sigue un proceso de evaluación secuencial para decidir qué imagen mostrar:

  • Evaluación en orden: El navegador lee los elementos <source> de arriba hacia abajo y evalúa cada condición media: 
                        
                      <!-- PASO 1: ¿La pantalla tiene un ancho mayor o igual a 992px? -->
                      <source media="(width >= 992px)" srcset="imagen-grande.jpg" />

                      <!-- PASO 2: Si no, ¿tiene ancho de 576px pero menor que 992px? -->
                      <source media="(width >= 576px)" srcset="imagen-mediana.jpg" />

                      <!-- PASO 3: Si ninguna coincide, usa esta por defecto -->
                      <img src="imagen-pequeña.jpg" />
  • Primera coincidencia gana: En cuanto encuentra una condición media que se cumple, se detiene y usa esa imagen. No sigue evaluando el resto.
  • Ejemplos prácticos:
    • Pantalla de 1200px:
      • Como el ancho de la pantalla es mayor o igual a 992px: (min-width: 992px) → VERDADERO → Usar imagen grande.
      • No evaluar las siguientes condiciones.
    • Pantalla de 768px:
      • (min-width: 992px) → FALSO.
      • El ancho de la pantalla es mayor o igual a 576px: (min-width: 576px) → VERDADERO → Usa imagen mediana.
      • No evaluar las siguientes condiciones.
    • Pantalla de 320px:
      • (min-width: 992px) → FALSO.
      • (min-width: 576px) → FALSO.
      • Como la imagen tiene ancho menor a 576px entonces usar la imagen del <img> (imagen pequeña).
  • Importante: El orden importa. Siempre se ordenan de mayor a menor tamaño de pantalla, para que las condiciones más específicas se evalúen primero.

Beneficios:

  • Rendimiento: Carga imágenes optimizadas para cada dispositivo.
  • Experiencia de usuario: Imágenes apropiadas para cada tamaño de pantalla.
  • Ancho de banda: Dispositivos móviles descargan imágenes más pequeñas.

Consejo: El elemento <picture> funciona de forma "similar" a <video> y <audio>. Se configuran diferentes fuentes, y la primera fuente que se ajuste a las preferencias es la que se utiliza.

Como manejar diferentes formatos de imagen:

Algunos navegadores o dispositivos no son compatibles con todos los formatos de imagen. Con el uso de la etiqueta <picture>, se pueden incluir imágenes en diversos formatos, permitiendo que el navegador seleccione el primer formato que reconozca e ignore las demás imágenes.

Ejemplo:

<picture>
  <source
    srcset="https://i.ibb.co/Z6fqJW75/img-reddit.webp"
    type="image/webp"
  />
  <source
    srcset="https://i.ibb.co/B5ks8yDZ/img-retriver.jpg"
    type="image/jpeg"
  />
  <img
    src="https://i.ibb.co/nNDDmN0R/img-avatar.png"
    alt="Avatar"
    style="width: 80%"
  />
</picture>

Diferentes Formatos de Imagen

Avatar

El navegador evalúa las opciones en orden: primero intenta cargar la imagen WebP (formato más moderno y eficiente), si no es compatible carga el JPEG, y como último recurso muestra el avatar PNG. El atributo style="width: 80%" hace que la imagen ocupe el 80% del ancho de su contenedor.

Propósito: Optimizar la carga de imágenes ofreciendo el mejor formato disponible según el navegador del usuario, mejorando el rendimiento web.

COMENTARIOS

Si tiene alguna inquietud, duda o ha encontrado algún error, por favor infórmelo a través del formulario disponible para este propósito.

La política de privacidad, y los términos y condiciones están disponibles en el formulario de contacto.