Se você precisa baixar imagens do site para um catálogo, auditoria visual ou moodboard, comece checando quais arquivos a página realmente carrega no navegador. Se ao rodar uma extensão você obtiver miniaturas de 150x150, arquivos repetidos ou espaços em branco, o site provavelmente não está servindo o ativo em alta resolução no mesmo atributo img src que você espera. Este artigo mostra como diagnosticar o problema e aplicar correções práticas. Este guia usa o Image Downloader Pro nesse fluxo de trabalho.
O cenário que se repete
Imagine auditar uma categoria com 120 SKUs: você roda a extensão e recebe 120 imagens 150x150 ou 50 arquivos idênticos, ou faltam itens onde aparecem espaços reservados. Fazer todo o download manualmente não é viável. A solução é identificar como a página apresenta o arquivo em tamanho completo - via srcset ou elemento picture, atributos de JavaScript, ou como background-image em CSS - e então apontar sua ferramenta para essas URLs ou acionar o comportamento que carrega as imagens maiores.
Principais causas e como elas se comportam
- Uso de srcset ou picture - o atributo img src pode apontar para uma miniatura enquanto srcset lista candidatos maiores. Ferramentas que pegam apenas img src ficam com o menor arquivo. Consulte a referência de imagens responsivas no MDN para entender a sintaxe: MDN - Responsive images.
- carregamento adiado (lazy loading) e data-src - scripts mantêm a URL real em data-src, data-srcset ou atributos semelhantes e trocam quando o elemento entra na viewport. Se sua varredura só lê o HTML estático, ela pode nunca ver a URL trocada. O MDN explica como o carregamento adiado funciona: MDN - Lazy loading.
- original em alta resolução carregado apenas na página de detalhe - listagens mostram miniaturas; abrir o produto solicita o original em alta resolução. Nesse caso é preciso seguir os links ou reconstruir o padrão de URL dos detalhes.
- Imagens como background-image - nem todo recurso visual é um elemento img. Imagens de fundo em CSS exigem inspeção dos estilos computados ou da aba Rede (Network).
- Rolagem infinita ou paginação - se sua extensão só varre o DOM inicial, itens carregados via scroll ou “carregar mais” ficam de fora.
- Arquivos duplicados por tamanhos - servidores oferecem múltiplas versões. Se você baixa por nome que contém token de tamanho, vai obter vários arquivos parecidos.
Checklist rápido para decidir a correção mínima
Comece pelos passos mais simples antes de partir para scripting ou varredura de todos os links.
- Abrir DevTools na Rede e recarregar a página aplicando o filtro de imagens. Veja se existem requests em alta resolução ao clicar ou rolar.
- Inspecionar um elemento img no painel Elementos (Elements). Há srcset, sizes ou data-src? Se houver srcset, prefira esses URLs ao invés do src.
- Rolar a página para acionar o carregamento adiado. Depois que o elemento carregar, revarrer o DOM ou executar a extensão novamente.
- Checar se as miniaturas levam a uma página de detalhe que carrega o original em alta resolução. Se sim, exportar os links e fazer um scan por página de produto.
- Procurar por background-image em estilos calculados (computed style). Neste caso capturar os requests da rede.
Correções precisas e quando aplicá-las
- Problema: ferramenta pega apenas img src com thumbnails
- Correção: use os candidatos do srcset ou as fontes do picture. Configure a ferramenta para “pegar o maior candidato” ou extraia manualmente a maior URL do srcset e teste no navegador.
- Problema: espaços reservados ou espaços em branco
- Correção: dispare o lazy loader antes de escanear. Role a página, use a opção de “esperar carregamento” ou o modo “simulate scroll”.
- Problema: só tem original em alta resolução na página de detalhe
- Correção: faça uma varredura em duas etapas - extraia os links da listagem e escaneie cada página de produto. Mais lento, mas necessário quando o site esconde os originais em alta resolução.
- Problema: imagens em CSS
- Correção: use modo de captura que observa requisições de rede ou inspeção de estilos computados. Muitas extensões têm um modo “capturar imagens da rede”.
- Problema: muitos tamanhos e duplicados
- Correção: filtre por área em pixels ou pela maior dimensão. Use templates de renomeação que incluam o tamanho e rode limpeza de duplicatas por similaridade visual.
Modos de varredura e quando escolher cada um
- Auditoria rápida de miniaturas - varredura do DOM em img src. Rápido para checar presença e nomes.
- Exportação em full quality - segue srcset, picture e links de detalhe. Use quando precisa do original em alta resolução.
- Captura renderizada - registra imagens que aparecem durante o render ou ao rolar a página. Essencial quando há CSS backgrounds ou imagens injetadas por JS.
- Varredura de links em massa - importe um CSV com URLs de produto e deixe a ferramenta abrir e escanear cada página. Indicada para catálogos grandes.
Observação técnica: Ler apenas o atributo img src normalmente retorna o menor candidato. Para garantir o arquivo maior, leia srcset ou observe o pedido de rede que o navegador fez. Verifique a documentação do Chrome DevTools para entender como inspecionar essas requisições: Chrome DevTools - Network
Dois exemplos práticos com passos exatos
Exemplo A - página de listagem com miniaturas com carregamento adiado e originais em alta resolução na página de detalhe
- Abrir a página da categoria, abrir a aba Rede no DevTools e filtro de imagens (Images).
- Clicar num produto para abrir o detalhe e observar quais URLs aparecem na aba Rede.
- Se o original em alta resolução só carregar no detalhe, exportar os links e rodar uma varredura em massa que espere 500 ms após o carregamento para scripts completarem.
- Configurar a extensão para escolher o maior candidato do srcset ou para capturar imagens de rede.
Exemplo B - galeria com infinite scroll e imagens via CSS
- Rolar até o fim até carregar todos os itens. Se houver botão "Carregar mais", clicar até o fim.
- Inspecionar um tile e verificar estilos calculados para background-image. Copiar a URL e abrir em nova aba.
- Usar o modo de captura renderizada ou exportar as requisições de rede para obter esses arquivos.
Limites práticos
Alguns sites assinam URLs por sessão, servem imagens apenas via chamadas autenticadas ou aplicam medidas anti-scraping. Nenhuma extensão garante acesso a ativos protegidos. Se um arquivo só aparece após uma chamada API autenticada, você precisará de acesso legítimo à API ou permissão para usar os arquivos.
Referências e próximos passos
Para entender como o srcset e sizes influenciam a escolha do navegador, consulte MDN: MDN - Responsive images. Para aprender a inspecionar solicitações de rede em páginas renderizadas, veja a documentação do Chrome DevTools: Chrome DevTools - Network.
Se quiser experimentar uma ferramenta que segue essa ordem de decisão - suportando srcset, lazy-load, captura de rede, varredura em massa e limpeza de duplicatas - experimente o Image Downloader Pro em português: https://imagedownloaderpro.com/pt-br/. A documentação local está disponível aqui: https://imagedownloaderpro.com/docs/pt-br/.
Lista prática resumida para colar em um ticket
- Abrir página com Rede - filtrar Images.
- Acionar UI que carrega original em alta resolução (clicar/rolar).
- Identificar maior request ou candidato do srcset.
- Revarrer usando modo que lê srcset ou captura rede.
- Remover duplicatas por área em pixels.