Recommended Free Tools
To compare a website before and after a redesign, capture the same URLs and page states under matching browser conditions, then review the images side by side or compare a new capture with a saved visual baseline. Capture the viewport for what fits on screen, a specific element for a component, or the full page to include content below the fold.
Plan the comparison before the redesign
Choose the pages and states that matter, such as the home page, a navigation menu while open, or a key form. Record the exact URLs and make sure the before and after captures show the same content and state. Take the original screenshots before editing; once the old design is gone, you may not be able to reproduce its appearance.
For each comparison, note the browser and version, operating system, viewport dimensions, zoom, and any relevant browser settings. Keep these consistent between captures. Playwright notes that browser version, operating system, settings, hardware, power state, and headless mode can affect rendered screenshots, and recommends using the same environment that created a visual baseline: Playwright visual comparisons.
Choose what part of the page to capture
| Purpose | Capture | What it shows |
|---|---|---|
| Compare the fixed visible area | Viewport | The page area visible in the browser window |
| Check a redesigned component | Element | A specific element, such as a header, card, or form |
| Review the complete page | Full page | The full scrollable page, including content below the fold |
| Repeat checks during future changes | Baseline comparison | A new capture compared with a stored reference image |
Playwright documents viewport, element, and full-page screenshots, as well as PNG, JPEG, and WebP output and CSS-pixel or device-pixel scaling: Playwright screenshots. For a fair before-and-after pair, keep the format and capture scale the same; the documentation does not prescribe a universally best format or resolution.
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 →Capture a repeatable baseline with Playwright
Playwright Test can save a reference screenshot and compare later captures against it. The following example checks a page screenshot. Run it in the same browser and environment for the original and later comparison; the first run creates the baseline, and a subsequent run compares against it.
-
Install Playwright Test and its browser binaries in your project. See the Playwright Test introduction for installation instructions.
-
Create
tests/redesign.spec.tswith a stable page URL and a descriptive test name:import { test, expect } from '@playwright/test'; test('home page visual appearance', async ({ page }) => { await page.goto('https://example.com'); await expect(page).toHaveScreenshot('home-desktop.png'); }); -
Run the test to create the reference image, then commit the generated snapshot with your project. After the redesign, run the same test again. Review the reported difference before accepting or updating the reference.
Outdated 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 matchWindows 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 reinstallSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Playwright waits for two consecutive screenshots to match before saving a baseline image. That helps avoid saving while the page is still changing, but does not make captures from different machines or browser environments directly equivalent. See Playwright visual comparisons for snapshot behavior and configuration.
Capture and compare manually
If you need a one-time visual record rather than an automated test, capture each chosen page and state at the same viewport size. Save files as clear pairs, for example home-before-desktop.png and home-after-desktop.png. Include the page, state, and device or viewport profile in the name when you are capturing more than one view.
Place each pair side by side and inspect layout, hierarchy, typography, imagery, and content. A pixel difference is a prompt to investigate, not proof of a redesign defect: rendering changes caused by the browser or host environment can also affect pixels. Check meaningful differences in the browser and verify the same content and state are being shown.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server for developers. One GET request captures a URL as an image or PDF; its capture options include viewport, element, and full-page screenshots. The API can also accept parameters used by other screenshot APIs, which can make switching easier. Details are in the ScreenshotNeo documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie or consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response identifies the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free. Every feature is available on every plan. See ScreenshotNeo or sign up free for 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Can screenshots prove that a redesign caused a visual change?
No. A difference can also come from browser or host rendering conditions, so verify important changes in the browser using a stable capture environment.
Which screenshot format should I use?
The cited Playwright documentation supports PNG, JPEG, and WebP; it does not establish one best format. Keep the format and capture scale consistent within each before-and-after pair.
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.
