Descriptores de ancho y densidad
Entendiendo los descriptores de ancho (w) y densidad (x) en srcset. Usa ejemplos y Markdown.
srcsetes un atributo HTML que permite a los desarrolladores proporcionar múltiples fuentes de imágenes con diferentes resoluciones o densidades de píxeles, y permitir que el navegador seleccione la imagen adecuada en función de las características de visualización del dispositivo. El atributosrcsetutiliza una combinación de laURLy los descriptoreswoxpara especificar las imágenes.
Descriptores de Ancho (w)
El descriptor
wse utiliza para especificar el ancho de una imagen en píxeles. Se utiliza cuando se desea proporcionar al navegador las dimensiones de una imagen para que pueda elegir la imagen adecuada para el espacio disponible en la pantalla.
La sintaxis para utilizar el descriptor
wensrcsetes la siguiente:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 2000w"
alt="Ejemplo de Imagen">En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus anchos correspondientes en píxeles. El navegador seleccionará la imagen con el ancho más cercano al espacio disponible en la pantalla.
Descriptores de Densidad (x)
El descriptor
xse utiliza para especificar la densidad de píxeles de una imagen, que es la relación de píxeles físicos a píxeles CSS. Se utiliza cuando se desea proporcionar al navegador diferentes versiones de la misma imagen con diferentes densidades de píxeles.
La sintaxis para utilizar el descriptor
xensrcsetes la siguiente:
<img src="small.jpg"
srcset="small.jpg 1x,
medium.jpg 2x,
large.jpg 3x"
alt="Ejemplo de Imagen">En el ejemplo anterior, hemos proporcionado al navegador tres imágenes y sus diferentes densidades de píxeles correspondientes. El navegador seleccionará la imagen con la densidad de píxeles más cercana a la pantalla del dispositivo.
Es importante notar que los descriptores
wyxse pueden usar juntos en el mismo atributosrcsetpara proporcionar al navegador más opciones para elegir.