Lazy Loading de imágenes: Guía completa 2026
El lazy loading es una de las optimizaciones de rendimiento más sencillas y efectivas que puedes aplicar a un sitio web. Al aplazar la carga de imágenes que no son visibles en el viewport, reduces el peso inicial de la página, aceleras el primer renderizado y ahorras ancho de banda a los usuarios que nunca llegan al final de la página.
Lazy loading nativo: un solo atributo
Desde 2019, todos los navegadores principales admiten el atributo loading en elementos <img> e <iframe>. No se necesita ninguna librería JavaScript:
<img src="photo.jpg" alt="Descripción" loading="lazy">El navegador solo descarga la imagen cuando el usuario se desplaza a una cierta distancia de ella. El umbral varía según el navegador y la velocidad de conexión, típicamente entre 1.250 y 2.500 px por delante del viewport.
Los tres valores de loading=
| Valor | Comportamiento | Cuándo usarlo |
|---|---|---|
lazy |
Aplazado hasta estar cerca del viewport | Todas las imágenes por debajo del pliegue |
eager |
Cargado inmediatamente (comportamiento por defecto) | Imágenes por encima del pliegue, especialmente la imagen LCP |
auto |
El navegador decide (principalmente igual que eager) | No recomendado, prefiere valores explícitos |
Regla crítica: nunca apliques lazy loading a imágenes por encima del pliegue
El error de lazy loading más común es aplicarlo a todas las imágenes de la página, incluida la imagen hero. Esto retrasa el Largest Contentful Paint (LCP), la métrica de Google que mide cuándo el contenido principal es visible. Una imagen LCP con lazy loading puede reducir drásticamente tu puntuación LCP.
loading="lazy". Usa loading="eager" o simplemente omite el atributo. Lo ideal es precargarla con una etiqueta <link rel="preload">.
Añade siempre width y height
El lazy loading funciona mejor cuando el navegador conoce las dimensiones de las imágenes antes de cargarlas. Sin width y height, el navegador no puede reservar espacio, provocando saltos de maquetación (CLS) cuando las imágenes se cargan:
<!-- Correcto: dimensiones especificadas -->
<img src="photo.jpg" alt="..." width="800" height="600" loading="lazy">
<!-- Incorrecto: sin dimensiones, causará salto de maquetación -->
<img src="photo.jpg" alt="..." loading="lazy">Lazy loading con srcset
El lazy loading es totalmente compatible con las imágenes responsive:
<img
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
src="photo-800.webp"
alt="Descripción"
width="800" height="600"
loading="lazy"
>Lazy loading con el elemento <picture>
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Descripción" width="800" height="600" loading="lazy">
</picture>El atributo loading va en el elemento <img>, no en los elementos <picture> o <source>.
Compatibilidad con navegadores
El lazy loading nativo es compatible con todos los navegadores modernos a partir de 2026: Chrome 76+, Firefox 75+, Safari 15.4+, Edge 79+. Para navegadores más antiguos, omitir el atributo simplemente carga todas las imágenes inmediatamente, una degradación elegante y segura. No se necesita polyfill.
Cuándo usar un lazy loader JavaScript
El atributo nativo cubre la gran mayoría de los casos de uso. Una librería JavaScript (como lazysizes) puede ser útil si:
- Necesitas dar soporte a navegadores muy antiguos (Safari 14 e inferiores)
- Estás aplicando lazy loading a imágenes de fondo CSS
- Necesitas umbrales de carga personalizados o callbacks
loading="lazy" a todas las imágenes por debajo del pliegue. Nunca lo apliques a tu imagen LCP. Especifica siempre width y height para evitar saltos de maquetación. Este cambio de una línea suele reducir el peso inicial de descarga de la página entre un 30 y un 50 % en páginas con muchas imágenes.
Prueba las herramientas imgpact
Herramientas de imagen gratuitas en el navegador, sin subida, sin registro.