Lazy Load Images en 2026: Páginas rápidas sin afectar el LCP

Última actualización: June 28, 2026

La carga perezosa (lazy loading) ayuda a que las páginas con muchas imágenes se sientan más rápidas porque el navegador puede omitir las solicitudes de imágenes por debajo del pliegue durante la primera renderización. Usada sin cuidado, también puede retrasar la imagen que los usuarios necesitan inmediatamente: la hero, la foto principal del producto o la portada del artículo que se convierte en el elemento Largest Contentful Paint.

Esta guía muestra dónde usar loading="lazy" nativo, dónde mantener las imágenes listas (eager), y cómo publicar imágenes con carga perezosa sin romper Core Web Vitals, SEO o la entrega de CDN.

Respuesta rápida: ¿cómo debo cargar imágenes con pereza?

Usa la carga perezosa solo para imágenes que comienzan fuera del primer viewport. Mantén la imagen LCP probable lista (eager), reserva ancho y alto para cada imagen, y sirve archivos WebP o AVIF responsivos desde una URL CDN cacheable.

Para HTML simple, la implementación más sencilla es loading="lazy" en elementos <img> por debajo del pliegue. No lo añadas a una imagen hero, una foto principal de producto, la primera imagen visible del artículo, o cualquier imagen que deba aparecer antes de que el usuario haga scroll.

En caso de duda, prueba la página en Lighthouse o Chrome DevTools. Si se informa que una imagen perezosa es el elemento LCP, elimina la carga perezosa de esa imagen y considera fetchpriority="high".

¿Qué cambia realmente la carga perezosa?

La carga perezosa cambia el momento de la solicitud. El navegador puede esperar para descargar una imagen hasta que el usuario esté lo suficientemente cerca para verla. Eso ahorra ancho de banda en páginas largas, reduce la presión inicial de las solicitudes y da a CSS, fuentes, scripts y la imagen visible mejores posibilidades de terminar primero.

No hace que las imágenes sobredimensionadas sean pequeñas. Un JPEG de 2400 px sigue siendo un desperdicio después de que finalmente carga. Combina la carga perezosa con el redimensionamiento, la compresión y el marcado responsivo desde el principio. The Image Compression Deep Dive cubre la reducción de bytes, mientras que Mobile Image Optimization Guide cubre srcset y tamaños de visualización móvil.

La característica nativa del navegador está documentada por MDN como la propiedad loading en imágenes e iframes en HTMLImageElement.loading. Para sitios modernos, prefiere esta característica del navegador antes de añadir una librería de carga perezosa con JavaScript.

¿Qué imágenes no deben cargarse con pereza?

No cargues con pereza las imágenes que definen la primera impresión de la página. El error común es aplicar loading="lazy" a todas las imágenes en una plantilla CMS porque parece una solución universal de rendimiento.

Mantén estas imágenes listas (eager):

1. La imagen hero principal.
2. La imagen del producto encima del botón de compra.
3. La primera imagen en un artículo cuando aparece cerca de la parte superior en móvil.
4. Un logo o captura de pantalla de interfaz que debe ser visible antes de interactuar.
5. Cualquier imagen que Chrome reporte como el elemento LCP.

La guía de Core Web Vitals de Google trata LCP como el tiempo de renderizado del elemento de contenido visible más grande en el viewport; consulta Largest Contentful Paint. Cuando ese elemento es una imagen, retrasar su solicitud es una de las formas más rápidas de empeorar la métrica.

Usa esta regla para plantillas: la primera ranura de imagen debe por defecto ser eager (lista), y los bloques de imágenes repetibles posteriores deben por defecto ser lazy (perezosos). Luego anula según el tipo de página cuando las capturas de pantalla móviles muestren un primer viewport diferente.

¿Cómo se implementa la carga perezosa en HTML?

Usa primero marcado nativo:

<img
  src="/images/gallery-chair.webp"
  alt="Silla de nogal fotografiada desde el frente para una galería de productos"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Los atributos width y height son tan importantes como loading. Permiten al navegador reservar espacio de diseño antes de que llegue el archivo. Sin espacio reservado, una imagen retrasada puede empujar el texto hacia abajo en la página y crear Cumulative Layout Shift.

Para imágenes responsivas, mantén la carga perezosa en el <img> de respaldo:

<picture>
  <source type="image/avif" srcset="/images/gallery-chair-800.avif 800w, /images/gallery-chair-1200.avif 1200w">
  <source type="image/webp" srcset="/images/gallery-chair-800.webp 800w, /images/gallery-chair-1200.webp 1200w">
  <img
    src="/images/gallery-chair-1200.webp"
    alt="Silla lounge de nogal con cojín verde sobre un fondo blanco de estudio para una galería de productos"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

Para la imagen LCP probable, usa el patrón opuesto:

<img
  src="/images/product-hero.webp"
  alt="Silla lounge de nogal con cojín verde sobre un fondo blanco de estudio"
  width="1600"
  height="1000"
  fetchpriority="high"
>

El artículo de Google sobre browser-level image lazy loading recomienda la carga perezosa nativa y advierte que las imágenes en el primer viewport visible deben cargar normalmente. Ese consejo sigue siendo la base más limpia para publicaciones de 2026.

¿Cómo afecta la carga perezosa al SEO?

La carga perezosa es segura para SEO cuando el contenido importante sigue siendo descubrible en la página renderizada. Google puede procesar JavaScript moderno, pero el SEO de imágenes se debilita cuando la URL final de la imagen está oculta detrás de una interacción, un script solo de scroll, cookies o un marcador de posición roto.

Usa marcado normal <img> o <picture> para las imágenes de contenido. Mantén el texto alternativo alt descriptivo, URLs CDN rastreables y el texto circundante que explica la imagen. The Image SEO Guide 2026 tiene el flujo más amplio de rastreo y alt-text.

La guía de JavaScript SEO de Google Search Central para la carga perezosa dice que el contenido debe cargarse cuando sea visible en el viewport y no debe depender de acciones del usuario como hacer clic o escribir; consulta Fix lazy-loaded content. Es una salvaguarda útil para galerías de imágenes, pestañas y páginas de scroll infinito.

¿Cuánto rendimiento puede ahorrar la carga perezosa?

El ahorro depende de cuántas imágenes estén por debajo del primer viewport y cuán grandes sean esos archivos. En un artículo largo, un navegador puede evitar descargar la mayoría de las imágenes del cuerpo durante la carga inicial. En una página de producto corta con una foto visible, la carga perezosa puede no ahorrar casi nada.

Codifiqué los cuatro gráficos de este artículo como archivos WebP locales en el tamaño de publicación. Los activos finales son de 25 KB a 36 KB cada uno, por lo que la carga perezosa no está ocultando un problema de bytes enorme aquí. La ganancia más grande proviene del momento de la solicitud: la portada está disponible inmediatamente, y los diagramas posteriores pueden esperar hasta que el lector haga scroll.

Usa este orden antes de culpar a la carga perezosa:

1. Redimensiona la imagen fuente al espacio de visualización real más grande.
2. Convierte fotos y gráficos mixtos a WebP o AVIF.
3. Añade srcset y sizes para diseños móviles.
4. Reserva dimensiones o relación de aspecto de la imagen.
5. Mantén la imagen LCP lista (eager).
6. Carga con pereza solo las imágenes por debajo del pliegue.
7. Publica a través de un CDN con caché de larga duración.
8. Prueba la página en un viewport móvil estrecho.

Si necesitas una secuencia más amplia, The Complete Image Optimization Checklist es un buen pase final antes de publicar. Para reglas de CDN y encabezados de caché, usa Image CDN Guide.

¿Qué debo probar antes de publicar?

Prueba la página renderizada, no solo el código. Los umbrales del navegador para la carga perezosa nativa son detalles de implementación, y una página que funciona en escritorio aún puede retrasar la imagen incorrecta en un viewport móvil de 390 px.

Ejecuta esta verificación de publicación:

• La imagen portada o hero carga con pereza (eager).
• La imagen LCP probable no está marcada como loading="lazy".
• Cada imagen tiene width y height o un contenedor de relación de aspecto estable.
• Las imágenes por debajo del pliegue usan loading="lazy".
• Las imágenes responsivas incluyen valores sizes realistas.
• Las URLs de imágenes CDN devuelven HTTP 200.
• Los nombres de archivo describen la imagen visible.
• El texto alternativo es específico y no está relleno de palabras clave.
• Lighthouse o PageSpeed Insights no marca la imagen perezosa como LCP.
• Una captura de pantalla móvil no muestra grandes huecos en blanco ni saltos de diseño.

Para equipos de desarrollo, añade una regla de plantilla: solo los componentes de imágenes del cuerpo repetidos deben cargar con pereza por defecto. Los componentes hero, medios principales de producto y las imágenes editoriales por encima del pliegue deben requerir una decisión explícita.

Lista de verificación de carga perezosa para 2026

La carga perezosa funciona mejor como una pequeña parte del flujo de trabajo de imágenes. Debe venir después de las comprobaciones de formato, dimensiones, prioridad, accesibilidad y CDN.

Antes de enviar, inspecciona el primer viewport y hazse una pregunta práctica: ¿tendría aún sentido la página si cada imagen por debajo del pliegue esperara hasta hacer scroll? Si es así, probablemente la carga perezosa esté ayudando. Si la página comienza con un espacio hero vacío, arregla la prioridad antes de tocar cualquier otra cosa.