Imágenes receptivas usando `srcset`

Cómo usar el atributo srcset de la etiqueta img HTML para definir imágenes receptivas

lossrcsetatributo delimgLa 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 elsrcsetusamos elwmedir para indicar el ancho de la ventana.

Dado que lo hacemos, también necesitamos utilizar elsizesatributo:

<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, 800pxcuerda en elsizesEl 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: 500pxestablece 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 vwes el 1% del ancho de la ventana, por lo que100vwes el 100% del ancho de la ventana.

Un sitio web útil para generarsrcsete imágenes progresivamente más pequeñashttps://responsivebreakpoints.com/.

Descarga mi gratisManual HTML


Más tutoriales de HTML:


Tech Wiki en línea!