Raspador de Imagens: Como Raspagem em Lote de Imagens de Sites

Resumo:

• O atributo src é o lugar menos confiável para encontrar uma imagem. Páginas modernas colocam a URL real em srcset, data-src ou definem apenas depois que o carregamento lento é acionado — leia currentSrc e os atributos de dados, não apenas src.
• Imagens carregadas de forma preguiçosa não existem até você rolar até elas. Role a página primeiro para que o carregador troque os placeholders por URLs reais, e então colete.
• Resolva cada URL para absoluta e mantenha os metadados. new URL(src, location.href) corrige caminhos relativos e relativos ao protocolo; alt, naturalWidth e naturalHeight valem a pena serem capturados junto com a URL.
• Baixe através da página, não um cliente HTTP nu. Um fetch() de mesma origem dentro da sessão renderizada carrega os cookies e o referer que o CDN espera, então imagens protegidas por hotlink retornam em vez de um 403.
• Funciona em um navegador real, que é o objetivo. O Scrapeless Scraping Browser renderiza o JavaScript que constrói a galeria e fornece acesso residencial, para que as imagens carreguem da maneira que fazem para um visitante.
• Gratuito para começar. Novas contas Scrapeless incluem tempo de execução gratuito do Scraping Browser — inscreva-se em app.scrapeless.com.

Introdução: por que "apenas pegar as tags img" não funciona

Raspar imagens parece uma tarefa simples — selecione cada <img>, leia src, pronto. Em um site real, isso desmorona imediatamente. Galerias carregam imagens de forma preguiçosa, então a maioria das imagens tem um placeholder em src e a URL real em data-src até que você role para vê-las. Imagens responsivas colocam vários candidatos em srcset e o navegador escolhe um em tempo de execução. URLs são relativas ou relativas ao protocolo. E quando você tem uma URL, o CDN muitas vezes rejeita um download HTTP simples porque espera os cookies e referer de uma visualização real da página.

Portanto, um raspador de imagens confiável é realmente quatro passos: renderizar a página em um navegador real, rolar para forçar o carregamento de imagens preguiçosas, ler a URL da imagem resolvida (não o atributo bruto) além de seus metadados, e baixar os bytes através da sessão renderizada.

Este guia executa os quatro passos no Scrapeless Scraping Browser — um navegador em nuvem anti-detecção conectado ao Puppeteer — e cada snippet abaixo foi executado contra uma página ativa e carregada de imagens. Somente imagens públicas.

O que você pode fazer com isso

• Colete em lote cada imagem em uma página com sua URL resolvida, texto alternativo e dimensões.
• Lide com galerias de carregamento preguiçoso e rolagem infinita rolando antes de coletar.
• Extraia imagens responsivas lendo currentSrc (o candidato que o navegador realmente escolheu).
• Baixe em massa através da página para que CDNs protegidos por hotlink sirvam o arquivo.
• Filtre por tamanho usando dimensões naturais para ignorar ícones, espaçadores e pixels de rastreamento.

Por que Scrapeless Scraping Browser

O Scrapeless Scraping Browser é um navegador em nuvem personalizável, anti-detecção, projetado para rastreadores da web e agentes de inteligência artificial. Para raspagem de imagens especificamente, ele traz:

• Chromium desenvolvido internamente — renderiza o JS que constrói galerias e aciona o carregador preguiçoso, para que as URLs reais apareçam.
• Impressão digital anti-detecção — a sessão é lida como um navegador real, então páginas carregadas de imagens e seus CDNs servem normalmente.
• Proxies residenciais em mais de 195 países — saída de um IP que a página e seu CDN de imagem confiáveis.
• Persistência de sessão — mantenha os cookies ativos para que downloads em página carreguem as credenciais corretas.
• Uma conexão padrão do Puppeteer — Puppeteer.connect() retorna um Browser normal; seu código de coleção é puro Puppeteer.

Obtenha sua chave de API no plano gratuito em app.scrapeless.com.

Pré-requisitos

• Node.js 18 ou mais recente
• Uma conta Scrapeless e chave de API — inscreva-se em app.scrapeless.com
• Familiaridade básica com Puppeteer

Instalar

npm install @scrapeless-ai/sdk puppeteer-core

export SCRAPELESS_API_KEY="seu_token_api_aqui"

Passo 1 — Conectar e carregar a página

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

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

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

networkidle2 aguarda até que as requisições iniciais de imagem sejam resolvidas, então as imagens acima da dobra já estão no DOM.

Passo 2 — Rolagem para acionar imagens carregadas de forma preguiçosa

As imagens abaixo da dobra muitas vezes permanecem como placeholders até que rolem para a visualização. Percorra a página em etapas, fazendo pausas para que o carregador possa trocar por URLs reais:

await page.evaluate(async () => {
  for (let y = 0; y < document.body.scrollHeight; y += 600) {
    window.scrollBy(0, 600);

aguardar nova Promise((r) => setTimeout(r, 300));
}
});

Para galerias de rolagem infinita, repita isso até que `document.body.scrollHeight` pare de crescer — esse é o sinal de que não há mais imagens para carregar.

