Raspador de Imágenes: Cómo Raspas Imágenes en Lote desde Sitios Web

TL;DR:

• El atributo src es el lugar menos confiable para encontrar una imagen. Las páginas modernas colocan la URL real en srcset, data-src o solo la establecen después de que se activa el lazy-load; lee currentSrc y los atributos de datos, no solo src.
• Las imágenes con lazy-load no existen hasta que las desplazas. Desplaza automáticamente la página primero para que el cargador cambie los marcadores de posición por las URLs reales, luego recoge.
• Resuelve cada URL a absoluta y conserva los metadatos. new URL(src, location.href) corrige las rutas relativas y relativas al protocolo; alt, naturalWidth y naturalHeight valen la pena capturarlos junto a la URL.
• Descarga a través de la página, no con un cliente HTTP simple. Un fetch() de mismo origen dentro de la sesión renderizada lleva las cookies y el referer que el CDN espera, así que las imágenes protegidas por hotlink regresan en lugar de un 403.
• Funciona en un navegador real, que es el objetivo completo. Scrapeless Scraping Browser renderiza el JavaScript que construye la galería y proporciona egress residencial, así que las imágenes se cargan de la misma manera que lo hacen para un visitante.
• Gratis para comenzar. Las nuevas cuentas de Scrapeless incluyen tiempo de ejecución gratuito para Scraping Browser — regístrate en app.scrapeless.com.

Introducción: por qué "solo agarra las etiquetas img" no funciona

Raspar imágenes suena como una línea simple: selecciona cada <img>, lee src, hecho. En un sitio real, se descompone de inmediato. Las galerías cargan imágenes de manera perezosa, así que la mayoría de las imágenes tienen un marcador de posición en src y la URL real en data-src hasta que las desplazas a la vista. Las imágenes responsivas colocan varios candidatos en srcset y el navegador elige uno en tiempo de ejecución. Las URLs son relativas o relativas al protocolo. Y cuando tienes una URL, el CDN a menudo rechaza una descarga HTTP simple porque espera las cookies y el referer de una vista real de página.

Así que un raspador de imágenes confiable realmente son cuatro pasos: renderizar la página en un navegador real, desplazarse para forzar la carga de imágenes perezosas, leer la URL de imagen resuelta (no el atributo crudo) más sus metadatos, y descargar los bytes a través de la sesión renderizada.

Esta guía ejecuta los cuatro en Scrapeless Scraping Browser — un navegador en la nube anti-detección conectado a Puppeteer — y cada fragmento a continuación se ejecutó contra una página real con muchas imágenes. Solo imágenes públicas.

Lo Que Puedes Hacer Con Esto

• Recolectar en lote cada imagen en una página con su URL resuelta, texto alternativo y dimensiones.
• Manejar galerías con carga perezosa y desplazamiento infinito desplazándote antes de recoger.
• Extraer imágenes responsivas leyendo currentSrc (el candidato que el navegador realmente eligió).
• Descargar en bloque a través de la página para que los CDNs protegidos por hotlink sirvan el archivo.
• Filtrar por tamaño utilizando dimensiones naturales para omitir íconos, separadores y píxeles de seguimiento.

Por Qué Scrapeless Scraping Browser

Scrapeless Scraping Browser es un navegador en la nube personalizable y anti-detección diseñado para rastreadores web y agentes de IA. Para el raspado de imágenes específicamente, trae:

• Chromium desarrollado internamente — renderiza el JS que construye galerías y activa el lazy-loader, así que las URLs reales aparecen.
• Huella anti-detección — la sesión se presenta como un navegador real, así que las páginas cargadas de imágenes y sus CDNs sirven normalmente.
• Proxies residenciales en más de 195 países — salida de una IP en la que la página y su CDN de imágenes confían.
• Persistencia de sesión — mantiene las cookies activas para que las descargas en la página lleven los credenciales correctos.
• Una conexión estándar de Puppeteer — Puppeteer.connect() devuelve un Browser normal; tu código de colección es simple Puppeteer.

