Curso HTML 12. Imágenes y multimedia responsiva

Imágenes y Multimedia Responsiva

En el desarrollo web moderno, uno de los retos principales es garantizar que las imágenes y los elementos multimedia se adapten correctamente a los distintos dispositivos y resoluciones de pantalla. A continuación profundizamos en cómo lograr una experiencia óptima usando las características nativas de HTML5, sin depender de CSS externo.

1. El elemento <img> y atributos srcset y sizes

El atributo srcset permite al navegador elegir la mejor versión de la imagen según la densidad de píxeles o el ancho de la pantalla. El atributo sizes le indica al navegador el ancho estimado que ocupará la imagen en distintos breakpoints.

  srcset='
    images/foto-pequena.jpg  480w,    
    images/foto-media.jpg    800w,    
    images/foto-grande.jpg  1200w     
  '
  sizes='
    (max-width: 600px)  100vw,       
    (max-width: 1024px) 50vw,        
    33vw                            
  '
  alt='Descripción de la imagen'
  width='1200' height='800'          
>

En este ejemplo:

• El navegador seleccionará automáticamente la imagen más adecuada.
• El atributo width y height conserva la proporción hasta que se cargue la imagen.
• No se requiere CSS externo.

2. El elemento <picture> para formatos y resoluciones

<picture> permite definir varias fuentes según condiciones de media queries o formatos de imagen (por ejemplo webp y jpg).

• Los <source> se prueban en orden.
• El navegador elige el primero con tipo soportado.
• El <img> final es la reserva para navegadores sin soporte de <picture>.

3. Videos responsivos con <video>

El elemento <video> de HTML5 también puede escalarse usando atributos de ancho y alto. Adicionalmente, se pueden incluir varias fuentes y un poster para mejorar la experiencia.

• El atributo width='100%' expande el video al ancho de su contenedor.
• El poster muestra una imagen hasta que el usuario pulse “play”.

4. Incrustaciones de terceros (<iframe>)

Para embeber contenido como YouTube o SoundCloud de forma responsiva, se recomienda usar <iframe> con ancho completo y altura proporcional:

Para una proporción 16:9 sin CSS externo puede calcularse la altura al 56.25% del ancho. Sin embargo, en ambientes sin CSS, se puede usar el atributo height para un único ratio estático.

5. Tabla comparativa de técnicas

Conclusión

Mediante el uso de srcset, <picture>, <video> y <iframe> con atributos adecuados, es posible crear interfaces multimedia totalmente responsivas sin requerir CSS adicional ni frameworks. Esto optimiza la carga, mejora la accesibilidad y brinda una experiencia fluida en todos los dispositivos.