La imagen anterior, ¿cómo se verá en diferentes pantallas, que tienen diferentes tamaños y resoluciones?. para resolver tal problema, existe la técnica de las imágenes responsivas, donde el atributo srcset realiza los ajustes requeridos; y que se explica en este post.
El atributo srcset en HTML es utilizado para imágenes responsivas. Esto permite a los desarrolladores web ofrecer múltiples fuentes de imágenes con diferentes tamaños y resoluciones. El navegador selecciona inteligentemente la imagen más adecuada según el dispositivo y las capacidades de la pantalla del usuario.
He aquí un desglose:
Objetivo
El srcset permite imágenes responsivas al permitirle especificar diferentes archivos de imagen para diferentes tamaños y resoluciones de pantalla.
Cómo funciona
El atributo srcset enumera las URL de las imágenes junto con descriptores como el ancho (por ejemplo, 480w para 480 píxeles de ancho) o la densidad de píxeles (por ejemplo, 2x para una pantalla de densidad 2x).
Selección del navegador
El navegador utiliza la información del srcset junto con el atributo sizes (si se proporciona) para determinar qué imagen descargar y mostrar.
Beneficios
- Rendimiento mejorado: los navegadores cargan imágenes más pequeñas en pantallas más pequeñas, lo que reduce el uso del ancho de banda y mejora los tiempos de carga de la página.
- Mejor experiencia de usuario: se muestran imágenes más nítidas en pantallas de alta resolución sin cargar innecesariamente archivos grandes en dispositivos más pequeños.
- Ahorro de costos: la reducción en el uso del ancho de banda puede generar menores costos de alojamiento.
Ejemplo
Para captar la idea de la operatividad del atributo srcset partamos del estudio del código de la imagen (que es por cierto la imagen de introducción para ilustrar esta publicación) que se expone seguidamente:
Seguidamente una breve explicación del atributo srcset en el código anterior.
- En el ejemplo con alt="Ejemplo de clase", si el ancho de la ventana gráfica es menor o igual a 600 px, el navegador usará ejemplo-small.webp.
- Pero, si está entre 601px y 1000px, entonces usará ejemplo-medium.webp.
- Por último, para ventanas gráficas más grandes, entonces usará ejemplo-large.webp.