Cómo usar el atributo srcset de la etiqueta img HTML para definir imágenes receptivas
lossrcset
atributo delimg
La etiqueta le permite configurar imágenes receptivas que el navegador puede usar según la densidad de píxeles o el ancho de la ventana, de acuerdo con sus preferencias. De esta manera, solo puede descargar los recursos que necesita para renderizar la página, sin descargar una imagen más grande si está en un dispositivo móvil, por ejemplo.
Aquí hay un ejemplo, donde damos 4 imágenes adicionales para 4 tamaños de pantalla diferentes:
<img src="dog.png"
alt="A picture of a dog"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
En elsrcset
usamos elw
medir para indicar el ancho de la ventana.
Dado que lo hacemos, también necesitamos utilizar elsizes
atributo:
<img src="dog.png"
alt="A picture of a dog"
sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
srcset="dog-500.png 500w,
dog-800.png 800w,
dog-1000.png 1000w,
dog-1400.png 1400w">
En este ejemplo el(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px
cuerda en elsizes
El atributo describe el tamaño de la imagen en relación con la ventana gráfica, con varias condiciones separadas por una coma.
La condición de los mediosmax-width: 500px
establece el tamaño de la imagen en correlación con el ancho de la ventana gráfica. En resumen, si el tamaño de la ventana es <500px, representa la imagen al 100% del tamaño de la ventana.
Si el tamaño de la ventana es mayor pero <900px
, renderiza la imagen al 50% del tamaño de la ventana.
Y si es aún más grande, renderiza la imagen a 800 px.
losvw
unit of measure can be new to you, and in short we can say that 1 vw
es el 1% del ancho de la ventana, por lo que100vw
es el 100% del ancho de la ventana.
Un sitio web útil para generarsrcset
e imágenes progresivamente más pequeñashttps://responsivebreakpoints.com/.
Descarga mi gratisManual HTML
Más tutoriales de HTML:
- Introducción a HTML
- La etiqueta HTML `iframe`
- Formularios HTML
- La etiqueta HTML `video`
- La etiqueta HTML `audio`
- Etiquetas HTML para texto
- Tablas HTML
- La etiqueta HTML `img`
- La etiqueta HTML `a`
- La etiqueta HTML `picture`
- La etiqueta HTML `figure`
- Etiquetas de contenedor HTML
- Accesibilidad en la Web
- Cómo crear un comentario en HTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
- Imágenes receptivas usando `srcset`
- Cambiar el favicon en modo oscuro