Obtén tu clave API en el plan gratuito en app.scrapeless.com.

Requisitos Previos

• Node.js 18 o más reciente
• Una cuenta de Scrapeless y clave API — regístrate en app.scrapeless.com
• Familiaridad básica con Puppeteer

Instalación

npm install @scrapeless-ai/sdk puppeteer-core

export SCRAPELESS_API_KEY="tu_token_api_aqui"

Paso 1 — Conectar y cargar la página

import { Puppeteer } from '@scrapeless-ai/sdk';

const browser = await Puppeteer.connect({
  apiKey: process.env.SCRAPELESS_API_KEY,
  sessionName: 'image-scraper',
  proxyCountry: 'US',
  sessionTTL: 300,
});

const page = await browser.newPage();
await page.goto('https://books.toscrape.com/', {
  waitUntil: 'networkidle2',
  timeout: 60000,
});

networkidle2 espera hasta que las solicitudes de imagen iniciales se estabilicen, así que las imágenes visibles ya están en el DOM.

Paso 2 — Desplazarse para activar imágenes cargadas perezosamente

Las imágenes que no se ven a simple vista a menudo permanecen como marcadores de posición hasta que se desplazan a la vista. Desplaza la página hacia abajo en pasos, haciendo pausas para que el cargador pueda cambiar a las URLs reales:

