Curso HTML 12.2 Atributo srcset y sizes en imágenes

Curso HTML 12.2 Atributo srcset y sizes en imágenes

En este apartado profundizaremos en los atributos srcset y sizes del elemento <img>, esenciales para implementar imágenes responsivas y optimizar la carga según las capacidades del dispositivo y las condiciones de visualización.

1. ¿Por qué usar srcset y sizes?

• Permiten ofrecer diferentes versiones de una misma imagen adaptadas a distintos tamaños de pantalla y resoluciones.
• Mejoran el rendimiento: el navegador elige la imagen más adecuada, ahorrando ancho de banda.
• Optimización para pantallas de alta densidad (retina o 2x, 3x).

2. Atributo srcset

Define una lista de recursos de imagen junto con un descriptor que indica al navegador sus características. Hay dos tipos de descriptores:

3. Atributo sizes

Se utiliza junto a srcset con descriptores w. Informa al navegador el tamaño que ocupará la imagen en diferentes condiciones de viewport. Su sintaxis es:

sizes='(condición) tamaño, (condición2) tamaño2, tamaño-por-defecto'

• Las condiciones se evalúan de arriba a abajo.
• El primer media query que sea true determina el tamaño.
• Si ninguno coincide, se usa el tamaño por defecto (último valor).

4. Ejemplo básico con descriptores de densidad (x)

5. Ejemplo avanzado con descriptores de ancho (w) y sizes

6. Flujo de decisión del navegador

Cuando encuentra un <img> con srcset y sizes, el navegador:

1. Evalúa las condiciones de sizes para determinar el ancho de “layout” que tendrá la imagen.
2. Multiplica ese ancho por la densidad de pantalla (devicePixelRatio).
3. Escoge del srcset la imagen con descriptor w más cercano al resultado.

7. Caso práctico: cabecera responsiva

8. Buenas prácticas

• Optimizar cada imagen (compresión, formatos modernos como WebP).
• Proveer siempre un alt descriptivo.
• Verificar en diferentes dispositivos y simuladores de red.
• Combinar con <picture> para art direction si la composición varía.

Con estos conocimientos, podrás ofrecer imágenes adaptadas a cada contexto, mejorando la experiencia de usuario y el rendimiento de tus páginas web.