El Atributo SRCSET

El atributo srcset en HTML es esencial para optimizar la carga de imágenes en sitios web responsive, permitiendo que los navegadores seleccionen automáticamente la versión más adecuada de una imagen según el tamaño de pantalla, resolución u otras características del dispositivo. Aprende a implementarlo correctamente con este tutorial.

1. ¿Qué es srcset?

• Propósito:
  Ofrecer múltiples versiones de una imagen (diferentes tamaños o resoluciones) para que el navegador elija la más eficiente según:

  • El ancho del viewport.

  • La densidad de píxeles de la pantalla (ej.: pantallas Retina).

• Beneficios:

  • Mejora el rendimiento al evitar cargar imágenes innecesariamente grandes.

  • Optimiza la experiencia visual en cualquier dispositivo.

2. Sintaxis básica

El atributo srcset se usa en las etiquetas <img> o <source> (dentro de <picture>).

<img
  src="imagen-default.jpg"  <!-- Fallback para navegadores antiguos -->
  srcset="ruta/imagen.jpg ancho-o-densidad, ..."
  alt="Descripción"
>

Parámetros clave:

• ruta/imagen.jpg: Ubicación de la imagen.

• ancho-o-densidad:

  • w: Ancho real de la imagen en píxeles (ej.: 400w).

  • x: Densidad de píxeles (ej.: 1x, 2x para pantallas HD).

3. Ejemplos prácticos

Ejemplo 1: Densidad de píxeles (x)

Ofrece imágenes para pantallas estándar y Retina:

<img
  src="imagen-1x.jpg"
  srcset="imagen-1x.jpg 1x, imagen-2x.jpg 2x"
  alt="Imagen adaptable"
>

• Pantalla 1x: Carga imagen-1x.jpg.

• Pantalla 2x (Retina): Carga imagen-2x.jpg.

Ejemplo 2: Ancho de imagen (w) + sizes

Define imágenes de diferentes tamaños y cómo se ajustan al layout:

<img
  src="imagen-default.jpg"
  srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Imagen responsive"
>

• srcset: Tres versiones de la imagen (400px, 800px y 1200px de ancho real).

• sizes:

  • 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).

• Funcionamiento:
  El navegador calcula el ancho necesario y elige la imagen más cercana (ej.: si el viewport es 800px y sizes="50vw", el ancho requerido es 400px → carga imagen-400.jpg).

Ejemplo 3: <picture> + srcset para art direction

Cambia la imagen según el tamaño de pantalla (ej.: recortar una imagen en móvil):

<picture>
  <source 
    media="(max-width: 768px)"
    srcset="imagen-mobile.jpg 1x, imagen-mobile-2x.jpg 2x"
  >
  <source 
    media="(min-width: 769px)"
    srcset="imagen-desktop.jpg 1x, imagen-desktop-2x.jpg 2x"
  >
  <img src="imagen-default.jpg" alt="...">
</picture>

4. Mejores prácticas

1. Usa formatos modernos:
   Combina srcset con WebP o AVIF para reducir el peso:

   html

   Copy

   <picture>
     <source srcset="imagen.webp" type="image/webp">
     <img src="imagen.jpg" alt="...">
   </picture>

    

1. Run HTML

2. Optimiza las imágenes:
   Asegúrate de que todas las versiones en srcset estén comprimidas.

3. Define sizes adecuadamente:
   Usa unidades relativas (vw) para diseños fluidos y absolutas (px) para layouts fijos.

4. Siempre incluye src:
   Es el fallback para navegadores que no soportan srcset.

5. Errores comunes

• Mezclar w y x en el mismo srcset:
  Usa solo un tipo de descriptor por atributo.

• No usar sizes con w:
  El navegador asume que la imagen ocupará el 100% del viewport si sizes falta.

• Imágenes mal dimensionadas:
  Asegúrate de que los valores en w coincidan con el ancho real de las imágenes.

6. Herramientas útiles

• Generadores de srcset:
  Responsive Image Breakpoints Generator.

• Compresión de imágenes:
  Squoosh, TinyPNG.

• Validación:
  Usa las DevTools del navegador para inspeccionar qué imagen se cargó.

7. Conclusión

El atributo srcset es clave para:

• Entregar imágenes optimizadas para cada dispositivo.

• Mejorar el rendimiento y la experiencia de usuario.

• Reducir el uso de datos en dispositivos móviles.

Ejemplo final:

<img
  src="banner-default.jpg"
  srcset="
    banner-small.jpg 400w,
    banner-medium.jpg 800w,
    banner-large.jpg 1200w
  "
  sizes="(max-width: 480px) 90vw,
         (max-width: 1024px) 70vw,
         50vw"
  alt="Banner responsive"
  loading="lazy"
>

¡Recuerda!

• Prueba en múltiples dispositivos y navegadores.

• Combina srcset con <picture> para art direction avanzado.

• Prioriza siempre la accesibilidad con el atributo alt.

Con este tutorial, podrás implementar imágenes verdaderamente adaptables y eficientes en tus proyectos.