await page.evaluate(async () => {
  for (let y = 0; y < document.body.scrollHeight; y += 600) {
    window.scrollBy(0, 600);
```javascript
await new Promise((r) => setTimeout(r, 300));
}
});

Para las galerías de desplazamiento infinito, repite esto hasta que document.body.scrollHeight deje de crecer; esa es la señal de que no hay más imágenes por cargar.

Consigue tu clave de API en el plan gratuito: app.scrapeless.com

Paso 3 — Recoge URLs resueltas y metadatos

Lee la URL que el navegador resolvió realmente, retrocediendo a través de los atributos comunes de carga perezosa, y haz que cada URL sea absoluta:

const images = await page.evaluate(() => {
  const abs = (u) => { try { return new URL(u, location.href).href; } catch { return null; } };
  return [...document.querySelectorAll('img')]
    .map((img) => {
      const src =
        img.currentSrc ||           // el candidato que eligió el navegador (maneja srcset)
        img.src ||
        img.getAttribute('data-src') ||
        img.getAttribute('data-lazy-src');
      return {
        src: abs(src),
        alt: img.alt || null,
        width: img.naturalWidth,
        height: img.naturalHeight,
      };
    })
    .filter((i) => i.src);
});

console.log(images.length, 'imágenes');
console.log(images[0]);
// 20 imágenes
// {
//   src: 'https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg',
//   alt: 'A Light in the Attic',
//   width: 125,
//   height: 155
// }

currentSrc es la clave: para una imagen srcset responsiva, te da el candidato que el navegador eligió en la ventana gráfica actual, no una conjetura. Capturar naturalWidth/naturalHeight te permite eliminar íconos y espacios más tarde con un simple filtro de tamaño.

Paso 4 — Descarga las imágenes a través de la página

Descargar a través de un cliente HTTP básico es donde la protección contra hotlinking ataca; el CDN no ve referer ni cookies y devuelve un 403. En su lugar, recupera cada imagen dentro del contexto de la página, para que lleve las credenciales de la sesión, y decodifica el base64 localmente:

import { writeFileSync } from 'node:fs';

const url = images[0].src;
const out = await page.evaluate(async (u) => {
  const res = await fetch(u);
  const bytes = new Uint8Array(await res.arrayBuffer());
  let binary = '';
  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
  return { status: res.status, type: res.headers.get('content-type'), b64: btoa(binary) };
}, url);

writeFileSync('./image-0.jpg', Buffer.from(out.b64, 'base64'));
console.log({ status: out.status, type: out.type, bytes: Buffer.from(out.b64, 'base64').length });
// { status: 200, type: 'image/jpeg', bytes: 9876 }

Ciclo esto sobre tus images recogidas para descargar por lotes, manteniendo un pequeño retraso entre solicitudes y una concurrencia modesta para que el CDN se mantenga feliz.

Lo que obtienes de vuelta

Cada imagen recogida es un registro plano: URL resuelta más metadatos:

[
  {
    "src": "https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg",
    "alt": "A Light in the Attic",
    "width": 125,
    "height": 155
  }
]
// Captura real de books.toscrape.com (20 imágenes en la página principal). Los valores cambian a medida que la página cambia.

Algunas observaciones honestas:

• Las dimensiones pequeñas generalmente no son contenido. Filtra cualquier cosa por debajo de un umbral (digamos 50×50) para eliminar íconos, sprites y píxeles de seguimiento.
• srcset significa que existen múltiples resoluciones. currentSrc da la adecuada para la ventana gráfica; analiza el srcset bruto si deseas específicamente el más grande.
• Las imágenes de fondo no son etiquetas <img>. Las URLs de background-image de CSS viven en estilos computados; recógelas por separado si la galería las utiliza.
• Descarga a través de la página para cualquier CDN que chequea el referer; una solicitud simple resultará en 403.

Conclusión: un raspador de imágenes por lotes confiable

Un raspador de imágenes confiable es renderizar → desplazar → leer la URL resuelta → descargar a través de la página. Salta el desplazamiento y pierdes las imágenes perezosas; lee el src en lugar de currentSrc y obtienes marcadores de posición; descarga con un cliente básico y los CDNs protegidos por hotlinking te rechazan. Ejecutar en Scrapeless Scraping Browser proporciona el navegador real y la salida residencial que hacen que la galería se cargue en primer lugar. Para recopilar URLs de páginas en lugar de imágenes, consulta la guía del raspador de Etsy; la página del producto Scraping Browser y documentación cubren toda la superficie del SDK. Desplaza primero, lee currentSrc, conserva los metadatos y recupera los bytes a través de la sesión.

¿Listo para construir tu pipeline de datos impulsado por IA?

Únete a nuestra comunidad para reclamar un plan gratuito y conectar con desarrolladores que están construyendo tuberías de imágenes y medios: Discord · Telegram.

Regístrate en app.scrapeless.com para obtener tiempo de ejecución de Scraping Browser gratis y adapta los patrones anteriores a las galerías y CDNs que tu flujo de trabajo necesita. Consulta precios para escalas.

Preguntas Frecuentes

P: ¿Es legal extraer imágenes de un sitio web?
Recoger imágenes públicamente visibles es generalmente permisible, pero el copyright y los Términos de Servicio del sitio aún se aplican a cómo las usas. Extrae solo imágenes públicas, respeta las licencias, revisa los Términos de Servicio y consulta con un abogado para tu caso de uso.

P: ¿Por qué mis valores src extraídos están en blanco o son pequeños marcadores de posición?
Porque las imágenes se cargan de manera diferida. Desplaza primero la página para que el cargador cambie el marcador de posición por la URL real, y lee currentSrc/data-src en lugar de solo src.

P: ¿Cómo manejo galerías de desplazamiento infinito?
Repite el paso de desplazamiento hasta que document.body.scrollHeight deje de aumentar, luego recolecta: esa es la señal de que no se cargarán más imágenes.

P: Mis descargas retornan 403 aunque la URL funciona en un navegador. ¿Por qué?
El CDN está verificando el referer/cookies (protección contra hotlinking). Descarga con un fetch() en la página para que la solicitud lleve las credenciales de la sesión renderizada.

P: ¿Cómo obtengo la versión de mayor resolución?
Analiza el srcset crudo y selecciona el candidato más grande, en lugar de currentSrc, que refleja el viewport actual.

P: ¿Necesito un proxy?
Para páginas de imágenes públicas, a menudo no — pero fijar proxyCountry proporciona una IP residencial consistente que las páginas cargadas de imágenes y sus CDNs tratan como un visitante normal.

P: ¿Puedo ejecutar esto sin un agente de IA?
Sí. Es solo Puppeteer sobre la sesión Scrapeless — no se requiere agente.