Carga diferida de imágenes: cuándo usarla y cuándo evitarla

¿Qué cambia la carga diferida?

La carga diferida, o lazy loading, cambia el momento en que el navegador solicita una imagen, no sus dimensiones, formato ni compresión. En una receta larga, el visitante necesita ver el principio enseguida, pero quizá nunca llegue a las quince fotos del final. Posponerlas puede evitar descargas iniciales innecesarias.

Son tres tareas distintas: redimensionar elimina píxeles innecesarios, comprimir reduce los datos del archivo y diferir pospone la solicitud. Una imagen grande seguirá siendo pesada cuando cargue. Una pequeña puede aparecer tarde si su solicitud se retrasa demasiado.

Prepara las dimensiones con la herramienta para redimensionar y compara la compresión cuando convenga. Después decide qué imágenes hacen falta al abrir la página. La guía para reducir el peso trata la preparación; aquí nos centramos en cuándo cargar.

Cómo empezar sin programar

No necesitas editar HTML para decidir qué imágenes deben cargar primero. Empieza con una página de producto o un artículo largo. La vista inicial es la parte que ves antes de desplazarte.

1. Busca el ajuste existente. Revisa las opciones de tema, imágenes o rendimiento en la administración. Busca «lazy loading» o «carga diferida». El nombre y la ubicación varían; algunos servicios lo gestionan automáticamente. Si no lo encuentras, pregunta al responsable del sitio antes de instalar otro complemento.
2. Cuida la vista inicial. La imagen principal y las visibles al abrir deben cargar normalmente. Si hay exclusiones, averigua cómo aplicarlas. No actives una regla general hasta saber cómo trata la principal.
3. Prueba con imágenes posteriores. Las ilustraciones más abajo son un buen comienzo. Usa una vista previa o página de prueba si existe y luego revisa la publicada. Comprueba las galerías por separado, porque se pueden recorrer deprisa.
4. Comprueba la lectura. Abre en móvil y ordenador. ¿Aparece pronto la principal? ¿Llegan a tiempo las demás al desplazarte despacio y deprisa? ¿Salta el texto al aparecer una foto? Prueba también un enlace directo a una sección inferior.

Si detectas un problema, deshaz el último ajuste y pide ayuda con esa página. La revisión visual revela retrasos y movimientos evidentes, pero no demuestra una mejora de velocidad. Para eso necesitas mediciones; la sección de pruebas explica cuáles anotar.

Puedes enviar esta petición: «Revisa la carga diferida de esta página. Mantén la carga normal de la imagen principal y las visibles al abrir, pospón las adecuadas más abajo y reserva su espacio para que el texto no salte. Prueba en móvil y ordenador y compara la carga de la principal antes y después». Incluye el enlace y señala las imágenes que aparecen tarde.

¿Qué imágenes conviene posponer?

Abre una página representativa sin desplazarte. Anota qué imágenes ves y cuáles ayudan a entender el contenido. Repite en un móvil estrecho y un ordenador con pantalla amplia: el banner, el título y la galería pueden quedar en lugares diferentes.

Decide por la posición real, no por el nombre o el orden de subida. La primera imagen de la biblioteca no tiene por qué ser la primera de la página. Una foto tras una introducción larga puede quedar visible al abrir otra plantilla.

Si una imagen aparece de entrada en ordenador pero queda más abajo en móvil, la carga normal es un punto de partida más seguro. loading no admite una consulta de medios como picture. Antes de añadir un script según el tamaño de pantalla para ahorrar una sola solicitud, comprueba si su coste es relevante.

Una imagen oculta de la galería no tiene garantizada una descarga posterior. El script puede precargarla al margen de los atributos. Prueba avanzar rápidamente y volver a imágenes anteriores, además de desplazarte por la página.

Por qué la imagen principal no debe esperar

Largest Contentful Paint (LCP) mide cuánto tarda en aparecer el mayor elemento de contenido de la vista inicial. Suele ser la foto principal, pero también puede ser un bloque de texto. Identifícalo en el informe de rendimiento. Si es una imagen, evita diferirla. Una dirección presente en el HTML inicial permite comenzar antes; si un script la añade después, puede introducir otra espera.

Quitar la carga diferida no resuelve todas las causas de lentitud. La respuesta del servidor, el tamaño de la descarga y el proceso de mostrarla pueden seguir dominando. La guía de Google para optimizar LCP distingue esas etapas. La guía de Pixilo sobre Core Web Vitals separa los problemas de carga de los movimientos del diseño.

Usa fetchpriority="high" de forma selectiva para una imagen cuya importancia hayas confirmado. Dar prioridad alta a toda la galería no establece un orden útil. Tampoco elimina el retraso de una imagen con carga diferida.

Comprobar qué hacen ya el CMS y la galería

Antes de instalar un complemento, inspecciona la imagen publicada. El CMS, tema o servicio de optimización puede añadir ya el atributo. Mira el HTML resultante y la solicitud real, no solo una opción llamada «optimización de imágenes».

Gestiona este comportamiento en un único lugar. Si un script cambia direcciones, añade elementos alrededor de las fotos o precarga diapositivas, otro mecanismo dificulta el diagnóstico. Empieza con una página y excluye la principal del retraso.

Un fondo CSS es distinto: el atributo de carga de img no se aplica a una declaración de fondo. Pide al responsable de la plantilla que revise cómo se descubre esa imagen. Pegar HTML en un bloque de contenido no modifica el fondo del tema.

Añadir carga diferida nativa en HTML

Para una ilustración claramente por debajo de la vista inicial, conserva una dirección real en src y añade el atributo. Sustituye las rutas de ejemplo por tus archivos. El texto alternativo describe lo que muestra la imagen; las instrucciones de la receta van en el texto. Una imagen puramente decorativa debe usar alt="".

