Cómo implementar lazy loading de imágenes en tu sitio HTML

Para implementar lazy loading de imágenes en HTML basta con añadir loading="lazy" a cualquier etiqueta <img>: el navegador cargará esa imagen solo cuando esté a punto de entrar en pantalla, sin necesidad de JavaScript. Es el cambio de rendimiento con mejor relación esfuerzo/impacto que existe hoy para la mayoría de los sitios web.

En esta guía verás cómo usarlo correctamente, qué errores evitar y cuándo complementarlo con técnicas adicionales.

¿Qué es el lazy loading y por qué importa?

El lazy loading (carga diferida) retrasa la descarga de recursos que el usuario aún no puede ver. En el caso de las imágenes, solo se descargan cuando el usuario hace scroll y la imagen está próxima a aparecer en el viewport.

Los beneficios son inmediatos y medibles:

• Menos peso en la carga inicial — el navegador descarga solo las imágenes visibles al cargar la página, lo que reduce los datos transferidos en decenas o cientos de KB.
• Mejor LCP (Largest Contentful Paint) — al reducir la competencia por el ancho de banda, la imagen hero o el contenido principal se descarga más rápido.
• Ahorro de datos para el usuario — especialmente relevante en móvil con conexión limitada; muchos visitantes nunca hacen scroll hasta el final.
• Menos carga en el servidor de imágenes o CDN — solo se sirven las imágenes que alguien realmente ve.

El método nativo: atributo loading="lazy"

Desde 2019, los navegadores modernos soportan lazy loading nativo mediante el atributo HTML loading. No requiere librerías externas ni JavaScript.

<img
  src="foto-producto.jpg"
  alt="Zapatos deportivos rojos talla 42"
  width="800"
  height="600"
  loading="lazy"
>

Así de simple. El atributo acepta tres valores:

• lazy — carga diferida. Úsalo en todas las imágenes que no estén visibles al cargar la página.
• eager — carga inmediata (comportamiento por defecto sin el atributo). Úsalo para la imagen hero o el logo.
• auto — deja que el navegador decida (generalmente equivale a eager).

Compatibilidad del navegador

El soporte cubre más del 95 % de los usuarios globales (Chrome 76+, Firefox 75+, Safari 15.4+, Edge 79+). Para los navegadores sin soporte, la imagen simplemente carga de inmediato — ningún efecto negativo, solo sin la optimización.

Regla crítica: nunca uses loading="lazy" en la imagen above the fold

El error más común — y el más dañino para el rendimiento — es aplicar loading="lazy" a la imagen principal que aparece visible sin hacer scroll (el hero, el logo grande, el primer producto).

Si esa imagen tiene loading="lazy", el navegador la retrasa deliberadamente, lo que puede dañar el LCP en 500 ms o más. La regla es:

• Primera imagen visible en desktop y mobile → loading="eager" (o sin atributo).
• Todo lo demás → loading="lazy".

Además, siempre incluye los atributos width y height en las imágenes con lazy loading. Sin ellos, el navegador no puede reservar espacio y el layout cambia al cargar cada imagen, causando Cumulative Layout Shift (CLS).

Lazy loading con iframes y videos

El mismo atributo funciona para <iframe>, lo cual es especialmente útil para embeds de YouTube o mapas de Google que pesan mucho:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Demo del producto"
  width="560"
  height="315"
  loading="lazy"
  allowfullscreen
></iframe>

Un iframe de YouTube carga decenas de scripts y recursos. Con loading="lazy", todo eso se pospone hasta que el usuario haga scroll hasta el video.

Técnicas avanzadas: Intersection Observer para control total

Cuando necesitas más control — por ejemplo, cargar imágenes en carruseles dinámicos, en contenido generado por AJAX, o en navegadores muy antiguos — la API nativa de JavaScript Intersection Observer es la solución correcta.

// HTML: usa data-src en lugar de src
// <img data-src="foto.jpg" alt="..." class="lazy-img">

const images = document.querySelectorAll('img.lazy-img');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy-img');
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

images.forEach(img => observer.observe(img));

El parámetro rootMargin: '200px' inicia la carga 200 px antes de que la imagen entre en pantalla, evitando que el usuario vea un espacio en blanco mientras espera.

Para implementar estas técnicas en tu stack sin errores y con impacto real en el rendimiento, el equipo de elenlace.com ofrece auditorías y optimizaciones llave en mano.

Lazy loading en WordPress y gestores de contenido

Si usas WordPress, la buena noticia es que desde la versión 5.5 (agosto 2020), WordPress añade automáticamente loading="lazy" a todas las imágenes excepto la primera del contenido.

• ¿Hay que hacer algo? En la mayoría de los casos, no. Solo verifica que la imagen hero de tus templates no tenga el atributo.
• Plugins como WP Rocket o LiteSpeed Cache ofrecen lazy loading adicional para imágenes en widgets y fondos CSS (background images), que el atributo HTML nativo no cubre.
• Para imágenes de fondo en CSS, necesitas JavaScript o un plugin, ya que loading no aplica a propiedades CSS.

Explora más técnicas de optimización en nuestra sección de artículos de rendimiento web.

Conclusiones clave

• Añadir loading="lazy" a las imágenes fuera del viewport es el cambio de rendimiento más rápido de implementar y con impacto inmediato en el tiempo de carga.
• Nunca apliques lazy loading a la imagen hero — dañará tu LCP y tu Core Web Vitals score.
• Incluye siempre width y height para evitar Layout Shift (CLS).
• El soporte nativo cubre más del 95 % de los usuarios; Intersection Observer cubre el resto y casos avanzados.
• WordPress 5.5+ lo hace automáticamente; complementa con un plugin de caché para cubrir imágenes de fondo.
• Los <iframe> también aceptan loading="lazy" — úsalo en embeds de YouTube y Google Maps.

¿Quieres ir más allá y llevar tu sitio a un rendimiento de primera clase? El equipo de elenlace.com realiza auditorías completas de Core Web Vitals y aplica todas las optimizaciones por ti — contáctanos y empieza hoy.

Preguntas frecuentes

¿El lazy loading nativo funciona en todos los navegadores?

Sí, en más del 95 % de los navegadores actuales. Safari lo soporta desde la versión 15.4 (2022). En navegadores sin soporte, la imagen simplemente se carga de inmediato como siempre — no hay ningún efecto negativo.

¿El lazy loading afecta el SEO o el rastreo de Google?

No. Googlebot rastreará e indexará las imágenes con loading="lazy" normalmente, ya que simula el scroll durante el rastreo. De hecho, mejorar el LCP gracias al lazy loading beneficia el SEO.

¿Puedo usar lazy loading en imágenes de fondo CSS?

El atributo HTML loading="lazy" no aplica a background-image en CSS. Para diferir imágenes de fondo necesitas JavaScript (Intersection Observer) o un plugin como WP Rocket o LiteSpeed Cache, que incluyen esta funcionalidad.

¿Cuántas imágenes debo marcar con loading="lazy"?

Todas excepto la primera imagen visible en pantalla (la hero o imagen destacada). Si tienes un carrusel en la zona above the fold, la primera diapositiva debe ser eager; las siguientes, lazy.

Recursos útiles

Otros proveedores y guías que vale la pena comparar:

• Hostinger
• HubSpot
• IONOS