¿Qué es el lazy loading de imágenes?

Cuando una página web contiene muchas imágenes, cargarlas todas en el momento de abrir la página aumenta innecesariamente el tiempo de carga inicial. El lazy loading — o carga diferida — es una técnica que permite cargar cada imagen solo cuando el usuario está a punto de verla. Fácil de implementar, mejora significativamente el rendimiento del sitio y la experiencia del usuario.

Definición de lazy loading

El lazy loading (literalmente «carga perezosa») consiste en retrasar la carga de los recursos que no son inmediatamente visibles en pantalla. Aplicado a las imágenes, significa que solo las imágenes situadas en la zona visible en el momento de cargar la página (el viewport) se descargan de inmediato. Las demás imágenes se cargan progresivamente a medida que el usuario hace scroll.

Sin lazy loading, el navegador descarga todas las imágenes de la página en cuanto se abre — incluso las que están al fondo y que quizás el usuario nunca verá.

¿Cómo funciona el lazy loading?

Existen dos enfoques principales para implementar el lazy loading de imágenes:

1. El atributo HTML nativo loading="lazy"

Desde 2019, los navegadores modernos soportan el lazy loading de forma nativa mediante un simple atributo HTML:

<img src="photo.jpg" alt="Descripción" loading="lazy">

El navegador decide automáticamente cuándo cargar la imagen según la posición de scroll del usuario. Es el método recomendado hoy en día: no se necesita ninguna biblioteca JavaScript.

2. La Intersection Observer API (JavaScript)

Antes de la estandarización del atributo nativo, los desarrolladores usaban la Intersection Observer API para detectar cuándo una imagen entra en el viewport y activar su carga en ese momento. Este enfoque sigue siendo útil para comportamientos más avanzados o animaciones de entrada de imágenes.

¿Cuáles son las ventajas del lazy loading?

Rendimiento y tiempo de carga

Al reducir el número de imágenes cargadas al inicio, el lazy loading disminuye el peso inicial de la página y acelera su renderizado. Las métricas de rendimiento como el Largest Contentful Paint (LCP) y el Time to Interactive (TTI) mejoran como resultado.

Ahorro de ancho de banda

Las imágenes situadas al fondo de la página solo se descargan si el usuario llega hasta ellas. En una página larga con muchos elementos visuales, esto puede representar un ahorro significativo — especialmente para visitantes en móvil o con conexión lenta.

SEO y Core Web Vitals

Google tiene en cuenta los Core Web Vitals en su clasificación. Un mejor LCP, directamente influenciado por la carga de imágenes, puede tener un impacto positivo en el posicionamiento en los resultados de búsqueda.

Lazy loading: lo que no se debe hacer

El lazy loading no es adecuado para todas las imágenes. Hay dos errores frecuentes que evitar:

• Nunca aplicar loading="lazy" a las imágenes hero o por encima del pliegue — estas imágenes son visibles al cargar, retrasar su visualización degradaría el LCP y la experiencia de usuario.
• No omitir los atributos width y height — sin dimensiones definidas, el navegador no puede reservar espacio para la imagen antes de cargarla, provocando saltos de maquetación (layout shifts) perjudiciales para el Cumulative Layout Shift (CLS).

Bueno saber: para las imágenes visibles inmediatamente al cargar (banner, hero image, logo), usa el atributo loading="eager" o simplemente omite el atributo — ese es el comportamiento predeterminado del navegador.

Compatibilidad con navegadores

Lazy loading y alojamiento de imágenes

Cuando utilizas un servicio de alojamiento de imágenes para almacenar y distribuir tus elementos visuales, recuerda siempre incluir el atributo loading="lazy" en las imágenes que no son inmediatamente visibles. Combinar un alojamiento de alto rendimiento (CDN, compresión automática) con el lazy loading maximiza la velocidad de visualización de tus páginas.

Bueno saber: un servicio de alojamiento de imágenes de calidad proporciona URLs directas estables para cada imagen, lo que facilita la integración del lazy loading: simplemente añade loading="lazy" a tu etiqueta <img> sin modificar la URL fuente.