> Obtenha sua chave de API no plano gratuito: [app.scrapeless.com](https://app.scrapeless.com/passport/login/?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=image-scraper)

---

## Etapa 3 — Coletar URLs resolvidos e metadados

Leia a URL que o navegador realmente resolveu, voltando por meio dos atributos comuns de carregamento preguiçoso e torne cada URL absoluta:

```javascript
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 ||           // o candidato que o navegador escolheu (manipula 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, 'imagens');
console.log(images[0]);
// 20 imagens
// {
//   src: 'https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg',
//   alt: 'Uma Luz no Sótão',
//   width: 125,
//   height: 155
// }

currentSrc é a chave: para uma imagem srcset responsiva, ele fornece o candidato que o navegador escolheu na visualização atual, não um palpite. Capturar naturalWidth/naturalHeight permite que você descarte ícones e espaçadores mais tarde com um simples filtro de tamanho.

Etapa 4 — Baixar as imagens através da página

Baixar através de um cliente HTTP puro é onde a proteção contra hotlinking pega você — o CDN não vê referer ou cookies e retorna um 403. Em vez disso, busque cada imagem dentro do contexto da página, para que carregue as credenciais da sessão, e decodifique o 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('./imagem-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 }

Repita isso sobre suas imagens coletadas para baixar em lote, mantendo um pequeno atraso entre as solicitações e modesta concorrência para que o CDN fique feliz.

O Que Você Recebe

Cada imagem coletada é um registro plano — URL resolvida mais metadados:

[
  {
    "src": "https://books.toscrape.com/media/cache/2c/da/2cdad67c44b002e7ead0cc35693c0e8b.jpg",
    "alt": "Uma Luz no Sótão",
    "width": 125,
    "height": 155
  }
]
// Captura real de books.toscrape.com (20 imagens na página inicial). Os valores mudam à medida que a página muda.

Algumas observações honestas:

• Dimensões pequenas geralmente não são conteúdo. Filtre qualquer coisa abaixo de um limite (digamos 50×50) para descartar ícones, sprites e pixels de rastreamento.
• srcset significa que existem múltiplas resoluções. currentSrc fornece a apropriada para a visualização; analise o srcset bruto se você especificamente quiser o maior.
• Imagens de fundo não são tags <img>. URLs de background-image CSS vivem em estilos computados — colete-as separadamente se a galeria as usar.
• Baixe através da página para qualquer CDN que verifica o referer; um pedido puro resultará em 403.

Conclusão: um scraper de imagem em lote confiável

Um scraper de imagem confiável é renderizar → rolar → ler a URL resolvida → baixar através da página. Pule a rolagem e você perde as imagens preguiçosas; leia o src bruto ao invés de currentSrc e você obterá espaços reservados; baixe com um cliente puro e CDNs protegidos por hotlinking o rejeitarão. Executar no Scrapeless Scraping Browser fornece o verdadeiro navegador e a egressos residenciais que permitem que a galeria carregue em primeiro lugar. Para coletar URLs da página em vez de imagens, veja o guia de scraper Etsy; a página do produto Scraping Browser e documentos cobrem toda a superfície do SDK. Role primeiro, leia currentSrc, mantenha os metadados e busque os bytes através da sessão.

Pronto para Construir Seu Pipeline de Dados Potencializado por IA?

Junte-se à nossa comunidade para reivindicar um plano gratuito e conectar-se com desenvolvedores que estão construindo pipelines de imagem e mídia: Discord · Telegram.

Inscreva-se em app.scrapeless.com para obter tempo de execução gratuito do Scraping Browser e adapte os padrões acima para as galerias e CDNs que seu fluxo de trabalho precisa. Veja preços para escalabilidade.

FAQ

Q: É legal raspar imagens de um site?
Coletar imagens visíveis publicamente é geralmente permitido, mas os direitos autorais e os Termos de Serviço do site ainda se aplicam ao uso que você faz delas. Raspe apenas imagens públicas, respeite as licenças, revise os ToS e consulte um advogado para seu caso de uso.

Q: Por que meus valores de src raspados estão em branco ou são pequenos espaços reservados?
Porque as imagens são carregadas de forma assíncrona. Role a página primeiro para que o carregador troque o espaço reservado pela URL real e leia currentSrc/data-src em vez de apenas src.

Q: Como eu lido com galerias de rolagem infinita?
Repita a etapa de rolagem até que document.body.scrollHeight pare de aumentar, então colete — esse é o sinal de que não mais imagens serão carregadas.

Q: Meus downloads retornam 403 mesmo que a URL funcione em um navegador. Por quê?
O CDN está verificando referer/cookies (proteção contra hotlinking). Baixe com um fetch() em página para que a solicitação carregue as credenciais da sessão renderizada.

Q: Como eu obtenho a versão de mais alta resolução?
Analise o srcset bruto e escolha o maior candidato, em vez de currentSrc, que reflete a área de visualização atual.

Q: Eu preciso de um proxy?
Para páginas de imagem públicas, muitas vezes não — mas fixar proxyCountry fornece um IP residencial consistente que páginas ricas em imagens e seus CDNs tratam como um visitante normal.

Q: Posso executar isso sem um agente de IA?
Sim. É apenas Puppeteer sobre a sessão Scrapeless — nenhum agente necessário.