How to Screenshot a Website Before and After a Redesign
Capture matching screenshots before and after a redesign, then compare them side by side or with an automated visual baseline.
To compare a website before and after a redesign, capture the same URLs and page states under matching browser conditions, then review paired screenshots side by side. Capture the viewport for what users see on screen, a selected element for a component, or the full page for below-the-fold changes. For repeatable checks, save a baseline and compare later captures against it.
If you are planning a redesign, capture the “before” images before changing the site. Once the old layout is gone, you may not be able to recreate its appearance for a direct comparison.
1. Plan the comparison
Decide which pages and states will provide useful evidence. A focused set is easier to review than an indiscriminate dump of every URL.
- List matching URLs for the old and redesigned site.
- Include important states: for example, a menu open, a form with validation messages, or a key section expanded.
- Choose a capture scope for each comparison: viewport, element, or full page.
- Record the viewport or device profile, browser, and any state setup needed to repeat the capture.
Use the same content and interaction state on both versions where possible. If the redesigned page changes content as well as layout, note that in the review so a changed paragraph or image is not mistaken for a rendering problem.
2. Keep capture conditions consistent
A screenshot records a rendered page, so changes in the rendering environment can create differences unrelated to the redesign. Keep the browser and browser version, operating system, viewport dimensions, zoom, settings, and page state consistent. Playwright also notes that hardware, power state, and headless mode can affect screenshots. Its visual comparison guidance recommends using the same environment that produced the baseline. Playwright visual comparisons
For a before/after pair, use the same capture scale and image format. Playwright supports PNG, JPEG, and WebP screenshots, and its visual comparisons default to PNG. There is no universally best format or resolution for redesign documentation; consistency within the pair matters most. Playwright screenshot options
3. Choose what to capture
| Comparison goal | Capture | What it shows |
|---|---|---|
| Compare the visible first screen | Viewport | A fixed browser page area at a chosen size. |
| Review one redesigned component | Element | A selected element, such as a hero, navigation bar, or pricing card. |
| Inspect content below the fold | Full page | The entire scrollable page, including content outside the initial viewport. |
| Run repeatable checks during development | Baseline assertion | A new capture compared with a stored reference image. |
Playwright documents viewport, element, and full-page capture, along with screenshot scaling options. Full-page captures can be tall; use viewport or element captures when the question is limited to a single screen or component. Playwright screenshot documentation
4. Capture before and after with Playwright
The following runnable Node.js example captures a viewport screenshot for each version. It uses the same browser context and viewport for both pages and saves clearly paired files.
import { chromium } from 'playwright';
const cases = [
{ name: 'before', url: 'https://example.com' },
{ name: 'after', url: 'https://redesigned.example.com' },
];
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1,
colorScheme: 'light',
});
try {
for (const pageCase of cases) {
const page = await context.newPage();
await page.goto(pageCase.url, { waitUntil: 'networkidle' });
await page.screenshot({ path: `home-${pageCase.name}-desktop.png` });
await page.close();
}
} finally {
await browser.close();
}Replace the example URLs with the corresponding old and redesigned URLs. Install Playwright in your project and install its browser before running the script. The example waits for network idle, but pages with analytics or persistent connections may never reach that state; in that case, wait for a relevant selector or a known page-ready condition instead.
Capture a full page or a component
Change the screenshot call for a full-page image:
await page.screenshot({ path: `home-${pageCase.name}-desktop.png`, fullPage: true });To capture a specific element, select it and take the locator screenshot:
const hero = page.locator('main .hero');
await hero.screenshot({ path: `hero-${pageCase.name}-desktop.png` });Use the same selector in both versions if the markup permits it. If the redesign changes the selector, update the capture mapping and confirm that the selected elements represent the same component.
Make paired filenames easy to review
Include the page, version, and viewport or device in each filename, such as pricing-before-mobile.png and pricing-after-mobile.png. Keep the naming pattern and folder structure stable so reviewers can find the matching pair without guessing.
5. Compare the screenshots
Start with a side-by-side review. Check layout, visual hierarchy, typography, imagery, spacing, and content. Confirm that the same state and region are visible in both captures. A pixel difference can result from browser or host rendering changes as well as from the redesign, so treat diffs as evidence to inspect rather than an automatic verdict.
For repeatable visual checks, Playwright Test can store a reference screenshot and compare later captures against it. Its screenshot assertion waits for two consecutive screenshots to match before saving the last screenshot as a baseline. Keep the environment stable when creating and updating reference images. Playwright screenshot comparisons
Review large and meaningful changes first. If a difference appears important, inspect the page in the browser and verify the content and layout directly before deciding whether it is an intended redesign change or a capture variation.
6. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request returns a PNG, JPEG, WebP, or PDF capture. For a before/after pair, make one request for each URL and keep the capture parameters identical. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpUse the old URL for the before capture and the redesigned URL for the after capture. Give each output a paired filename when saving it. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.
Create a free ScreenshotNeo account to capture up to 1,000 screenshots a month without a card.
7. Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The before and after images differ even where the design did not change. | Different browser, operating system, browser version, viewport, zoom, settings, or rendering conditions. | Capture both versions in the same environment with matching dimensions and settings. Recheck the page before treating small pixel differences as defects. |
| A capture times out waiting for network idle. | The page keeps making network requests, such as analytics or a persistent connection. | Wait for a page-specific selector or readiness condition, or use a deliberate short delay if the page has no reliable ready marker. |
| The two files show different content. | The pages are in different states, personalized, or serving different content. | Match the state and content where possible; document unavoidable differences so the comparison stays interpretable. |
| The component screenshot is empty or captures the wrong area. | The selector does not match the intended component in one version, or the element is not visible yet. | Check the selector on each page, wait for the element to appear, and verify that it identifies equivalent content. |
| The full-page capture is unusually large or unwieldy. | The page has a long scrollable surface. | Use a viewport or element capture for focused questions; reserve full-page images for changes that span the page. |
| A visual diff flags a change that appears harmless. | Rendering variation or dynamic page content may have changed pixels. | Inspect the browser output, confirm the environment, and assess the actual layout and content change before updating a baseline. |
8. Performance, reliability, and cost
Capture only the pages, states, and scopes that answer the review question. Viewport and element screenshots limit the capture area; full-page screenshots include more content and can take more work to store and inspect. Reuse a stable capture environment for reliable comparisons, and keep a baseline tied to the browser conditions that created it.
Browser-based captures require a runnable browser environment and consistent configuration. A screenshot service can remove that setup step, but compare its available controls and billing behavior with your workflow before moving a large suite. ScreenshotNeo bills only clean shots: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its plans are Free (1,000 per month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is on every plan.
FAQ
Should I capture the old site before the redesign begins?
Yes. The old appearance may be difficult or impossible to reproduce after changes are deployed, so save the reference captures first.
Which screenshot scope should I use?
Use a viewport for the visible screen, an element capture for a specific component, and a full-page capture when below-the-fold content matters.
Does a pixel difference prove the redesign is wrong?
No. Browser, host, and rendering conditions can affect pixels. Verify meaningful differences in the page itself and keep the comparison environment consistent.
Can I automate future comparisons?
Yes. Playwright Test supports screenshot baselines that compare later captures with a stored reference. Keep the capture environment stable when recording and reviewing those baselines.
