To capture a website, enter its URL in a screenshot service, choose whether you need the visible viewport, the full scrollable page, or one element, set the viewport and output options, then capture and check the result. For repeatable captures or custom control, use browser automation such as Playwright. The steps below cover both approaches, including what to check when a capture looks wrong.
Choose what the screenshot should show
Before you capture anything, decide what the image is meant to contain. That choice affects the page dimensions, the settings you need, and whether a single screenshot will be useful.
Visible viewport
A viewport screenshot records the browser area currently on screen. Choose it when the question is “What does this page look like at this size?”—for example, when reviewing a hero section, navigation, or the first screen of a landing page. It does not include content farther down the page.
Full page
A full-page screenshot includes the page’s full scrollable content rather than only the part currently visible. Use it for a long article, landing page, or other document you need to review as one image. A very long page can produce a large image, so check whether its text remains legible at the dimensions you need.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
One element
An element capture isolates a component such as a form, chart, card, or navigation bar. This is useful when the rest of the page would distract from the part you need to share or inspect. In Playwright, you can capture an element through a locator rather than taking a page screenshot. See the Playwright screenshot guide.
Capture a website with a screenshot service
Most hosted screenshot services follow the same broad workflow, but their interfaces, supported output formats, limits, and terminology differ. Follow the current documentation for the service you use; do not assume that a control available in one service exists in another.
- Open the service. Use its website or API interface and supply the page URL you want to capture. If the service uses browser automation instead, navigate to the page in that workflow.
- Choose the capture area. Select viewport, full page, or an element if the service supports those modes.
- Set the viewport. Choose the target width and height before loading the page if the responsive layout matters. A phone-width viewport can cause a site to display a different navigation, column layout, or set of elements than a desktop-width one.
- Choose output settings. Set the available image format and scale, and adjust quality or other options if offered. The names and availability of these controls are service-specific.
- Run the capture and save or export it. Use the service’s download or export control, or retrieve its response if you are calling an API.
- Inspect the file. Confirm that it shows the intended page and dimensions. For a long page, check that content below the fold appears and that important text is still readable.
Set the viewport and image scale deliberately
The viewport is not just a framing choice: websites respond to available screen dimensions. If you want a mobile layout, set a phone-sized viewport before navigation rather than resizing only after the page has loaded. Playwright’s Page API documents viewport settings and notes that changing the viewport resets the screen size; it recommends setting it before navigating when a site may react to phone-sized dimensions. See Playwright’s Page API documentation.
Image scale controls how screenshot pixels relate to CSS pixels. A device-pixel scale can create a larger image on a high-density display. That may help when you need more image detail, but it also changes output dimensions and file size. Some APIs also offer clipping to a specific rectangle, masking selected regions, transparency, and image-quality options. These are tool-specific controls, so verify how your chosen service handles them before depending on them.
Recommended Free Tools
Rank #2
For a one-off image, choose settings that make the content easy to inspect. For repeated captures, keep the viewport, scale, browser, and other rendering conditions consistent. Otherwise a difference in the output may come from the capture environment rather than a change to the website.
Use Playwright when you need a repeatable browser capture
Playwright can save a screenshot to a file or return it as a buffer for further processing. The following Node.js example opens a page and captures its full scrollable content. It uses the Playwright package and its browser installation; follow the official screenshot guide and Page API for current setup and API details.
Install Playwright in a project, install the browser it needs, and save this as an ES module such as capture.mjs:
import { chromium } from 'playwright';
const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch();
try {
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot({ path: 'website.png', fullPage: true });
console.log('Saved website.png');
} finally {
await browser.close();
}Run it with a URL:
node capture.mjs https://example.comThe example uses a desktop-sized viewport and captures the full page. To capture only the visible viewport, remove fullPage: true. To capture one element, replace the screenshot call with a locator screenshot:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →await page.locator('main article').screenshot({ path: 'article.png' });Change the selector to one that matches the component you need. If you want a specific responsive layout, change the viewport in newPage before goto. Keep those values stable when generating images for comparison.
Check the capture and diagnose common problems
A screenshot is only useful if the page finished rendering in the intended state. When the result is unexpected, check the page, settings, and timing before assuming the image file itself is the problem.
The screenshot shows only the top of a long page
Confirm that the service has a full-page option enabled. In Playwright, use fullPage: true for the full scrollable page; a normal page screenshot represents the viewport. Check the resulting image dimensions and inspect content near the bottom.
The layout looks like the wrong device
Set the viewport dimensions before navigating, then capture again. A website may choose its responsive layout during page rendering. Make the target width and height explicit rather than relying on a browser’s default size.
An element capture is empty or missing
Check that the selector actually matches the intended element on the loaded page. A selector that no longer matches after a site redesign, or that matches a hidden version of a component, will not capture the visible item you expected. Choose a more specific selector and inspect the page at the same viewport used for capture.
Images or other content have not appeared
Some content loads after the initial document response, including images that load only when they approach the viewport. Wait for the relevant content before capturing, and verify the output rather than assuming a page-load event means every visual element is ready. A service may offer a selector wait, delay, or other readiness control; check its documentation for the exact behavior.
Two screenshots differ even though the page seems unchanged
Rendering can vary with operating system, browser version, settings, hardware, power source, and headless mode. Playwright documents these sources of variation in its visual comparisons guidance. For visual checks, take the baseline and later screenshots in the same environment and keep browser and capture settings consistent.
The image is too large, small, or soft
Review the viewport and image scale, then check any quality setting supported by the capture tool. A higher device-pixel scale can increase image dimensions; changing the viewport can also alter the page layout, not just the image size. Select settings based on the intended use and inspect the output at its actual display size.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Use screenshots for appearance, not page structure
A screenshot is a visual record. It can help someone review appearance, but it is not a substitute for understanding a page’s structure or interacting with its controls. If your goal is to inspect page structure or work with elements, an accessibility snapshot is more appropriate than an image; Playwright’s screenshots tool documentation distinguishes those uses.
For visual comparisons, compare like with like: use the same URL state, viewport, browser environment, and capture mode. Otherwise a responsive breakpoint, browser rendering difference, or a changed page state can look like a site change when it is not.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server made by Yorker Media. A GET request with a URL returns a PNG, JPEG, WebP, or PDF. Its capture options include viewport and full-page screenshots, CSS-selector element capture, device presets and custom viewports, retina scale, PDF settings, custom CSS and JavaScript, selector or delay waits, and other controls. See the ScreenshotNeo documentation for the API and available parameters.
Here is a cURL request that saves a WebP screenshot:
Free tools Windows power users keep installed
One-click scans. No signup required.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace YOUR_API_KEY with your key and change the target URL as needed. The equivalent Python request is:
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)In Node.js, the request is:
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 accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses include X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Frequently Asked Questions
Can I capture a website that requires signing in?
A screenshot tool can only capture the page state it can access. For a page behind a login, use an authorized browser session or a tool that supports the required authentication; do not attempt to bypass access controls.
Can I use a website screenshot in a report or publish it?
A capture records what appeared in the browser; it does not grant rights to republish the page, its images, or other content. Check the applicable permissions and terms before distributing it.
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.
