Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use the browser’s native full-page capture first. In Playwright, call page.screenshot({ fullPage: true }); in Puppeteer, use the equivalent fullPage: true option. This captures the scrollable document with far less code and fewer seam errors than manually joining viewport images. Choose scroll-and-stitch only when you need tile-level control, custom overlap rules, or a page that cannot be represented reliably as one captured surface.
What “full-page screenshot” actually means
A full-page screenshot is an image of the entire scrollable document, not just the pixels currently visible in the browser window. The browser renders a page that may be thousands of CSS pixels tall and returns one image (or a controlled set of tiles) representing that document.
That distinction matters because a screenshot can be technically complete but visually inconsistent. Lazy-loaded images may not have loaded, a sticky header can appear repeatedly in a stitched image, an animation can change between tiles, and a high-DPI setting can make output dimensions much larger than expected. The algorithm is therefore only part of the result; rendering conditions and page state are equally important.
Decide which capture algorithm fits the page
| Algorithm | Best use | Advantages | Risks and costs |
|---|---|---|---|
| Native full-page surface capture | Ordinary pages that the browser can render as one scrollable document | Minimal code, no seam calculations, consistent browser layout | Less control over individual tiles; unusual scroll containers or effects may still cause problems |
| Scroll-and-stitch tiling | Explicit viewport tiles, custom overlap or seam policies, or a fallback when one-surface capture is unreliable | Control over tile size, overlap, masking and retries | Must handle fixed and sticky elements, nested scrollers, fractional pixels, lazy loading and changing content |
| Element or clipped-region capture | A component, article, chart or bounded region rather than the entire document | Smaller output and faster processing; avoids irrelevant page areas | Not a full-document image; the region must be identified precisely |
Default: native capture
Start with the browser-native operation. Playwright’s fullPage option is defined as capturing the full scrollable page instead of only the visible viewport. Puppeteer exposes the same core option. Native capture lets the browser’s layout engine determine the surface, so your application does not have to calculate scroll positions or merge images.
Use stitching for a reason
Stitching is justified when your product requires viewport-sized tiles, a known overlap policy, per-tile processing, or recovery from a page where native full-page capture is unreliable. Treat it as an engineering subsystem, not a longer screenshot call: define how tiles overlap, how seams are detected, how fixed elements are removed, and what happens when the document changes during capture.
#1 Best Overall
- Record videos and take screenshots of your computer screen including sound
- Highlight the movement of your mouse
- Record your webcam and insert it into your screen video
- Edit your recording easily
- Perfect for video tutorials, gaming videos, online classes and more
Capture an element when the requirement is bounded
If the deliverable is a card, report, table or other component, capture that element or a clip rectangle. A bounded capture is usually easier to compare and much smaller than an unnecessarily tall document image.
Playwright: a reliable native full-page implementation
The following Node.js example fixes the viewport, waits for the page to settle, disables motion, hides the caret and writes a WebP image. Remove the style rules only if the animation or caret is part of what you are testing.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.evaluate(() => document.fonts?.ready);
await page.addStyleTag({ content: `
*, *::before, *::after {
animation: none !important;
transition: none !important;
caret-color: transparent !important;
}
` });
await page.screenshot({
path: 'page.webp',
fullPage: true,
type: 'webp',
quality: 85,
scale: 'css'
});
await browser.close();Use scale: 'css' when one output pixel per CSS pixel makes comparisons easier. Use device-pixel scaling when the image must preserve physical-pixel detail for a target display. Playwright also supports PNG and JPEG, plus masking and mask colors for volatile regions.
When to wait beyond network idle
networkidle only tells you that network activity has quieted at that moment. A single-page application may render data afterward, and an image may be requested only after scrolling. Wait for a meaningful selector, an application-ready flag or a known delay in addition to network idle. For lazy content, scroll through the document before the final capture, then return to the top and capture.
Puppeteer: the equivalent native operation
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 1 });
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.evaluate(() => document.fonts?.ready);
await page.addStyleTag({ content: `
*, *::before, *::after {
animation: none !important;
transition: none !important;
caret-color: transparent !important;
}
` });
await page.screenshot({ path: 'page.png', fullPage: true });
await browser.close();Puppeteer also exposes captureBeyondViewport. That option is useful for clipped screenshots that extend beyond the viewport; it is not a replacement for choosing the right full-page or clip strategy.
Rank #2
- Works on Windows 11, 10, & 8
- Build a Professional Resume Fast with the step-by-step guide to help you create a professional resume that showcases your unique experience and skills
- ResumeMaker & Resume Maker are registered trademarks & box images and screenshots are copyrights of Individual Software Inc.
- Modern Resume Styles - Choose from 60 styles and customize any style with choice of header, colors, graphics and a photograph plus Powerful Ways to Search for Jobs
- Video Resumes & Expert Advice - View Sample Video Resumes and video resume scripts you can customize plus Email & Share Your Resume on LinkedIn, Facebook & Twitter
If you must scroll and stitch
A robust stitcher captures a sequence of viewport-sized tiles and composites them into a canvas. The high-level procedure is:
- Freeze the capture contract. Set viewport width and height, browser version, device scale and output format. Record these values with the image.
- Measure the document. Read the relevant scroll container’s scroll height and client height. Do not assume the root document is the only scroller.
- Prepare the page. Wait for fonts, application data and images. Disable animations and blinking carets. Decide whether sticky navigation should appear once, on every tile, or be removed.
- Scroll by controlled distances. Use integer CSS-pixel positions, allow rendering to settle after each move, and account for nested scroll containers.
- Capture overlapping tiles. An overlap gives you pixels to compare at a seam and helps compensate for fractional device pixels. Keep the overlap policy deterministic.
- Normalize fixed and sticky elements. Hide them, mask them, or subtract their repeated area before compositing. Otherwise a fixed header can be duplicated down the final image.
- Composite and validate. Place each tile at its measured document offset, crop overlap areas according to your policy, and inspect seams. Fail the job if the page height or key landmarks changed during capture.
There is no universal first-party stitching algorithm that defines all of these decisions. Document your overlap, masking and retry rules and test them against the pages your application actually captures.
Sticky headers, lazy loading and volatile UI
Sticky and fixed elements
A sticky element belongs to document flow but changes position after a threshold; a fixed element remains attached to the viewport. Native full-page capture often handles the document surface naturally, while stitching observes the element in every viewport. Decide the intended output before implementation: one header at the top, a repeated header on every tile, or no header.
Lazy-loaded images
Images loaded by an intersection observer may not exist until their section enters the viewport. Scroll through the page to trigger them, wait for image completion, and then capture. If content is still changing, record the final scroll height again; otherwise later tiles can be offset from the content they are meant to represent.
Animations, timers and overlays
Freeze CSS animations and transitions where possible. Hide or mask rotating ads, timestamps, chat widgets, notification toasts and carets. Playwright’s injected style, mask, maskColor and caret controls are designed for this normalization. A mask is preferable to deleting content when layout must remain unchanged.
CSS pixels, device pixels and high-DPI output
CSS pixels describe layout; device pixels describe the bitmap. With CSS scaling, one output pixel corresponds to one CSS pixel. With device scaling, one CSS pixel can become two or more output pixels on a high-DPI configuration. A 1440-pixel-wide viewport can therefore produce an image roughly twice as wide when the device scale factor is 2.
Rank #3
- Works on Windows 11, 10 & 8
- Kids ages 6 to 12 and older kids to adults learn to type on exciting adventures outside the classroom
- Both typing programs provide rewards every step of the way and learn in English or spanish
- Teaches keyboard basics following an age appropriate typing plan
- Typing Instructor is a registered trademark & box images and screenshots are copyrights of Individual Software Inc.
- Choose CSS scale for smaller, comparable visual-regression artifacts.
- Choose device scale when physical-pixel fidelity is required for a target display or print workflow.
- Keep the scale fixed between baseline and comparison runs.
- Set an explicit viewport; do not inherit a developer laptop’s display setting.
Also pin the browser and operating-system versions, fonts and locale. Font substitution changes line wrapping, which changes page height and every tile below the changed line.
Output format, size and performance
PNG preserves lossless pixels and is useful for visual diffs with sharp text. JPEG is smaller but introduces compression artifacts. WebP can reduce transfer and storage size while retaining quality controls in Playwright. Pick one format and quality setting for all comparison runs.
Full-page images can become very tall. Estimate memory from width × height × channels before allocating a stitching canvas, and impose a maximum document height or pixel count. For extremely long pages, capture sections or store tiles rather than creating one enormous bitmap. Element captures are usually the most efficient option when the consumer does not need the whole document.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchNative capture generally uses fewer application-level operations than stitching. Stitching adds scroll, render-settle and compositing work for every tile, so use bounded concurrency for batches and avoid launching a new browser for each URL when a controlled browser pool is safe for your workload.
Failure modes and fixes
The image contains only the viewport
Check that fullPage: true is passed to the screenshot call, not to page creation or navigation. For a region, confirm that your clip is intentional and that Puppeteer’s captureBeyondViewport is enabled when the clipped region extends outside the viewport.
Repeated or missing headers
This is usually a stitching policy problem. Hide or mask fixed and sticky elements during tile capture, or explicitly crop the repeated band. For native capture, verify whether the desired header behavior is produced by the browser surface before adding custom DOM changes.
Blank areas or missing images
Wait for the application’s ready state and fonts, trigger lazy loading by scrolling, and wait for image elements to complete. A quiet network does not guarantee that client-side rendering has finished.
Free tools Windows power users keep installed
One-click scans. No signup required.
Seams, jumps or duplicated content
Use measured scroll offsets rather than assuming each tile moves exactly one viewport height. Account for device scale, fractional positions, sticky elements and content that changes while capture is in progress. Add overlap and compare seam regions before accepting the image.
Different results on a high-DPI machine
Set an explicit device scale factor and choose either CSS or device scaling. Compare CSS dimensions as well as bitmap dimensions, and run the same browser and font versions in every environment.
Huge files or out-of-memory errors
Lower device scale, choose WebP or JPEG where appropriate, capture a bounded element, or split a very long document into sections. Set a hard pixel budget before allocating a composite canvas.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup: ScreenshotNeo
ScreenshotNeo is a website screenshot API and MCP server. A single request can return a PNG, JPEG, WebP or PDF, with full-page capture and lazy images loaded. It is the practical alternative when you do not want to maintain browser launch, waiting and stitching code.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Cookie and consent banners are accepted like a visitor and more than 60 known consent platforms, newsletter popups and chat widgets are removed before the shot; each cleanup step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and whether it was billed. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Use the ScreenshotNeo documentation for all 63 options, including CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, PDF paper and page controls, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL caching, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data and the OpenAPI specification.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to try it.
Algorithm selection checklist
- Use native full-page capture unless you can name the control requirement that stitching solves.
- Fix viewport, browser, operating system, fonts, locale and scale.
- Wait for fonts, data and lazy images; disable or mask volatile UI.
- Define sticky-header behavior before implementing a stitcher.
- Choose PNG, JPEG or WebP and enforce a pixel-size limit.
- For repeated API work, consider ScreenshotNeo first when cleanup, billing behavior or MCP access matters.
Frequently Asked Questions
Does full-page capture include content below the fold?
Yes. With Playwright or Puppeteer, the full-page option targets the document’s scrollable surface rather than only the currently visible viewport.
When should I capture an element instead of the whole page?
Capture an element or clip when the requirement is a bounded component, report or chart. It avoids unnecessary height and usually produces smaller, faster artifacts.
Why can two full-page images have different dimensions?
Viewport size, device scale, fonts, browser version, responsive breakpoints or content that changed during rendering can all alter CSS or bitmap dimensions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
