Utilizando imagen responsive y video

Cambiando la imágen según la resolución

Utlizamos 4 imágenes que se mostrarán y cambiarán según la resolución de pantalla del usuario, puedes probarlo haciendo más pequeña la estrecha del navegador. Para cambiar la imágen según el tamaño de resolución hemos puesto el siguiente código:

<picture>
<source media="(min-width:1100px)" srcset="images/0.jpg">
<source media="(min-width:800px)" srcset="images/1.jpg" width="100%">
<source media="(min-width:500px)" srcset="images/2.jpg" width="100%">
<source media="(min-width:400px)" srcset="images/3.jpg" width="100%">
<img src="images/0.jpg" width="100%">
</picture>

Formato svg

El logotipo de la cabecera tiene formato svg, además, también cambia cuando redimensionas la pantalla.

En este caso, el dódigo utilizado es similar, solo que con las dos imagenes con formato svg

<picture>
<source media="(min-width:1100px)" srcset="images/logo.svg">
<source media="(min-width:400px)" srcset="images/logo-movil.svg" width="200px">
<img src="images/logo.svg" width="190px" style="margin:0 auto;">
</picture>