How to Capture a Screenshot of a Website with Lazy-Loaded Images in Chrome DevTools

To capture a full website page in Chrome DevTools without missing lazy-loaded images, open Device Mode, scroll through the page to trigger offscreen images, wait for them to render, then choose More options → Capture a full size screenshot. The full-size command captures content outside the viewport, but it does not guarantee that every site’s lazy-loading code has fetched every image. Scroll, verify, and review the saved screenshot.

1. Trigger lazy-loaded images before capture

1. Open the page in Chrome, then open DevTools with F12 or Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS.
2. Turn on Device Mode using the device toolbar button in DevTools, or Ctrl+Shift+M / Command+Shift+M. Choose a viewport or device configuration if the screenshot should represent a particular screen size. Device Mode emulates a viewport; it does not make every site behave exactly like a physical device.
3. Let the initial content settle. Scroll down the page in manageable increments. Pause when new image areas appear so the browser can request and render them. Continue to the bottom, then revisit areas where images appeared late.
4. Check for missing, blank, or still-loading images. If necessary, inspect an image element in the Elements panel and check its complete property in the Console. For example, select the image in Elements so it is available as $0, then run $0.complete. This reports whether that individual image has completed loading; it does not guarantee that the image loaded successfully or that every image on the page is ready.
5. In Device Mode, open More options and select Capture a full size screenshot. Find the saved image in the browser’s download location and inspect it, especially the bottom of long pages and areas that loaded late.

Chrome documents the full-size screenshot command as a way to include content outside the viewport. The scrolling and review steps are a practical way to trigger deferred resources: lazy loading commonly postpones offscreen resources until they approach the viewport. Chrome does not promise that the screenshot command itself triggers every page’s custom lazy loader.

2. Choose the right DevTools capture

Goal	DevTools workflow	What it tells you
Save the whole page	Device Mode → More options → Capture a full size screenshot	A full-page image, including content outside the viewport. Scroll first if the page defers images.
Save only what is visible	Device Mode → More options → Capture screenshot	The current viewport, not the entire document.
Inspect the loading sequence	Network panel → enable Capture screenshots in Network settings → reload with Network focused	Thumbnails associated with moments during load, useful alongside network activity. This is a diagnostic sequence, not the full-page capture command.
Inspect visual changes across a recording	Performance panel → enable Screenshots before recording	Screenshots for recorded frames, useful for diagnosing rendering changes rather than producing a final full-page image.

For a cold-load investigation, Chrome’s Network panel offers cache controls, including disabling cache while DevTools is open and using Empty Cache And Hard Reload. Clearing cache is not required for an ordinary screenshot; use it when you specifically need to investigate first-visit behavior.

3. Check whether images are ready

A page’s load event is not proof that every lazy-loaded image has loaded. Offscreen images may not have been requested yet. MDN documents the image element’s Boolean complete property as a way to check an individual image’s loading state.

To inspect the selected image, select it in Elements and run this in the Console:

$0.complete

For a quick diagnostic of all image elements currently in the document, run:

[...document.images].map((img) => ({
  src: img.currentSrc || img.src,
  loading: img.loading,
  complete: img.complete,
  width: img.naturalWidth,
  height: img.naturalHeight
}));

complete can be true when an image has finished loading or when loading has failed, so inspect naturalWidth as well: a zero width is a sign the image did not produce an image resource. The snippet only checks image elements present in the DOM at the moment it runs. If scrolling or page scripts add more elements later, scroll again and repeat the check. For background images or custom placeholders, inspect the relevant CSS and page behavior too; document.images does not include CSS backgrounds.

4. Handle pages that keep changing

• Images load just before or after capture: pause after each new section comes into view and revisit areas with late loads. If the page is still shifting, wait until it settles and inspect again.
• Infinite scroll: keep scrolling to the point you intend to include, allowing each newly added section to appear. A full-size capture can only capture content that the page has created and laid out; it cannot capture unseen, never-loaded items.
• Interaction-gated content: click or expand the relevant control if the content only appears after interaction. Check that the interaction did not leave a menu or overlay covering the page.
• Sticky headers and overlays: review the final screenshot for repeated sticky elements, cookie dialogs, chat bubbles, or other overlays. DevTools captures the rendered page state; dismiss or handle overlays if the intended result should not include them.
• Responsive image changes: select the intended viewport before triggering loads. Sites may choose different image sources or layouts at different viewport widths.

5. Troubleshooting

Problem	Likely cause	What to do
Images below the fold are blank	The page deferred the requests until those images approached the viewport.	Scroll through the page in increments, pause for rendering, revisit late areas, and capture again.
The page says it loaded, but images are still missing	The window load event does not establish that lazy-loaded images are ready.	Check individual images with complete and naturalWidth, and inspect the screenshot visually.
complete is true but the image is blank	The image may have failed; complete alone is not a success indicator.	Check naturalWidth, the image URL, and the Network panel for a failed request.
Some images remain absent after scrolling	The site may use custom JavaScript, a different visibility threshold, interaction, or an image source outside ordinary <img> elements.	Scroll farther and revisit; inspect the element, its CSS, and Network activity. There is no universal scroll sequence that activates every custom implementation.
The screenshot contains only the visible screen	The viewport screenshot command was selected.	Use Capture a full size screenshot in Device Mode.
The screenshot has unexpected layout or repeated elements	Sticky elements, animations, late layout shifts, or overlays changed the rendered page.	Wait for the page to settle, inspect the affected section, dismiss unwanted overlays, and recapture.
New page sections keep appearing	The site uses infinite scroll or adds content as the visitor scrolls.	Continue until the intended content has been added, then verify the bottom before capture.

6. Reliability, performance, and cost

DevTools is a useful manual option when you need to inspect a page and capture it from your current browser session. Long pages can take extra time because you must trigger deferred content and verify it. Repeating the same viewport, load condition, interactions, and scrolling pattern helps make captures more consistent, but site changes and network conditions can still affect the result.

For first-visit behavior, disabling cache and hard-reloading can make the page request resources again, but it can increase load time and network use. It is a diagnostic choice, not a prerequisite. DevTools itself is included with Chrome; this workflow has no ScreenshotNeo API charge. For repeatable, automated capture or captures that should clean consent and popup overlays, an API can avoid manual browser steps.

7. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return an image or PDF, and its full-page capture loads lazy images. Cookie banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with the page verdict and billing status reported in response headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.

Get an API key and see the ScreenshotNeo docs. Example request:

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

Equivalent Python request:

import requests

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

Equivalent Node.js request:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Sign up for free and capture up to 1,000 screenshots a month with no card.

FAQ

Does full-size capture automatically load lazy images?

Do not rely on it to do so. Scroll through the page first, then verify the areas that loaded late.

Should I use Network screenshots to save the whole page?

No. Network-panel screenshots help inspect page appearance during loading. Use Device Mode’s full-size screenshot command for a final whole-page image.

Can Chrome capture content that appears only after scrolling or clicking?

Scroll or interact to make the site create and render that content first. Review the result because custom site behavior can vary.

Sources

• Chrome for Developers: Simulate mobile devices with Device Mode
• MDN: Lazy loading
• MDN: The <img> element
• Chrome for Developers: Network features reference
• Chrome for Developers: Inspect network activity
• Chrome for Developers: Performance features reference