Free tools Windows power users keep installed
One-click scans. No signup required.
Capture the same pages in the same browser conditions before and after a redesign, then compare the paired screenshots. Use a viewport capture for what users see on screen, an element capture for a specific component, or a full-page capture for below-the-fold content. For repeatable checks, store a screenshot baseline and compare later captures against it.
Plan the before-and-after comparison
Before changing the site, make a short list of the URLs and states that matter. Include the same page states on both sides of the redesign—for example, the navigation closed in both captures, or the same menu open in both. Include key forms or other interactions if their appearance is part of the work.
As an Amazon Associate I earn from qualifying purchases.
Capture the “before” images before editing or deploying the redesign. If you wait until the old version is gone, you may not be able to recreate its appearance under the same conditions.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Keep the capture conditions consistent
A useful comparison changes the site, not the conditions around the screenshot. Keep the browser and browser version, operating system, viewport dimensions, zoom, browser settings, and page state the same where possible. Playwright notes that operating system, browser version, settings, hardware, power state, and headless mode can affect screenshots; its visual-comparison guidance recommends using the environment that generated the baseline. Playwright’s visual comparisons guide explains these sources of variation.
- Use the same URL and content state for each pair.
- Set the same viewport width and height, and keep zoom consistent.
- Use the same browser and execution mode when you can.
- Keep the screenshot format and scale consistent within a pair. The documentation supports multiple formats and scales but does not establish one universally best choice for redesign records.
Choose the right screenshot scope
| What you need to compare | Capture scope | What it includes |
|---|---|---|
| What fits in the browser page area | Viewport | A fixed visible area, useful for a consistent first-screen comparison. |
| One redesigned component | Element | A selected element, such as a header, card, or form. |
| Content below the fold | Full page | The full scrollable page, including content outside the initial viewport. |
| Repeated checks during development | Baseline comparison | A new capture compared with a saved reference image. |
Playwright’s screenshot documentation describes viewport, element, and full-page captures, as well as PNG, JPEG, and WebP output and CSS-pixel or device-pixel scaling. Choose the scope that answers your question, then keep it unchanged between the before and after images.
Capture and compare with Playwright
Playwright can save screenshots directly from a browser page. This example uses its Node.js API to capture a full page at a fixed viewport; replace the example URL with the page you are documenting. Run it once before the redesign and again after, using the same environment and settings.
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.screenshot({ path: 'home-before-desktop.png', fullPage: true });
await browser.close();For a later capture, change the output filename to home-after-desktop.png and run the script against the redesigned page. If you only want the visible viewport, omit fullPage: true. To capture a component, use a locator:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesawait page.locator('header').screenshot({ path: 'header-before.png' });Use the same selector and naming pattern after the redesign. Playwright’s visual comparison support can also create a reference image and compare later screenshots against it. Its screenshot assertion waits for two consecutive screenshots to match before saving the last screenshot as a baseline, which can reduce captures made while a page is still settling.
Organize the image pairs
Name files so the page, version, and viewport or device profile are obvious. For example, home-before-desktop.png and home-after-desktop.png make the intended pair clear. Keep the baseline alongside the matching test or documentation rather than mixing images from different viewports.
Review differences without over-interpreting them
Compare the paired images for layout, visual hierarchy, typography, imagery, and content. Side-by-side review is useful for a human check; an automated baseline is useful when you want to detect changes repeatedly. A pixel difference is evidence to investigate, not proof that the redesign is wrong: browser, operating-system, rendering, or environment changes can also alter pixels. Confirm important differences in the browser and stabilize the capture environment before treating small diffs as defects.
Playwright’s documentation puts the purpose of screenshots plainly: “Screenshots are for looking at, not for acting on — use browser_snapshot to get refs to interact with.” A screenshot is a visual record; use browser interaction tools separately when a test needs to locate or operate page elements.
Or skip the browser setup
ScreenshotNeo takes a website screenshot with one GET request. Cookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets; those cleanup steps can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status. It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents.
Example using cURL (replace the URL and API key as needed):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request parameters. It accepts the parameter names used by other screenshot APIs, which can make switching easier. Free includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month, with no card.
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 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 →
