Capture Product Screenshots with Lazy Loaded Images

This guide shows you how to capture full-page product screenshots on websites that use lazy loading, where images load only as you scroll. You’ll learn the exact steps to ensure every image appears in your capture, using browser developer tools and built-in screenshot features. No extra software is needed—just a modern browser like Chrome, Edge, or Firefox.

What You’ll Need

• A computer with a modern web browser (Chrome, Edge, Firefox, or Safari).
• The URL of the product page you want to capture.
• Basic familiarity with right-clicking and using browser menus.

Step-by-Step

1. Open the product page in your browser. Wait for the initial content to appear; don’t scroll yet.
2. Open Developer Tools by pressing F12 (Windows) or Cmd+Option+I (Mac). Alternatively, right-click anywhere on the page and select “Inspect”.
3. Enable the device toolbar if you need a specific viewport size. Click the icon that looks like a small tablet/phone (or press Ctrl+Shift+M / Cmd+Shift+M). Choose a device preset or set a custom width/height.
4. Open the command menu by pressing Ctrl+Shift+P (Windows) or Cmd+Shift+P (Mac). This opens a searchable list of DevTools commands.
5. Type “capture full size screenshot” in the command menu. Select the option that appears (usually “Capture full size screenshot”). This will automatically scroll the page, wait for lazy images to load, and then save a PNG file to your downloads folder.
6. If the screenshot is missing some images (because they loaded too slowly), you need to force all images to load first. Go back to the page (without scrolling) and run the following JavaScript in the Console tab: window.scrollTo(0, document.body.scrollHeight); then press Enter. Wait a few seconds, then run window.scrollTo(0, 0); to scroll back to top.
7. Repeat the capture command (Step 5) after forcing the scroll. The new screenshot should now include all lazy-loaded images.
8. If you’re using Firefox, the process is slightly different. Right-click on the page, select “Take Screenshot”, then choose “Save full page” from the toolbar that appears. Firefox automatically scrolls and waits for images to load.
9. For Safari, you’ll need to enable the “Develop” menu (Safari > Settings > Advanced > Show features for web developers). Then use the “Capture Full Page” option in the Develop menu (available in Safari 17+).
10. Verify the screenshot by opening the saved PNG and checking that all product images, including those below the fold, are present. If any are missing, repeat the scroll-and-capture process with a longer wait time.

Common Mistakes

• Not waiting for images to load: The full-page capture command sometimes takes the screenshot before lazy images finish loading. Always wait a few seconds after triggering the capture.
• Using the regular screenshot tool: A normal screenshot (like Print Screen or the browser’s “Capture screenshot” option) only captures the visible viewport, not the full page.
• Scrolling manually before capturing: If you scroll down and then use “Capture full size screenshot”, the browser may only capture from the current scroll position, cutting off the top of the page.
• Forgetting to enable the device toolbar: If you want a specific width (e.g., mobile view), you must set it before capturing. Otherwise, the screenshot uses the current window size.
• Using an outdated browser: Older browsers may not support full-page screenshots or may handle lazy loading differently. Update your browser to the latest version.

Tips

• Use a fixed viewport height: If you’re capturing multiple products, set a consistent viewport size (e.g., 1280×800) to make the screenshots uniform.
• Disable lazy loading for testing: In DevTools, you can disable images entirely and then re-enable them to see which ones are lazy. Or use the Network tab to throttle the connection and see how images load.
• Use the “Capture node screenshot” command: If you only need a specific product image, right-click on it in DevTools, select “Inspect”, then right-click the highlighted element in the Elements panel and choose “Capture node screenshot”. This captures just that element.
• Automate with a script: For repeated captures, you can write a simple JavaScript snippet that scrolls through the page, waits for images to load, and then triggers the capture. However, the manual method works fine for occasional use.
• Check the file size: Full-page screenshots of long pages can be very large. If the file is too big to share, consider using an image compression tool.

Troubleshooting

Screenshot is blank or incomplete: This often happens if the page uses infinite scrolling or dynamic content that doesn’t load until you scroll. Try the manual scroll method (Step 6) and wait longer (5-10 seconds) before capturing.

Command menu doesn’t show “Capture full size screenshot”: Make sure you have the latest version of Chrome or Edge. If it’s still missing, try using the keyboard shortcut Ctrl+Shift+P and type “screenshot” to see all available options.

Images are blurry or low resolution: Some sites serve small placeholder images that are replaced with high-res versions only when they enter the viewport. The full-page capture should use the high-res versions, but if not, try zooming out (Ctrl+minus) before capturing, then zoom back in.

The capture takes too long or the browser freezes: This can happen on very long pages with many images. Close other tabs, wait a bit, or try capturing in sections (scroll to a section, wait, capture, then scroll further).

Firefox’s “Save full page” option is greyed out: This usually happens on pages with dynamic content that can’t be captured in one go. Try using the DevTools method (Steps 4-5) in Firefox instead, as it works similarly to Chrome.

Lazy images are still missing after scrolling: Some sites require a user interaction (like clicking a “Load more” button) to fetch additional images. If that’s the case, click those buttons manually before capturing.

Frequently Asked Questions

Why do some images not appear in the full-page screenshot?

Lazy-loaded images are only fetched when they scroll into the viewport. If the browser captures the screenshot before the images load, they’ll be missing. The scroll-and-capture method forces all images to load first.

Can I capture a full-page screenshot on a mobile phone?

Yes, but the process varies by browser. In Chrome for Android, you can use the “Capture full page” option in the three-dot menu. On iOS Safari, you can use the “Full Page” option when taking a screenshot (iOS 13+). However, the DevTools method is only available on desktop.

Does this work on any website?

It works on most websites, but some sites use complex JavaScript that may not load all content even after scrolling. In those cases, you may need to use a dedicated screenshot tool or a browser extension.

Will the screenshot include pop-ups or cookies banners?

Yes, if they are visible when the capture is taken. To avoid them, dismiss any pop-ups or banners before capturing. You can also use DevTools to hide them temporarily by adding CSS rules.

How do I capture a specific section of the page instead of the whole thing?

Use the “Capture node screenshot” method described in Tips. Right-click on the element in DevTools, select “Inspect”, then right-click the highlighted code and choose “Capture node screenshot”.

Is there a way to automate this for many pages?

Yes, you can use browser automation tools like Puppeteer (for Chrome) or Playwright. They allow you to script the scrolling and capture process. This is useful if you need to capture many product pages regularly.

Related

• Selenium 4 Java End-to-End Tests: Step-by-Step
• Evaluate RISC-V for Automotive Processor Designs
• Manhattan in Control Resonant: Charge Central Checkpoint