Carga diferida e imágenes adaptables: Guía práctica para principiantes

El problema: Imágenes de gran tamaño

Las imágenes suelen ser los archivos más grandes en una página web. Cuando un usuario visita tu sitio, su navegador intenta descargar todas las imágenes, incluidas las que están fuera de la vista inicial. Esto desperdicia ancho de banda y ralentiza significativamente la carga inicial, generando una mala experiencia de usuario y puntuaciones bajas en Core Web Vitals.

La solución tiene dos aspectos:

1. Carga diferida (Lazy-Loading): Retrasar la carga de imágenes fuera de la pantalla hasta que el usuario se acerque a ellas al hacer scroll.
2. Imágenes adaptables (Responsive Images): Ofrecer versiones de diferentes tamaños para distintos tamaños de pantalla, evitando que usuarios móviles descarguen imágenes enormes diseñadas para escritorio.

Afortunadamente, HTML moderno ofrece funciones potentes y fáciles de usar para lograr ambos objetivos.

Parte 1: Carga diferida sencilla

Antes, la carga diferida requería librerías JavaScript complejas. Hoy, es simplemente un atributo.

El atributo loading="lazy" indica al navegador que no cargue la imagen hasta que esté cerca de entrar en la ventana visible.

Cómo implementarlo:

Simplemente añade loading="lazy" a tus etiquetas <img>.

<img src="mi-imagen.jpg" alt="Texto alternativo descriptivo" loading="lazy" width="800" height="600">

Notas importantes:

• Siempre incluye atributos width y height. Esto permite al navegador reservar el espacio correcto antes de cargar la imagen, evitando cambios de diseño (CLS - Cumulative Layout Shift).
• No uses carga diferida en todas las imágenes. Las imágenes “por encima del doblez” (visibles inicialmente) deben cargarse normalmente. Aplicarles loading="lazy" podría ralentizar la percepción de carga. Usa este atributo solo para imágenes más abajo en la página.

El soporte de loading="lazy" está ampliamente disponible en todos los navegadores principales, siendo un método seguro y efectivo para mejorar el rendimiento.

Parte 2: Tamaños adecuados con srcset

¿Por qué debería un usuario en móvil descargar una imagen de 2000px diseñada para escritorio? El atributo srcset permite ofrecer múltiples versiones de una imagen. El navegador elegirá inteligentemente la más adecuada según el tamaño y resolución de la pantalla.

Cómo implementarlo:

1. Crea múltiples tamaños de imagen: Genera varias versiones. Un conjunto común podría incluir:

   • imagen-pequeña.jpg (ej: 480px de ancho)
   • imagen-mediana.jpg (ej: 800px de ancho)
   • imagen-grande.jpg (ej: 1200px de ancho) Puedes usar nuestra herramienta de redimensionamiento para crear estos tamaños.

2. Usa el atributo srcset: Lista cada imagen con su descriptor de ancho (w).

<img 
  srcset="imagen-pequeña.jpg 480w, 
          imagen-mediana.jpg 800w, 
          imagen-grande.jpg 1200w"
  sizes="(max-width: 600px) 480px, 
         800px"
  src="imagen-mediana.jpg" 
  alt="Texto alternativo descriptivo"
  loading="lazy"
  width="800" height="600">

Desglosemos esto:

• srcset: Ofrece las imágenes disponibles y sus anchos reales.
• sizes: Indica al navegador qué tan ancha se mostrará la imagen en distintos tamaños de ventana. Aquí significa: “Si el ancho de pantalla es ≤600px, la imagen ocupará 480px. De lo contrario, ocupará 800px”. El navegador usa esto para elegir la mejor imagen de srcset.
• src: Imagen de respaldo para navegadores antiguos sin soporte para srcset.

Parte 3: Dirección artística con <picture>

A veces no solo necesitas una versión más pequeña, sino una imagen completamente diferente. Por ejemplo, un paisaje horizontal en escritorio podría ser un retrato vertical en móvil. Esto se llama “dirección artística”.

El elemento <picture> es ideal para esto. Permite múltiples elementos <source> y el navegador elige el primero que coincida.

Cómo implementarlo:

<picture>
  <!-- Muestra esta imagen si el ancho de pantalla es ≤600px -->
  <source media="(max-width: 600px)" srcset="imagen-vertical.jpg">
  
  <!-- De lo contrario, muestra esta -->
  <source media="(min-width: 601px)" srcset="imagen-horizontal.jpg">
  
  <!-- Imagen de respaldo para navegadores antiguos -->
  <img src="imagen-horizontal.jpg" alt="Texto alternativo descriptivo" loading="lazy" width="1200" height="600">
</picture>

También puedes usar <picture> para formatos modernos como AVIF o WebP, con degradado a JPEG:

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

Puedes crear estos formatos con nuestro convertidor de imágenes.

Conclusión

Combinando estas tres funciones HTML modernas, construirás sitios web que cargan sorprendentemente rápido en cualquier dispositivo.

• Usa loading="lazy" en todas las imágenes por debajo del doblez inicial.
• Usa srcset para ofrecer diferentes tamaños de la misma imagen.
• Usa <picture> cuando necesites imágenes distintas para diferentes pantallas o formatos.

Implementar estas técnicas es uno de los cambios con mayor impacto para mejorar el rendimiento web y los Core Web Vitals.