Descripción
El atributo scrset del elemento source en HTML permite especificar un conjunto de imágenes alternativas para adaptarse a diferentes condiciones de visualización. Se utiliza principalmente en conjunción con el elemento picture, que permite especificar diferentes versiones de una imagen para diferentes dispositivos o resoluciones de pantalla.
Sintaxis
<source srcset="url width-descriptor densit-descriptor">
- url, es la URL dónde reside la imagen.
- width-descriptor, es un valor numérico con el ancho de la pantalla en el cual se utilizará la imagen seguido de la letra ‘w’. Por ejemplo 300w.
- densit-descriptor, es un valor numérico con la densidad de pixels en la que se quiere utilizar la imagen seguida de la letra ‘x’. Por ejemplo 2x.
No se puede utilizar a la vez el descriptor de ancho y el de densidad.
En el caso de que el atributo sizes del elemento source esté presente, la cadena del atributo srcset debe de incluir el width-descriptor.
El navegador web siempre cargará aquella imagen que considere más oportuna para la visualización que está mostrando. En caso de que no sepa cual cargar buscará la del elemento img. Es por ello que se recomienda utilizar un elemento img asociado.
Elemento Padre
Ejemplo
<picture>
<source srcset="imagen-desktop.jpg 1000w, imagen-tablet.jpg 800w, imagen-mobile.jpg 500w"
<img src="imagen.jpg" alt="una imagen">
</picture>
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.