# Lazy loading de imágenes: qué cargar primero y qué diferir > Lazy loading de imágenes: qué imágenes cargar primero, cuáles diferir, cómo usar el atributo loading y cómo comprobar el resultado publicado. Canonical: https://www.getdexseo.com/es/blog/rendimiento-web/lazy-loading-imagenes/ Author: Dex SEO, Editorial team Published: Oct 24, 2026 · Updated: Oct 24, 2026 ## Key takeaways - Carga con normalidad las imágenes de la primera vista. - Difiere solo las imágenes de más abajo. - Pon dimensiones para reservar el espacio. - Evita el lazy loading duplicado del CMS y los plugins. El lazy loading de imágenes, o carga diferida, deja que el navegador espere para descargar las imágenes que todavía no se ven. Bien usado, ahorra trabajo al principio de la visita. Mal usado, retrasa justo lo que el lector vino a ver. La regla práctica es sencilla: carga con normalidad las imágenes de la primera vista, difiere las que están más abajo y comprueba el resultado publicado. Esta guía forma parte de la guía de [rendimiento web](https://www.getdexseo.com/es/blog/rendimiento-web/). ## ¿Qué es el lazy loading de imágenes? Es una técnica que aplaza la descarga de una imagen hasta que está cerca de la parte visible de la página, el llamado viewport. La imagen puede empezar a cargar antes de que el lector llegue a ella; no espera a un clic. Hoy los navegadores lo hacen de forma nativa con un atributo de HTML, sin necesidad de JavaScript. El lazy loading no reduce el peso de un archivo grande ni arregla una URL rota. Son revisiones distintas. La guía de [SEO de imágenes](https://www.getdexseo.com/es/blog/seo-de-imagenes/) cubre cómo elegir, describir y entregar las imágenes. ## Lazy loading frente a carga normal (eager) Con la carga normal, el navegador pide la imagen en cuanto la encuentra en el HTML. Con la carga diferida, espera a que la imagen esté cerca de la pantalla. La primera opción es mejor para lo que se ve al entrar. La segunda, para lo que queda lejos. Antes de cambiar nada, define el resultado que buscas: la imagen principal debe aparecer pronto y los ejemplos de más abajo deben llegar cuando el lector se acerca. ## ¿Qué imágenes deben cargarse de inmediato? No apliques lazy loading a las imágenes de la primera vista. Es especialmente importante si una imagen es el elemento LCP de la página, es decir, el contenido más grande que se muestra al cargar. La guía de Google sobre la [carga diferida a nivel del navegador](https://web.dev/articles/browser-level-image-lazy-loading?hl=es-419) recomienda cargar siempre de forma anticipada las imágenes visibles en el primer viewport. Revisa el diseño real, no el nombre del archivo. Una imagen llamada “portada” puede quedar debajo de una introducción larga en el móvil. Una foto de producto puede verse al instante en una pantalla ancha. Anota qué imagen importa para la primera vista y por qué. No marques toda la galería como urgente porque una foto lo sea. Si el documento llega tarde, la causa no es la imagen. Haz primero un [diagnóstico del TTFB](https://www.getdexseo.com/es/blog/rendimiento-web/mejorar-ttfb/) antes de atribuir toda la espera a una imagen. ## ¿Qué imágenes conviene cargar en diferido? Las imágenes bastante por debajo de la primera vista son las candidatas habituales: capturas al final de una guía larga, ejemplos de un caso práctico o fotos cerca del final de un artículo. Vuelve a revisar la primera vista si cambia el diseño. _Ejemplo ficticio:_ una guía de reparación tiene una foto inicial y seis imágenes de pasos más abajo. Un buen plan inicial es cargar la foto inicial con normalidad y diferir las demás. Es un plan, no una mejora medida. Comprueba lo que ve el lector al recorrer la guía: si un paso clave sigue en blanco cuando lo necesita, revisa la configuración y la entrega del archivo. ## Cómo usar el atributo loading en HTML Para una imagen por debajo de la primera vista, basta con HTML: `Tornillos de la bisagra marcados en la puerta abierta` Es un ejemplo de código, no una imagen de este artículo. Usa la ruta, el texto alternativo y las dimensiones del archivo real. El atributo `loading` tiene dos valores: `lazy` pide al navegador que espere y `eager` carga con normalidad. Si omites el atributo, se usa la carga normal. El navegador decide a qué distancia del viewport empieza la descarga, así que no bases tu revisión en un umbral fijo de píxeles. El atributo también funciona en iframes. Mantén una fuente real de la imagen en el HTML publicado. Si un script usa campos de marcador, pide al desarrollador que revise cómo encuentra el navegador la imagen. Si ese script además bloquea acciones de la página, revisa el [tiempo de ejecución de JavaScript](https://www.getdexseo.com/es/blog/rendimiento-web/tiempo-ejecucion-javascript/) por separado. El atributo `loading` no se aplica a las imágenes de fondo definidas en CSS. ## Diferencia entre loading y fetchpriority `loading` controla si una imagen espera. `fetchpriority` es una pista distinta sobre su importancia. Poner `fetchpriority="high"` no anula `loading="lazy"`. Para una imagen principal, un desarrollador puede usar la carga normal y una prioridad alta. No pongas prioridad alta a todas las imágenes: no pueden ir todas primero. Revisa cada atributo con un motivo claro. Si la página ya funciona bien y no hay evidencia para cambiarla, no añadas atributos solo para que el código parezca optimizado. Lo mismo vale para las fuentes: revisa las [fuentes web](https://www.getdexseo.com/es/blog/rendimiento-web/optimizar-fuentes-web/) al planificar qué archivos necesita la página al principio. ## Pon dimensiones a las imágenes para evitar saltos Da a cada imagen su ancho y alto correctos. Así el navegador reserva el espacio antes de que llegue el archivo, y los estilos pueden seguir adaptándola a pantallas pequeñas. Revisa también la forma: si el espacio reservado no coincide con la imagen final, el texto cercano se moverá. El lazy loading decide cuándo se pide la imagen, pero no reserva su espacio. Si el hueco cambia al llegar el archivo, sigue la guía para [reducir el CLS causado por imágenes e inserciones](https://www.getdexseo.com/es/blog/rendimiento-web/reducir-cls-imagenes/). ## Revisa el CMS y evita el lazy loading duplicado Un tema, el CMS, un plugin o un componente propio pueden controlar ya la carga de imágenes. WordPress, por ejemplo, añade el atributo a muchas imágenes por defecto. Revisa el HTML publicado antes de añadir otra capa: con dos sistemas es difícil saber cuál causa un retraso. Para aislar funciones que se solapan, usa una [prueba controlada de plugins](https://www.getdexseo.com/es/blog/rendimiento-web/plugins-lentos-wordpress/). Haz un cambio cada vez y revisa varias páginas que usen la misma plantilla. ## Ventajas e inconvenientes del lazy loading La ventaja es que el navegador no descarga al principio imágenes que el lector quizá nunca vea. Eso ahorra datos y trabajo. El inconveniente aparece cuando se aplica a todo: la imagen principal llega tarde, una imagen aparece en blanco al hacer scroll rápido o un script de carga añade trabajo. La técnica funciona cuando cada imagen carga en el momento adecuado de la visita. ## Cómo comprobar el lazy loading después de publicar Primero confirma que los lectores reciben la versión actual; una copia antigua puede esconder tu cambio. La guía para [comprobar si la caché funciona](https://www.getdexseo.com/es/blog/rendimiento-web/comprobar-cache-web/) explica cómo. Después: 1. Abre una carga nueva y revisa la primera vista antes de hacer scroll. La imagen principal no debe depender del scroll. 2. Inspecciona las imágenes publicadas: cuáles tienen `loading="lazy"` y si tienen fuente y dimensiones. 3. Revisa las peticiones de imágenes en las herramientas del navegador mientras bajas por la página. 4. Recorre todo el artículo y busca imágenes en blanco, rotas o texto que se mueve. 5. Repite en una pantalla pequeña. 6. Repite las pruebas de rendimiento con las mismas condiciones. DEX conecta la investigación de búsquedas, la planificación de contenido, la redacción de artículos y la publicación en el sitio conectado. DEX Health ayuda a revisar la calidad y el SEO de la página, también en el plan gratuito. Úsalo junto a estas pruebas: una nota de Health no sustituye a un registro de peticiones ni dice qué imagen fue el elemento LCP. Cierra la tarea con una decisión simple: identifica las imágenes de la primera vista, difiere las adecuadas y comprueba el recorrido del visitante. Guarda las condiciones de prueba y los problemas que necesiten a un desarrollador, para que la próxima revisión empiece con evidencia. ## FAQ ### ¿Debo aplicar lazy loading a la imagen principal? No. Si es visible al entrar o es el elemento LCP, cárgala con normalidad. ### ¿fetchpriority alta anula loading lazy? No. Son dos ajustes distintos: uno decide si la imagen espera y el otro su prioridad. ### ¿El atributo loading funciona con imágenes de fondo en CSS? No. El atributo se aplica a las etiquetas img e iframe. ## Sources - [Carga diferida de imágenes a nivel del navegador para la Web](https://web.dev/articles/browser-level-image-lazy-loading?hl=es-419) — web.dev (Google) - [Web Vitals](https://web.dev/articles/vitals?hl=es-419) — web.dev (Google)