El Atributo SIZES

El atributo sizes en HTML se utiliza junto con srcset en la etiqueta <img> para optimizar la carga de imágenes responsive. Este atributo permite indicar al navegador cómo se mostrará la imagen en diferentes tamaños de pantalla, asegurando que se cargue la versión más adecuada y eficiente. A continuación, te explicamos cómo implementarlo paso a paso.

1. Introducción al atributo sizes

• Propósito:
  Definir el tamaño de visualización de una imagen en diferentes condiciones (ej.: viewport, resolución), para que el navegador seleccione la fuente óptima del srcset.

• Compatibilidad:
  Navegadores modernos (Chrome, Firefox, Safari, Edge).

• Uso típico:
  Mejorar el rendimiento en sitios responsive al evitar cargar imágenes más grandes de las necesarias.

2. Sintaxis básica

El atributo sizes acepta una lista de condiciones (media queries) y tamaños asociados:

<img
  src="imagen-default.jpg"
  srcset="imagen-pequeña.jpg 300w, imagen-grande.jpg 1000w"
  sizes="(condición) tamaño, ..., tamaño-por-defecto"
  alt="Descripción"
>

• srcset: Lista de imágenes y sus anchos reales en píxeles (ej.: 300w = 300 píxeles de ancho).

• sizes: Define cómo se ajustará la imagen al layout en diferentes viewports.

3. Ejemplos prácticos

Ejemplo 1: Imagen responsive básica

<img
  src="default.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Paisaje"
>

Explicación:

• Si el viewport es ≤ 600px, la imagen ocupará el 100% del ancho del viewport (100vw).

• Si el viewport es > 600px, ocupará el 50% del viewport (50vw).

• El navegador elegirá entre small.jpg, medium.jpg o large.jpg según el tamaño calculado.

Ejemplo 2: Múltiples condiciones

<img
  src="default.jpg"
  srcset="mobile.jpg 400w, tablet.jpg 800w, desktop.jpg 1600w"
  sizes="(max-width: 480px) 90vw, 
         (max-width: 1024px) 70vw, 
         40vw"
  alt="Diagrama"
>

Funcionamiento:

• Pantallas ≤ 480px: 90% del viewport.

• Pantallas ≤ 1024px: 70% del viewport.

• Pantallas > 1024px: 40% del viewport.

4. Cómo funciona el navegador

1. Calcula el tamaño de visualización:
   Usa las condiciones en sizes para determinar cuánto espacio ocupará la imagen en el layout actual.

2. Selecciona la imagen adecuada:
   Elige la imagen de srcset que mejor se ajuste al tamaño calculado y a la densidad de píxeles del dispositivo.

5. Errores comunes

• Usar px en lugar de vw:
  El atributo sizes espera valores relativos al viewport (ej.: vw) o absolutos (ej.: px).

  • ✔️ Correcto: sizes="(max-width: 600px) 100vw, 600px".

  • ❌ Incorrecto: sizes="(max-width: 600px) 300px" (no es responsive).

• Olvidar el tamaño por defecto:
  Siempre incluye un valor final sin condición (ej.: 50vw).

6. Mejores prácticas

1. Usa unidades relativas (vw):
   Permite que el tamaño se adapte dinámicamente al viewport.

2. Ordena las condiciones de menor a mayor:
   El navegador aplica la primera condición que coincida.

3. Combina con formatos modernos:
   Usa WebP o AVIF en srcset para optimizar el peso.

4. Prueba con herramientas:
   Usa Lighthouse o DevTools para verificar la carga eficiente.

7. Ejemplo avanzado: Art direction + Densidad de pantalla

<img
  src="fallback.jpg"
  srcset="
    imagen-1x.jpg 400w 1x,
    imagen-2x.jpg 800w 2x,
    imagen-3x.jpg 1200w 3x
  "
  sizes="(max-width: 768px) 80vw, (min-width: 769px) 30vw"
  alt="Ejemplo avanzado"
>

• 1x, 2x, 3x: Densidad de píxeles (pantallas Retina).

• El navegador seleccionará la imagen según el tamaño y la densidad.

8. Conclusión

El atributo sizes es clave para:

• Optimizar el rendimiento en dispositivos móviles y desktop.

• Reducir el peso de las imágenes sin sacrificar calidad.

• Mejorar la experiencia de usuario con carga inteligente.

Ejemplo final:

<img
  src="banner-default.jpg"
  srcset="
    banner-small.jpg 320w,
    banner-medium.jpg 640w,
    banner-large.jpg 1280w
  "
  sizes="(max-width: 480px) 95vw, 
         (max-width: 1024px) 75vw, 
         60vw"
  alt="Banner promocional"
>

Recuerda:

• Siempre incluye un src como fallback para navegadores antiguos.

• Usa alt descriptivo para accesibilidad.

• ¡Prueba en diferentes dispositivos y resoluciones!

Con este tutorial, podrás implementar imágenes verdaderamente responsive y optimizadas en tus proyectos web. ????