Image Downloader Pro
English
Menu

← Back to the blog

Download Pictures: Fix Missing, Blurry and Duplicate Images

If you need to download pictures, start by checking which image files the rendered page actually loads. Short answer first: if you open a page, use an image tool, and get tiny thumbnails or empty slots, the page is not serving the high-resolution asset at the same HTML path you expect. The fix is to identify how the page presents the full file - via srcset or picture sources, via JavaScript data attributes, or as CSS background assets - then point your downloader to those URLs or trigger the page behavior that loads them. This guide walks you from symptom to diagnosis to the smallest effective fix. This guide uses Image Downloader Pro for that workflow.

1) The real-world scenario

Imagine you’re auditing a product category with 120 SKUs. You open the listing, run a downloader, and get 120 files that are 150 by 150 pixels, or 50 items that are duplicates, or missing items where lazy placeholders appear. You need full-size images for a catalog or visual QA, and downloading everything again by hand is not an option.

2) Common root causes and how they behave

  • Page uses srcset or picture to serve responsive images - the HTML img tag points to a small thumbnail by default but lists larger candidates in srcset or inside <picture> sources. A simple downloader that grabs the img src will pick the small file. See how srcset works on MDN for details. MDN - Responsive images
  • Lazy loading and data-src patterns - scripts store the real URL in data-src, data-srcset, or data-bg attributes and swap them in when the element enters the viewport. If your downloader scans the static HTML, it may never see the swapped URL. Chrome and other browsers show the live attribute after scroll; the devtools network panel shows which file actually downloaded. MDN - Lazy loading
  • High-res images loaded only on product detail - listing pages intentionally show thumbnails; clicking to the detail page triggers a separate request for the high-res master. A mass-downloader must either follow each product link or reconstruct the detail image URL pattern.
  • Images delivered as CSS background-images - not every visual asset is an img element. Background images in CSS or inline styles can be missed unless the tool inspects computed styles or network requests.
  • Infinite scroll or paginated galleries - only visible pages are scanned. If the extension or script only scans the initial DOM without triggering more loads, many items stay undiscovered.
  • Duplicate-looking files - some flows create multiple sizes of the same image; if you download by filename or source path that includes a size token you’ll end up with many near-identical files.

3) Fast checklist - how to decide the minimal fix

Work top-down: check the easiest observable things before trying heavier methods like scripting or following links.

  1. Open DevTools Network tab and reload the page. Do you see high-res image requests when you click thumbnails or scroll? If yes, replicate that action for the downloader.
  2. Inspect an img element in the Elements panel. Does it have srcset, sizes, or data-src? If srcset exists, use those URLs instead of the src attribute.
  3. Scroll slowly or trigger the page’s lazy loader. After the element loads, re-scan the DOM or re-run the extension to pick up swapped-in attributes.
  4. Check if thumbnails link to a detail page that loads the master file. If so, use a mass-scan for links or import the product URLs into your tool to scan each page.
  5. Look for background-image in computed styles. If images are CSS-driven, export network entries instead of DOM img attributes.

4) Exact fixes and when to use them

  • Problem: Your downloader only pulls img src thumbnails
    • Fix: Prefer srcset candidates or picture source URLs. If your tool supports "pick largest candidate" set that option. If you must manually extract, copy the largest URL from the srcset attribute and test it in the browser.
  • Problem: Many items stay blank or show placeholders
    • Fix: Trigger lazy loading before scanning. Scroll the page or use the tool’s "simulate scroll" or "wait for load" option. If the extension has a "Mass Scan" for open tabs or imported links, use it to let the page complete JS work first.
  • Problem: Only detail page has full-res files
    • Fix: Use a two-step scan - extract product links from the listing, then bulk-scan each detail page. This is slower but necessary when the listing intentionally keeps masters off the page.
  • Problem: Assets are in CSS background-image
    • Fix: Use a tool that inspects computed styles or captures network image requests during a full-page render. Many extensions have a "Capture network images" mode for that reason.
  • Problem: Duplicate or many-size files clutter your download
    • Fix: Filter by pixel area or longest dimension, or use a renaming template that encodes size. If your downloader supports visual similarity or duplicate cleanup, run it after the scan to keep one representative file per asset.

5) Decision aid - choose the right scanning mode

Pick one of these modes depending on your immediate need. Each is faster for certain cases.

  • Quick thumbnails audit - DOM scan of img src. Use when you only need to verify presence of images and file names.
  • Full-quality export - follow srcset, picture sources, and detail page links. Use when you need the highest-resolution master.
  • Rendered capture - capture network images during a full page render or scrolling session. Use when CSS backgrounds or JS-inserted images are used.
  • Mass link scan - import a CSV of product pages and let the tool open and scan each page. Use at scale for catalogs.

Pro tip: srcset and picture element choices tell the browser which candidate to request. If you programmatically fetch the raw img src without reading srcset, you will usually get the smallest candidate. Read the srcset attribute or observe the network request to get the actual master. This detail matters because a 150px thumbnail might be a different pathname than the 2000px master. MDN reference on responsive images

6) Two practical examples with exact steps

Example A - Listing page with lazy thumbnails and detail masters

  1. Open the category page, open DevTools Network, enable "Images" filter.
  2. Click one product to open the detail panel and watch which image URLs appear in the Network tab.
  3. If the master was loaded only on click, export the product links and run a Mass Scan that opens each link and waits 500 ms after load to let scripts run.
  4. Configure the downloader to pick the largest srcset candidate or to capture network images.

Example B - Infinite scroll gallery with CSS-sourced images

  1. Open the page, slowly scroll to the bottom until all items load. If scrolling is paginated, click "Load more" until the last page.
  2. Open Elements panel and inspect one tile's computed style for background-image. Copy that URL and test in a new tab.
  3. Use a rendered capture mode or the network-export option so the downloader records CSS background-image downloads as well as img tags.

7) Practical limits and what to expect

Some sites intentionally hide masters by building signed URLs per session, serving images only after an authorized request, or applying anti-scraping measures. No extension can guarantee access to every protected or dynamically hidden asset. If a file only appears after an authenticated API call, you either need legitimate API access or permission to use the images.

8) Quick reference - which browser feature to inspect first

  • Elements panel - check img attributes: src, srcset, sizes, data-src.
  • Network panel - which image URL did the browser actually request?
  • Computed styles - is the image in background-image?
  • Console - are there errors preventing images from loading?

If you want a compact, reproducible process, here is a one-paragraph checklist you can paste into a ticket:

1) Open page, Network tab - filter Images. 2) Trigger the UI that loads large images (click, scroll). 3) Note the largest image request or srcset candidate. 4) Re-scan using a tool mode that reads srcset or captures network images. 5) Run duplicate cleanup by pixel area.

For more on how browsers pick an image candidate from srcset and sizes, see MDN's responsive images guide. For practical advice watching what the page actually requests during render, the Chrome DevTools network documentation is a helpful reference. Chrome DevTools - Network

If you want to try a tool that follows this decision order, Image Downloader Pro supports deep page scanning with lazy-loaded image support, filters for dimensions and pixel count, mass scan for tabs and imported links, and duplicate cleanup. Try a focused scan mode that captures network images when thumbnails are not enough. Learn more in the docs or try the extension now.

Useful links: Image Downloader Pro and Image Downloader Pro documentation. See also our related guide on extracting high-resolution image sets for e-commerce audits: Image Downloader: Extract High-Resolution Image Sets.