Web & UI design
Website Redesign Before and After: Screenshots That Compare Fairly
A redesign case study needs a clear before and after, and a release needs proof that nothing else changed by accident. Both depend on screenshots that are taken the same way. Different window sizes, zoom levels, or content make a fair comparison impossible.
By BeforeAfterly · Practical comparison guide · Published
The practical takeaway
Capture the old design before launch, at the same viewport width, zoom, and content as the new one. Use a slider for the story and a pixel comparison to catch unintended changes.
Capture the old design before it disappears
Take screenshots of every important page and state before you launch: home, key templates, forms, menus, and error states, on desktop and mobile widths. Once the new design is live, recreating the old one accurately is difficult.
If you missed it, the Internet Archive’s Wayback Machine may have older versions of public pages. Archived copies can be missing fonts, images, or scripts, so check them carefully and say where the before image came from.
Match the viewport, zoom, and content
Use the same browser width and zoom level for both screenshots, and the same device pixel ratio, so one image is not twice the size of the other. Browser developer tools can emulate a specific device and capture a full-page or viewport screenshot; in Chrome, open the command menu in DevTools and search for “screenshot”.
Show the same content and state in both: logged in or out, the same product or article, cookie banners dismissed, and the same scroll position. Different copy or photos make it hard to tell which changes come from the design.
- Same browser width and zoom.
- Same device pixel ratio (both at 1× or both at 2×).
- Same page, content, and user state.
- Pop-ups and cookie banners handled the same way.
- Viewport screenshots for sliders; full-page captures for documentation.
Tell the redesign story with a slider
For a portfolio or case study, a slider over two matching screenshots lets readers see the improvement in one place. Use Split for layout and spacing changes, and Crossfade to show a gradual shift in colour or typography. Explain what problem each change solves; a better-looking screenshot does not prove better results on its own.
If you report results, such as a higher conversion rate, say how they were measured and over what period. A redesign often launches alongside other changes, so separate the design’s effect from campaigns, pricing, and seasonality where you can.
Catch unintended changes pixel by pixel
When a change should affect only one part of a page — a new button colour, a fixed alignment — compare screenshots of the page before and after the change in the image difference checker. Changed pixels are highlighted and grouped into regions, so an unexpected change elsewhere on the page stands out.
Screenshots must be the same size and taken in the same state for this to work. Animations, carousels, live dates, and personalised content change between captures; pause or hide them first. For automated checks on every release, dedicated visual regression testing tools compare screenshots in your build pipeline.
Common questions
How do I take a full-page screenshot of a website?
Use your browser’s developer tools or a screenshot extension. In Chrome, open DevTools, open the command menu, and choose a full-size screenshot. Use the same window width for both versions.
How can I find what my website used to look like?
Check your own backups, design files, and staging environments first. The Internet Archive’s Wayback Machine may also have older versions of public pages, although some assets may be missing.
Can I compare two screenshots for differences?
Yes. The image difference checker highlights every changed pixel and groups changes into regions, as long as both screenshots are the same size.
Put it into practice.
Load your before and after images and try all three comparison modes. Free, with no sign-up.
Compare your images