Cómo extraer imágenes cargadas de forma diferida que faltan en la fuente de la página
Un flujo de trabajo probado para revelar imágenes que aparecen solo después de desplazarse, hacer clic o permitir que JavaScript represente la página.
Pegas la URL de una galería en un programa de descarga y obtienes doce imágenes aunque la página muestra cincuenta. O buscas en la fuente de la página una fotografía que esté claramente en la pantalla y no encuentras nada. Los archivos que faltan suelen cargarse de forma diferida: el sitio web espera hasta que una imagen esté cerca de la ventana gráfica antes de asignar o solicitar su URL real.
La carga diferida reduce el peso de la página inicial y hace que las páginas largas parezcan más rápidas. También significa que una solicitud HTML rápida puede capturar solo marcadores de posición, mientras que un extractor que no se desplaza se detiene antes de que exista el resto de la galería.
Empiece por descubrir cómo el sitio difiere sus imágenes. Reproduzca el desplazamiento o haga clic que los activa y luego inspeccione la página representada. El mismo enfoque funciona con carga diferida nativa, atributos data-src, botones para cargar más y listas virtualizadas.
Qué cambia realmente la carga diferida
Una imagen normal puede cargarse tan pronto como el navegador la analiza:
<img src="photo.jpg" alt="Wooden chair beside a window">
La carga diferida nativa agrega una instrucción:
<img loading="lazy" src="photo.jpg" alt="Wooden chair beside a window">
La URL está presente en ambos casos. Con loading="lazy", el navegador retrasa la solicitud de red hasta que predice que la imagen pronto será necesaria. Un analizador estático aún puede leer la dirección, incluso si el archivo no se ha cargado.
La carga diferida basada en JavaScript puede ser más difícil. La URL real puede ubicarse en un atributo de datos personalizado:
<img
src="placeholder.svg"
data-src="photo.jpg"
data-srcset="photo-640.jpg 640w, photo-1280.jpg 1280w"
class="lazy"
alt="Wooden chair beside a window"
>
Un guión vigila el elemento. Cuando se acerca a la ventana gráfica, el script copia data-src en src y data-srcset en srcset. Una herramienta que verifica que solo src ve el marcador de posición.
Algunas aplicaciones van más allá y no agregan el elemento <img> hasta que se completa una llamada API. En ese caso, ni la etiqueta ni la URL existen en el documento inicial.
Por qué Ver el código fuente de la página puede ser engañoso
"Ver código fuente de la página" muestra la respuesta HTML enviada originalmente por el servidor. Developer Tools muestra el DOM en vivo después de que se hayan ejecutado los scripts, hayan llegado los datos y el visitante haya interactuado con la página.
En un artículo renderizado por un servidor, los dos pueden ser similares. En una galería infinita o en una aplicación de una sola página, pueden ser muy diferentes. El DOM en vivo puede contener docenas de elementos de imagen que nunca aparecieron en la respuesta fuente.
Utilice la fuente de la página para comprender el marcado inicial. Utilice los paneles Elementos y Red para comprender lo que realmente representó el navegador.
Método 1: desplácese antes de extraer
Para una página larga normal, el desplazamiento lento suele ser suficiente.
- Abra la página y espere a que se establezca la primera pantalla.
- Desplácese hacia abajo en pasos en lugar de saltar directamente al final.
- Haga una pausa breve después de que aparezca cada grupo de imágenes.
- Continúe hasta que no se cargue ningún contenido nuevo.
- Desplácese hacia atrás en la página una vez si el sitio descarga o reemplaza elementos de manera agresiva.
- Ejecute la extracción después de que las imágenes estén presentes.
Las pausas importan. Desplazarse más rápido de lo que la red puede responder puede dejar marcadores de posición vacíos. Un botón para cargar más o un control de paginación también necesita un clic explícito.
Para un análisis automatizado renderizado, utilice ExtractPics Deep Extract. Carga la página pública en un navegador, se desplaza y puede seguir estados de página adicionales. Revise los resultados en lugar de asumir que todas las imágenes de la red pertenecen a la galería.
Método 2: inspeccionar los atributos de los datos
Seleccione una imagen descargada o cargada recientemente en Herramientas de desarrollo y busque atributos como:
fuente de datos datos-original datos-lazy-src conjunto de datos datos-bg imagen-de-fondo-de-datos
Estos nombres son convenciones, no estándares. Un sitio puede elegir cualquier nombre de atributo. Compare el elemento antes y después de que se cargue para ver qué cambia.
Si src contiene un píxel transparente o un pequeño marcador de posición mientras que data-src contiene una URL de imagen normal, el atributo personalizado es el más útil. Para imágenes responsivas, inspeccione tanto la URL única como la lista completa de candidatos. La guía de srcset y <picture> explica cómo el navegador elige entre esos candidatos.
Método 3: use el panel Red
El panel Red muestra solicitudes a medida que se activan imágenes diferidas.
- Abra Herramientas de desarrollador y seleccione Red.
- Filtrar por imagen.
- Borre la lista de solicitudes existente.
- Desplácese o haga clic en el control de la galería.
- Observe cómo aparecen nuevas solicitudes de imágenes.
- Abra una solicitud para ver su URL, dimensiones, tipo de respuesta e iniciador.
Esto resulta útil cuando un script crea URL de blobs o asigna fondos CSS. También muestra si el navegador solicitó un candidato de respuesta pequeño en lugar del archivo más grande.
Conserve el registro de solicitudes si la navegación o la paginación reemplazan el documento actual. De lo contrario, las solicitudes anteriores pueden desaparecer de la vista.
Intersection Observer es un desencadenante común
Muchos cargadores diferidos utilizan la API Intersection Observer del navegador. Le indica a un script cuando un elemento ingresa o se acerca a la ventana gráfica. Luego, el script puede solicitar la imagen.
No es necesario aplicar ingeniería inversa a todo el observador para extraer los activos autorizados. La consecuencia práctica es simple: el elemento debe llegar a la región observada. Si el sitio utiliza un margen raíz, la carga puede comenzar poco antes de que sea visible.
Las pestañas ocultas y los acordeones colapsados complican esto. Una imagen dentro del contenido display: none nunca puede cruzarse con nada. Primero abra la pestaña o el acordeón.
Los botones para cargar más no son lo mismo que las imágenes perezosas
La carga diferida retrasa los archivos de elementos ya planificados en la página. Un botón para cargar más solicita otro lote de registros, a menudo desde una API. Esas imágenes no existen en el DOM hasta que se usa el botón.
Lo mismo ocurre con la paginación numerada. Cargar la página uno a fondo no revelará los activos de la página dos.
Cuando su objetivo sea una copia de seguridad o un inventario autorizado, registre qué página o lote produjo cada archivo. Esto evita espacios accidentales y facilita la eliminación de duplicados. La guía de inventario de imágenes de sitios web incluye una estructura adecuada.
El desplazamiento infinito necesita una regla de detención
Infinitas páginas pueden ser realmente largas, repetir contenido o seguir produciendo recomendaciones sin un final significativo. "Desplazarse hasta terminar" no es un plan seguro en sí mismo.
Elija un límite antes de comenzar:
- Deténgase después de una cantidad conocida de publicaciones o productos propios.
- Stop when the displayed result count is reached.
- Deténgase después de que la página repita el mismo cursor o ID de elemento.
- Deténgase cuando varios ciclos de desplazamiento no agreguen nuevas imágenes únicas.
- Para una migración, utilice el catálogo de la plataforma o el mapa del sitio como fuente de verdad.
El artículo sobre descarga de imágenes desde galerías de desplazamiento infinito cubre con más profundidad los diseños virtualizados y por lotes.
Las listas virtualizadas pueden volver a eliminar imágenes
Algunas galerías grandes mantienen sólo las filas visibles en el DOM. A medida que se desplaza hacia abajo, los elementos de la imagen anterior se eliminan o se reutilizan. Esto controla el uso de la memoria pero crea una trampa: inspeccionar el DOM en la parte inferior puede mostrar solo la pantalla completa final.
El panel Red con Preservar registro habilitado puede conservar las URL solicitadas. Un extractor especialmente diseñado también puede recopilar imágenes de forma incremental a medida que se desplaza, en lugar de escanear el DOM solo una vez al final.
Si el mismo elemento se reutiliza para varios registros, deduplicar por URL final y, cuando sea posible, conservar el identificador del elemento que lo introdujo.
Fondos CSS perezosos
Un sitio puede almacenar una URL en segundo plano en data-bg y aplicarla más tarde:
<div class="feature-card" data-bg="/images/studio.webp"></div>
Después de la activación, JavaScript puede asignar una imagen de fondo en línea. Inspeccione los estilos calculados después de desplazarse. La guía de extracción de fondo CSS explica los pasos manuales.
Los fondos también pueden cambiar en los puntos de interrupción de los medios, así que repita la verificación en los tamaños de ventana gráfica relevantes si está auditando un diseño responsivo.
Por qué forzar la carga de cada imagen puede resultar contraproducente
Algunos consejos para la consola del navegador recomiendan reemplazar cada data-src a ciegas o eliminar todos los atributos diferidos. Eso puede funcionar en una página simple, pero también puede:
- Solicite cientos de archivos a la vez
- Elija el candidato receptivo incorrecto
- Límites de tasa de activación
- Romper el estado de la aplicación
- Cargue imágenes que la interfaz nunca debió revelar en la vista actual
- Faltan registros que requieren una solicitud de API de todos modos
Prefiera primero el comportamiento normal de la página. Desplácese, haga clic en controles legítimos y deje que la aplicación proporcione su contenido público. Utilice ediciones DOM solo en las páginas que controle y pruébelas en una sesión desechable.
Un flujo de trabajo de extracción repetible
Para una página:
- Cargue la página con JavaScript habilitado.
- Tenga en cuenta el número visible de elementos.
- Abra pestañas, acordeones o vistas de galería necesarios para la tarea.
- Desplácese en pasos medidos y espere solicitudes.
- Utilice todos los controles legítimos de carga adicional dentro de sus límites planificados.
- Inspeccione
src,srcseten vivo, atributos de datos personalizados y fondos calculados. - Preservar las solicitudes de red cuando el DOM esté virtualizado.
- Extraiga, luego agrupe y deduplica las URL.
- Verifique varios archivos manualmente, incluido el primer y el último lote.
Si la página devuelve muchos archivos de soporte pequeños, utiliza la guía de filtrado antes de descargar el conjunto final.
Pruebe sus propias páginas cargadas de forma diferida
Los propietarios de sitios web deberían probar más que si las imágenes eventualmente aparecen.
- Mantenga activas las imágenes destacadas de la mitad superior de la página cuando es probable que sean el elemento de pintura con mayor contenido.
- Incluya información significativa sobre el ancho y el alto para reducir el cambio de diseño.
- Confirme que las imágenes se cargan con la navegación por teclado y el zoom del navegador.
- Compruebe que los rastreadores de búsqueda reciban HTML y texto alternativo útiles.
- Pruebe conexiones lentas y caché deshabilitado.
- Asegúrese de que el JavaScript fallido no deje el contenido crítico permanentemente en blanco.
La guía de carga diferida de MDN documenta el atributo nativo loading y los conceptos de rendimiento relacionados.
Respetar el acceso y la propiedad
Hacer pública una página no autoriza a volver a publicar sus imágenes. Utilice la extracción diferida de imágenes para su propio sitio, el sitio de un cliente que administre, una colección con licencia, una investigación permitida u otro flujo de trabajo legal.
No lo utilices para eludir la autenticación, las galerías privadas, los muros de pago o los controles de acceso. Si se planea reutilizar, verifique primero la fuente y la licencia. La guía de derechos de autor de imágenes explica por qué descargar y reutilizar son decisiones separadas.
No te detengas en la primera pantalla completa
La primera pantalla no dice casi nada sobre una galería perezosa. A veces, la URL se encuentra en data-src; A veces el artículo en sí aún no ha llegado. Desplácese lo suficientemente lento para que finalicen las solicitudes, use el control de carga adicional de la página y recopile los resultados a medida que aparecen en lugar de esperar un análisis final.
Luego verifique el recuento con algo real: el total del catálogo, el registro de paginación, el mapa del sitio o la exportación de CMS. "Parecía terminado" es una regla de detención débil. Un recuento coincidente más los archivos de trabajo del principio y el final del conjunto es mucho más convincente.