<img
  src="/images/recipe-step-04.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="Masa doblada sobre el relleno, con los bordes aún abiertos"
>

Una foto identificada como LCP en la vista inicial necesita otra configuración:

<img
  src="/images/finished-loaf.webp"
  width="1200"
  height="800"
  loading="eager"
  fetchpriority="high"
  alt="Pan recién horneado con corteza dorada"
>

eager pide carga normal, como omitir loading habitualmente. Especificarlo ayuda si la plantilla añade lazy loading por defecto. No significa que la descarga termine al instante. La referencia de MDN sobre imágenes explica los atributos.

El navegador decide cuándo la imagen está lo bastante cerca para solicitarla. Puede hacerlo antes de que sea visible: una solicitud fuera de pantalla no prueba un fallo. No bases la aprobación del test en una distancia fija. Consulta la guía de carga diferida nativa de web.dev.

Reservar espacio y mantener las variantes

Indica en width y height las dimensiones del archivo original, aquí 1200 × 800 píxeles. Definen la proporción; CSS puede mostrarlo más pequeño. Copiarlas en una imagen de otra forma reserva un espacio incorrecto. Para escalar sin recortar:

.article-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Añade class="article-image" a la imagen o adapta una regla existente. Para un recorte fijo, reserva el área mostrada. Comprueba el diseño real: otras reglas CSS pueden modificar el resultado.

La carga diferida no sustituye srcset ni sizes. Conserva las variantes útiles para elegir el archivo adecuado. En picture, el ajuste va en img. La guía de imágenes adaptables incluye ejemplos completos.

Cómo probar la página publicada

1. Anota la referencia inicial. Guarda URL, tamaño de ventana, elemento y tiempo LCP, inicio de la solicitud principal y datos de imágenes transferidos antes de desplazarte. Indica si simulas una primera visita o usas caché.
2. Inspecciona las solicitudes. Abre Network antes de recargar y filtra imágenes. Registra los archivos solicitados al principio y cuándo empiezan.
3. Cambia una sola regla. Por ejemplo, quita el retraso de la principal o actívalo para las ilustraciones posteriores.
4. Confirma el resultado publicado. Revisa atributos y direcciones tras actualizar la caché necesaria. Una edición local no cambia aún el sitio público.
5. Repite y recorre. Compara pruebas equivalentes. Desplázate despacio y deprisa, usa galerías y enlaces a secciones. Busca espacios vacíos y saltos.

«Disable cache» evita la caché del navegador mientras las herramientas están abiertas, pero no limpia la del servidor o CDN. La documentación de Network de Chrome explica la inspección. Mantén las mismas condiciones de red y compara varias pruebas, no solo la mejor.

Empieza arriba, con la misma ventana, red y duración de observación antes de desplazarte. Anota primero los resultados iniciales, para que las solicitudes posteriores no alteren la comparación. Una posición de desplazamiento restaurada también puede hacer cargar inmediatamente una imagen más abajo.

Un buen cambio muestra pronto la vista inicial y las siguientes imágenes cuando hacen falta. Menos solicitudes tempranas solo ayudan si leer y navegar sigue siendo fluido. Usa la guía de PageSpeed para comparar resultados.

Ejemplo: una portada y doce ilustraciones

Un artículo largo tiene una portada al principio y doce fotos posteriores. Un ajuste general difiere las trece. En móvil, la portada aparece tarde aunque su archivo sea ligero. Es un ejemplo de procedimiento, no una mejora medida.

Confirma si la portada es el elemento LCP. Elimina su retraso y prueba solo ese cambio. Mantén el aplazamiento selectivo y el espacio reservado de las demás. Si la primera ilustración se ve de entrada en ordenador, déjala cargar normalmente.

Tras publicar, compara el inicio de la solicitud y LCP en condiciones similares. Recorre las doce fotos y usa un enlace de sección. Si la portada llega pronto pero una animación la oculta, investiga el retraso de visualización en lugar de seguir cambiando el atributo.

Mantener las imágenes accesibles a los buscadores

Usa texto alternativo pertinente y una dirección real. Si un script solo muestra un marcador hasta que alguien pulsa o se desplaza, revísalo. La guía de Google para contenido diferido recomienda cargar al entrar en la zona visible sin depender de un evento de interacción.

Si te preocupa, revisa la página renderizada con la inspección de URL de Search Console. Comprueba que las direcciones relevantes estén en el HTML renderizado. Un ajuste de rendimiento no garantiza la indexación de todas las imágenes ni mejores posiciones.

Preguntas frecuentes

¿Deben usar carga diferida todas las imágenes?

No. Decide según posición e importancia. Las necesarias al abrir, especialmente la imagen LCP, no deben esperar.

¿Reduce el tamaño del archivo?

No, cambia cuándo se solicita. Redimensiona o comprime una copia si sobran píxeles o pesa demasiado.

¿Necesito una biblioteca JavaScript?

No para la carga nativa de imágenes HTML normales. Si JavaScript está desactivado, no se difieren y las que tienen una dirección real cargan normalmente. Un script que guarda la única dirección en data-src necesita una alternativa. Reserva una solución propia para una necesidad concreta y pruébala.

¿Por qué cargan inmediatamente algunas imágenes fuera de pantalla?

Pueden estar lo bastante cerca o ser precargadas por otro componente. Revisa el iniciador de la solicitud y las opciones de galería o tema antes de considerarlo un fallo.

¿La decodificación asíncrona sustituye la carga diferida?

No. decoding trata la decodificación y presentación; loading, el aplazamiento. Una configuración no confirma la otra.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)