How to Capture Images That Load Dynamically on a Web Page

To capture images that load dynamically as you scroll, first scroll through the page in manageable increments and wait until each target image is visibly loaded. Then take the full-page screenshot. A full-page setting captures the page’s current scrollable extent; it does not necessarily trigger content that the page has not loaded yet. On infinite-scroll pages, continue scrolling until the portion you need has been fetched.

For repeatable captures, use browser automation such as Playwright: scroll through the relevant content, wait for a page-specific signal that the images are ready, then take a full-page or element screenshot. A quiet network alone is not proof that the desired images have rendered.

Why images are missing from long screenshots

Pages often defer loading offscreen images until they approach the viewport. This saves work when a visitor does not scroll all the way down. As a result, an initial screenshot can include blank areas where image elements exist but their image requests or rendering have not happened yet.

There are two separate steps: triggering the page to fetch or reveal content, and capturing the page. A full-page screenshot addresses the second step. Scrolling, waiting, or interacting with the site may be necessary for the first. The exact trigger and delay vary with the site’s code, browser, connection, cache, and other page behavior.

Manual browser workflow

Open the page and wait for its initial content to appear.
Scroll down in manageable increments so offscreen images approach or enter the viewport.
Pause at sections with images that are still loading. Check that the actual image content appears; elapsed time alone is not a reliable readiness check.
Continue to the bottom of the content you want. For infinite scroll, keep scrolling until the page has fetched the intended portion.
Use your browser’s full-page screenshot feature or a scrolling screenshot utility.
Inspect the result. If an image area is blank, return to that location, wait for the image to appear, and capture again.

If the page needs a click, selection, or other interaction to reveal an image, perform that action before capturing. This workflow does not guarantee that a site’s scripts, authentication requirements, or anti-automation behavior will allow every image to load.

Automate the capture with Playwright

Playwright supports full-page screenshots and screenshots of individual elements. Scroll first to trigger deferred content, check a meaningful condition for the images or application state you need, and then capture.

import { chromium } from 'playwright';

const url = 'https://example.com/page';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1365, height: 900 } });

try {
  await page.goto(url, { waitUntil: 'domcontentloaded' });

  // Scroll by viewport-sized steps to trigger content near the viewport.
  await page.evaluate(async () => {
    const step = Math.max(300, Math.floor(window.innerHeight * 0.8));
    for (let y = 0; y < document.documentElement.scrollHeight; y += step) {
      window.scrollTo(0, y);
      await new Promise(resolve => setTimeout(resolve, 300));
    }
    window.scrollTo(0, document.documentElement.scrollHeight);
  });

  // Example readiness check: wait for all currently rendered images to finish.
  // Replace or extend this with checks for the site's actual target content.
  await page.waitForFunction(() => {
    const images = [...document.images];
    return images.length > 0 && images.every(img => img.complete && img.naturalWidth > 0);
  }, { timeout: 30000 });

  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

Install Playwright in your project with npm install playwright. The code is a starting point, not a universal recipe: pages with infinite scroll may add new items after each scroll, and some pages contain intentionally broken images or hidden images that should not be part of the readiness condition. For those pages, use a site-specific condition such as a known image selector becoming visible, a target image’s naturalWidth becoming nonzero, or an expected item count being reached.

Capture one element instead of the whole page

When only one image or section matters, scroll it into view and take a locator screenshot. This avoids producing an unnecessarily tall file.

const target = page.locator('.article-hero img');
await target.scrollIntoViewIfNeeded();
await target.waitFor({ state: 'visible' });
await page.waitForFunction(() => {
  const img = document.querySelector('.article-hero img');
  return img instanceof HTMLImageElement && img.complete && img.naturalWidth > 0;
});
await target.screenshot({ path: 'hero.png' });

Choose a selector that identifies the intended image or region on the target page. A generic image selector may match icons, tracking pixels, or images that are not relevant to the capture.

Choose a readiness check that matches the page

One known image: wait for its selector and confirm the image has completed with a nonzero natural width.
A list or feed: wait for the expected number of items, or for a page-specific end-of-results marker.
An app-rendered image: wait for the application state or container that indicates the image is ready.
Animations: wait for the relevant animation to finish or use a page-specific stable state before capture.

Playwright’s documentation marks networkidle as discouraged for readiness checks. A page can keep making background requests after the images are ready, or become quiet before the image you need has rendered. Prefer a web assertion or explicit condition tied to the target content. See the Playwright Page API for screenshot and load-state details.

Diagnose loading with Chrome DevTools

When you need to find out whether an image request happened late, Chrome DevTools can record screenshots during page loading and correlate them with network activity.

Open DevTools and select the Network panel.
In the Network panel settings, enable screenshot capture.
Keep the panel focused and reload the page.
Hover over a screenshot thumbnail to locate its point in the loading timeline. Select a thumbnail to filter requests that occurred after that frame.
Look for the target image request and compare its timing with when the image appears in the recorded frames.

To approximate a first-time visit, disable the cache in DevTools before reloading. A repeat visit may use cached image resources and hide the timing problem. See the Chrome DevTools Network reference for panel behavior and controls.

Handle infinite scroll and long pages

Infinite-scroll pages load more content in response to scrolling. A full-page capture only includes the extent the page currently has; it cannot include items the page has not fetched or added to the document.

Scroll near the bottom of the currently loaded content.
Wait for new items to appear, using a selector, item count, or end-of-results marker when automating.
Repeat until the required content is present or the site indicates there is no more.
Check that the images in the loaded portion have rendered, then capture.

Set a practical stopping condition. Some feeds continue indefinitely, and a script that scrolls until the page stops growing can run forever if the site continually adds content. Limit the number of iterations or stop at a known item count or target section.

Choose the right capture method

Need	Good fit	Keep in mind
One-off capture of a page	Manual scrolling and a browser full-page screenshot	Visually verify that the target images loaded.
Repeatable captures	Playwright with scrolling and page-specific readiness checks	Page behavior can change; maintain selectors and stopping conditions.
Only one image or section	Playwright locator screenshot	Wait for the target element and its image content, not just the page.
Find out when requests happen	Chrome DevTools Network screenshots	This diagnoses loading; it is not itself a capture workflow.

Performance, reliability, and cost considerations

Scroll increment: smaller increments with pauses can trigger viewport-dependent loading more reliably, but take longer. Large jumps may skip site-specific triggers.
Wait strategy: fixed delays are simple but can waste time or be too short on a slow connection. Prefer a condition tied to the target image or content.
Page size: full-page screenshots of very long pages can require substantial memory and produce large files. Capture a target element or split the work into sections if a single image is impractical.
Repeatability: network speed, cache state, page scripts, and content changes can affect results. Use explicit checks and inspect output when captures matter.
Cost: a local browser automation workflow has no screenshot API charge, but uses compute and engineering time. Hosted services may charge by usage; check their current terms and billing behavior before adopting one.

Common problems and fixes

Symptom	Likely cause	Fix
Blank image areas in a full-page screenshot	The image was below the viewport and had not been triggered or rendered.	Scroll to it, wait until the image visibly appears, and capture again.
Screenshot ends before the content you expect	The page had not fetched later infinite-scroll items.	Continue scrolling and wait for new items before capturing.
Script finishes but the image is still missing	The script waited for navigation or network quiet rather than the target image.	Wait for the target selector and verify its image has loaded; avoid relying only on `networkidle`.
Readiness check times out	A matched image may be hidden, intentionally broken, or unrelated; the page may also be blocked or require interaction.	Narrow the selector to required content, allow known exceptions, and inspect the page and Network panel.
Some images appear only after revisiting	Scrolling may have skipped the site’s trigger region, or rendering may be delayed.	Use smaller scroll steps, pause near the target, and confirm the image before capturing.
Automation produces inconsistent output	The page, network, cache, or asynchronous behavior varies between runs.	Use page-specific readiness signals, a bounded retry for transient loads, and a consistent cache setup.
Capture takes too long or output is unwieldy	The page is extremely long or the script waits on every image, including irrelevant ones.	Capture only the required element or section and check only relevant images.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return a screenshot or PDF; its full-page capture loads lazy images. For this page, use the full-page option documented in the ScreenshotNeo API docs alongside the request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/page'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed; response headers report the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does full-page capture automatically load every lazy image?

No. It captures the current page extent. Trigger scroll-dependent loading and verify the needed images first.

Should I wait a fixed number of seconds?

A short pause can help after scrolling, but a page-specific check is more reliable because load time varies.

Can I capture only one image?

Yes. Scroll the image into view, wait for it to load, and capture its element or containing section.

Why does the same script work on one site but fail on another?

Sites use different triggers, rendering code, and loading behavior. Adjust scroll steps, selectors, and readiness checks for each page.