What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Short answer: a viewport screenshot records only the pixels currently visible inside a browser window, while a full-page screenshot stitches or renders the entire scrollable document into one image. Choose viewport capture for a consistent first-screen view at a defined size; choose full-page capture to review or preserve a finite page from top to bottom.
The distinction is captured area, not image format. Both can be PNG, JPEG, or WebP, and both reflect the page’s state at capture time. The page’s viewport dimensions, responsive breakpoints, loading state, animations, consent dialogs, and sticky elements can affect either result.
Viewport and full-page screenshots compared
| Aspect | Viewport screenshot | Full-page screenshot |
|---|---|---|
| Captured area | Only the visible browser viewport | The page’s scrollable content beyond the initial viewport |
| Shape and size | Bounded by the selected viewport width and height | Usually much taller; height depends on document length |
| Best use | First-screen previews, responsive checks, thumbnails, bug reports | Complete landing pages, articles, visual audits and finite-page records |
| Consistency | Easy to standardize at a fixed viewport | Height varies with content and loading behavior |
| Dynamic content | Shows what has loaded in the visible region | May omit lazy or delayed content, and infinite scroll has no definite end |
Chrome DevTools describes its normal action as capturing “what you see in the viewport” and its full-size action as capturing the whole page, including content outside the viewport (Chrome for Developers). Playwright similarly defines a full-page screenshot as the full scrollable page rather than the currently visible viewport (Playwright screenshots documentation).
When a viewport screenshot is the better choice
Show a controlled user view
If you need to demonstrate exactly what a visitor sees at 1440×900, 390×844, or another defined window, use viewport capture. The output dimensions remain bounded, making it suitable for design reviews, regression comparisons and social or documentation thumbnails.
Recommended Free Tools
Test responsive layouts
Responsive pages can change navigation, typography, columns and images at different widths. Set the viewport before navigation and capture the same dimensions on every run. Chrome warns that Device Mode is an approximation of real mobile hardware; test on an actual device when touch, sensors, fonts or hardware-specific behavior matters.
#1 Best Overall
- Brand New in box. The product ships with all relevant accessories
Record a transient state
Viewport capture is useful for a menu opened at the top of the page, a modal, a logged-in dashboard, a chart at a particular scroll position, or a bug that exists only in the visible region. A full-page operation may scroll, resize or otherwise change that state.
When a full-page screenshot is the better choice
Review the complete finite layout
Use full-page capture for a landing page, article, documentation page or checkout flow when reviewers need content below the fold in one visual record. It avoids manually combining many viewport images.
Preserve visual appearance
A full-page image can document spacing, section order, footer treatment and long-form branding. It is a visual record, not a guarantee that every network-delivered item was available.
Know the limits
- Lazy-loaded images may not appear if the capture method does not trigger loading while traversing the page.
- Delayed scripts, fonts or ads can finish after the screenshot is taken.
- Infinite-scroll pages have no stable “full” endpoint; capture a defined range or use viewport shots at known scroll positions.
- Sticky and fixed headers may be repeated in scroll-based implementations. This is tool-dependent, not universal.
- A very tall image can be harder to inspect, transmit and edit than several bounded images. Exact file size and capture time depend on page content and the capture tool.
For these reasons, wait for a selector, network idle or a deliberate delay when your tool supports it, and verify that important images are present before relying on the result.
What screenshots can—and cannot—tell you
Screenshots show visual appearance: layout, colors, charts, canvas output, spacing and rendering defects. They are not the best way to read all text or understand semantic structure. Playwright’s screenshot guidance recommends accessibility snapshots for structure and text, with screenshots used as a visual complement (Playwright screenshots tool documentation). For automated assertions, inspect the DOM, accessibility tree or page content as well as the image.
Capture either type in Chrome DevTools
- Open the page in Chrome and open DevTools with More tools → Developer tools.
- Turn on Device Mode with the phone/tablet icon, then choose a preset or enter responsive width and height.
- Open the DevTools command menu or the screenshot menu under More options.
- Select Capture screenshot for the visible viewport.
- Select Capture a full size screenshot to include content outside the viewport. Chrome documents both commands in its Device Mode guide.
Before capturing, dismiss consent dialogs, wait for critical images and pause animations if visual consistency matters. Device emulation changes the browser’s simulated dimensions; it does not reproduce every property of physical hardware.
Capture viewport or full page with Playwright
Playwright’s default page.screenshot() captures the current viewport. Pass fullPage: true for the full scrollable document, as described in the Page API.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsimport { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'viewport.png' });
await page.screenshot({ path: 'full-page.png', fullPage: true });
await browser.close();Install with npm install playwright and download the browser binaries with npx playwright install. Set the viewport before navigation when breakpoints affect the page. For a page with lazy content, scroll deliberately or wait for a known selector before capturing; do not assume networkidle means every image is visible.
A practical decision checklist
- Need a fixed-size preview? Choose viewport.
- Need the entire finite page in one image? Choose full page.
- Comparing responsive behavior? Capture viewport images at each target width.
- Auditing below-the-fold layout? Use full page, then check lazy-loaded sections.
- Reading content or checking semantics? Use DOM or accessibility data alongside either screenshot type.
- Documenting an infinite feed? Define a scroll range; “full page” is not a reliable concept.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server. It can return a viewport or full-page image, load lazy images, select an element, set a device or custom viewport, use retina scale, wait for a selector, delay or network idle, and apply custom CSS or JavaScript. It also supports PDFs, dark mode, cookies, headers, user agents, geolocation, blocking rules, caching and asynchronous jobs.
Cookie and consent banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages, timeouts and failed loads are not billed, and response headers identify the page verdict and billing status. Its MCP tools—take_screenshot, get_page_info and capture_pdf—let Claude, Cursor and other MCP clients capture pages.
For API parameters and the complete option list, see the ScreenshotNeo documentation.
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)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const data = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', data);Use the API’s full-page option when you need the scrollable document; omit it for a bounded viewport and set the viewport parameters required by your workflow. ScreenshotNeo’s Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing provides two months free, and every feature is included on every plan. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common capture problems
The “full” image stops early
The page may use infinite scroll, a nested scrolling container or content that appears only after interaction. Capture a defined element or scroll the relevant container, and wait for a selector that marks the final section.
Images or fonts are missing
Wait for the image selector or font-dependent layout, allow sufficient delay, and check that requests are not blocked. Lazy loading may require scrolling before capture.
The mobile result looks unlike a phone
Verify width, height, device scale and user-agent settings. Device emulation is approximate; confirm hardware-specific behavior on a real device.
Free tools Windows power users keep installed
One-click scans. No signup required.
A cookie banner covers the page
Accept or dismiss it before capture, use a cookie state, or configure a tool that handles consent and hides the banner. Otherwise the overlay is part of the recorded visual state.
The screenshot is unexpectedly huge
Long pages naturally create tall files. Capture only the needed element, use a viewport image, resize the output, or produce a PDF when pagination is more useful.
Text is unreadable in the image
Use a larger viewport or retina scale for visual review, but use DOM or accessibility extraction when the goal is reading or automated text verification.
Bottom line
Viewport means “what is visible now at this width and height.” Full page means “the scrollable document beyond the initial view,” subject to loading, scrolling and page-structure caveats. Standardize viewport dimensions for repeatable first-screen evidence; use full-page capture for a loaded, finite page that must be reviewed end to end. Pair either image with structural data when visual pixels are not enough.
Frequently Asked Questions
Does full-page capture include content loaded by infinite scroll?
Not reliably. Infinite-scroll pages have no natural end, so define a scroll range or capture specific sections.
Is a full-page screenshot always higher quality than a viewport screenshot?
No. Quality depends on viewport, device scale, rendering and encoding; full-page describes area, not fidelity.
Can I use a screenshot to verify accessibility?
No. Use an accessibility tree, semantic DOM checks and keyboard testing; treat the screenshot as visual evidence only.
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.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →
