How to take a full-page screenshot of any website

What a full-page screenshot is

A normal screenshot captures what fits on your screen. A full-page screenshot captures the entire page, from the header to the footer, as one tall image, including everything you would have to scroll to see. For long pages that is the difference between one clean image and six overlapping pieces stitched by hand.

You rarely need software for this. Chrome, Firefox, Edge and Safari can all do it with what they ship. The methods are just hidden in odd places, so here is each one, quickest first.

Chrome: capture full size screenshot

Chrome's full-page capture lives inside DevTools, behind the command menu. It works in Edge and other Chromium browsers too, with the same keystrokes.

1. 1

   Open the page you want to capture

   Let it finish loading, and scroll to the bottom once. Many pages load images only as you reach them, and this forces them in before the capture.

2. 2

   Open DevTools

   Press Cmd+Option+I on a Mac or Ctrl+Shift+I on Windows. The DevTools panel opens beside or below the page.

3. 3

   Open the command menu

   Press Cmd+Shift+P on a Mac or Ctrl+Shift+P on Windows. A search box appears at the top of DevTools.

4. 4

   Run the capture command

   Type "screenshot" and choose "Capture full size screenshot". Chrome renders the whole page and saves it as a PNG to your downloads folder.

The same command menu offers "Capture node screenshot" for a single element, useful when you want one pricing card rather than the whole page.

Firefox: built into the right-click menu

Firefox makes this easier than any other browser. Right-click anywhere on a page, choose "Take Screenshot", then click "Save full page". No DevTools, no extension. You can also press Ctrl+Shift+S (Cmd+Shift+S on a Mac) to open the same tool directly. The capture copies to the clipboard or downloads as a PNG.

Safari: through responsive design mode

Safari's route is less direct. First enable the Develop menu under Settings, Advanced, "Show features for web developers". Then open the page, choose Develop, "Enter Responsive Design Mode", pick a screen size, and use File, Export as PDF for the full page, or capture from the Web Inspector's Elements tab by right-clicking the html node and choosing "Capture Screenshot". Most Mac users find the Chrome or Firefox route quicker, and Safari matters mainly when you need WebKit rendering specifically.

Browser extensions

Screenshot extensions add a one-click button for the same job. GoFullPage is a well-known example for Chrome: it scrolls the page for you, assembles the capture, and opens it for download. Extensions are convenient for a handful of captures, though quality varies between them, and pages with sticky headers or aggressive lazy-loading can still trip them. A wider comparison of tools in this category is in website screenshot tools compared.

Capturing the phone version

The phone version of a page is often a different page: shorter headlines, cut sections, another call to action. To capture it from your desktop, use device emulation. In Chrome, open DevTools, press Cmd+Shift+M (Ctrl+Shift+M on Windows) to toggle the device toolbar, pick a phone from the dropdown, then run "Capture full size screenshot" from the command menu as before. Firefox has the same idea under Tools, Browser Tools, "Responsive Design Mode". The capture comes out at phone width, full length.

The honest limits of all these methods

• Lazy-loading. Pages that load content as you scroll can capture with blank gaps where images never loaded. Scrolling the full page before capturing helps, but does not always cure it.
• Sticky headers. Elements that follow you as you scroll sometimes repeat several times down a stitched capture, one copy per scroll position.
• Cookie banners and chat widgets. Whatever overlays the page lands in the shot. For research you present to others, that means cropping or retaking.
• One page at a time. Every method above is manual per page. Capturing five pages across five competitor sites, desktop and phone, is fifty captures and an afternoon gone.
• Nothing is organised afterwards. You end with a downloads folder of files named screenshot(14).png, and the sorting is still ahead of you.

For one page, once, the browser is the right tool and it is free. The pain starts when captures become a recurring research task.

Batch capture for research work

If you capture competitor pages regularly, for a teardown or a UX comparison, the per-page methods stop scaling. Stravue is built for that batch case: paste a site and what you're after ("pricing", "onboarding"), pick from the pages it proposes, and it captures each one full-page on desktop and phone, with cookie banners and chat widgets removed before the shot. Captures land on one board, ready to pin notes on and export as PowerPoint, PDF or clean PNGs. A pricing sweep across several sites shows what the batch output looks like. It is a paid tool, from $39 a month, so for occasional single captures, stay with your browser.

Every method compared

Frequently asked questions