Respuesta corta: La carga diferida, o lazy loading, espera a descargar una imagen hasta que el visitante se acerca a ella. Se activa con loading="lazy" en la etiqueta img, sin bibliotecas de JavaScript. Úsala en las imágenes más abajo en la página, no en las de la primera pantalla. La imagen principal de arriba debe cargarse enseguida con fetchpriority="high".
Los atributos que controlan la carga de imágenes
| Atributo | Qué hace | Úsalo en |
|---|---|---|
loading= | Espera a que la imagen esté cerca de la pantalla | Las imágenes más abajo en la página |
loading= | Carga la imagen enseguida, lo predeterminado | Las imágenes de la primera pantalla |
fetch | Sube la prioridad de la descarga | La imagen principal, a menudo el LCP |
width y height | Reserva el espacio antes de que llegue la imagen | Todas las imágenes |
Sin el atributo, una imagen se carga de inmediato, lo predeterminado en el navegador. Una imagen con loading="lazy" y fetchpriority="high" sigue esperando mientras está fuera de la pantalla, así que juntos rara vez tienen sentido.
De web.dev, «Carga diferida de imágenes a nivel del navegador para la Web», consultado el 3 de noviembre de 2026.
Qué imágenes diferir
Las imágenes de debajo de la primera pantalla son buenas candidatas: si nadie llega hasta ahí, el navegador no las descarga. Chrome empieza a traer una imagen diferida antes de que se vea. En sus pruebas en Android, el 97.5% de las imágenes diferidas en 4G estaban cargadas 10 milisegundos después de aparecer.
El riesgo está arriba de la página. web.dev advierte contra diferir las imágenes que probablemente estén en la primera pantalla, sobre todo la que acaba siendo el Largest Contentful Paint. Su análisis encontró que cargar de inmediato las imágenes de la primera pantalla y diferir el resto da menos bytes y mejores Core Web Vitals. Nuestra guía de Core Web Vitals explica el LCP.
Imágenes ocultas y carruseles
Chrome, Safari y Firefox no cargan las imágenes ocultas con display: none, en la imagen o en un elemento que la contiene. Otras formas de ocultarlas, como opacity: 0, siguen haciendo que el navegador las descargue.
Prueba los carruseles y las imágenes que ocultas en algunos tamaños de pantalla después de cambiar cómo se cargan.
Cómo diferir tus imágenes
- Abre la página y anota qué imágenes se ven en la primera pantalla, en el teléfono y en la computadora.
- Deja esas imágenes sin loading="lazy", o ponles loading="eager".
- Agrega fetchpriority="high" a la imagen principal de arriba.
- Agrega loading="lazy" a las imágenes más abajo en la página.
- Ponle a cada imagen sus atributos width y height.
- Comprueba que las imágenes ocultas o de carrusel siguen apareciendo cuando deben.
- Pasa la página por PageSpeed Insights y compara el LCP antes y después.
Cómo carga las imágenes nuestra página de inicio
A la 1:41 AM del 3 de noviembre leímos nuestra página de inicio como visitantes. Tiene 23 etiquetas img. La primera imagen del muro de entrada se carga de inmediato con fetchpriority="high", y la página precarga una imagen.
Las tres imágenes siguientes de ese muro también se cargan de inmediato, los dos logotipos del encabezado no tienen atributo loading y las otras 17 imágenes usan loading="lazy".
Antes de publicar una página
- Ninguna imagen de la primera pantalla tiene loading="lazy".
- La imagen principal de arriba tiene fetchpriority="high".
- Las imágenes más abajo usan loading="lazy".
- Cada imagen tiene width y height.
- Las imágenes ocultas y de carrusel siguen apareciendo cuando deben.
- PageSpeed Insights no muestra un LCP más lento después del cambio.
RecuerdaDifiere lo que está debajo de la primera pantalla y carga la imagen de arriba enseguida, con prioridad alta. Ponle su tamaño a cada imagen para que nada salte mientras carga.
Si quieres un sitio que cargue rápido en el teléfono, mira nuestro servicio de diseño web. Nuestra guía sobre el texto alternativo trata el otro atributo que necesita cada imagen.
Respuestas rápidas sobre la carga diferida
¿La carga diferida ayuda al SEO?
Puede ayudar a la velocidad de la página porque no descarga imágenes a las que nadie llega, y una página rápida es más cómoda. Usada en la imagen principal de arriba, puede retrasar el Largest Contentful Paint, así que deja esa imagen sin diferir.
¿Sigo necesitando JavaScript para la carga diferida?
No. El atributo loading le permite al navegador diferir imágenes sin código propio ni una biblioteca aparte. web.dev añade que las imágenes se cargan igual si JavaScript está desactivado, aunque la carga solo se difiere con JavaScript activado.
¿A qué distancia de la pantalla empieza Chrome a cargar una imagen diferida?
web.dev dice que Chrome usa unos 1,250 píxeles en conexiones 4G rápidas y 2,500 píxeles en 3G o más lentas. Así, casi todas las imágenes están listas cuando alguien llega a ellas.
¿Debo poner ancho y alto a las imágenes diferidas?
Sí. El navegador no sabe el tamaño de una imagen antes de cargarla, así que web.dev recomienda los atributos width y height en todas las etiquetas img. Eso reserva el espacio y evita saltos en el diseño.
¿Puedo diferir también videos y mapas?
Los iframes, que usan muchos videos y mapas insertados, aceptan el mismo atributo: loading="lazy" en un iframe lo difiere de la misma forma. Prueba la página después para comprobar que el contenido sigue apareciendo.
Fuentes
Consultadas el 3 de noviembre de 2026. web.dev: Carga diferida de imágenes a nivel del navegador para la Web y The performance effects of too much lazy loading, en inglés. Nuestro caso: las etiquetas img de nuestra página de inicio, el 3 de noviembre de 2026.