How to screenshot a whole web page

A full page screenshot sounds like it should be a solved problem. Every browser can save an image, every operating system has a capture key, and the page is sitting right there on the screen. Then you try it on a real site and get back a striped mess with the navigation bar printed six times down the middle.

This is why that happens, the five ways to get a clean capture, and what the image is actually worth once you have one.

The short answer

In Chrome, press F12 to open DevTools, then Ctrl+Shift+P on Windows or Cmd+Shift+P on a Mac to open the command menu. Type "screenshot" and choose Capture full size screenshot. It is built in, it costs nothing, and on a plain page it works.

On a page with a sticky header, lazy loaded images, scroll triggered animation or sections sized to the height of the window, it will not work. That covers most sites built in the last five years, which is why this keeps coming up.

Why a page is harder to capture than it looks

A screenshot of a document is easy, because the document is already finished before you ask for it. A modern web page is not a document. It is a program that decides what to draw based on where you have scrolled, how wide the window is and what has finished downloading.

So the capture has to do three things at once. It has to move down the page, it has to wait for each new part to finish arriving, and it has to stitch the frames together without printing anything twice. Every tool that fails is failing at one of those three.

What actually goes wrong

What the page does	What you get back
Sticky or fixed header	The bar repeated down the image, every frame
Lazy loaded images	Grey placeholder boxes below the fold
Scroll triggered animation	Half faded headings, elements caught mid flight
Sections sized in vh units	A layout that jumps at each seam
Scrolling inside a container	One screen of content and a lot of empty space
Infinite scroll	A capture that never reaches the end

The sticky header is the one people notice, because it is the ugliest. The lazy loading one is more dangerous, because a page full of grey boxes still looks like a real screenshot until somebody reads it closely.

The container problem catches out anyone screenshotting an app rather than a website. Mail clients, dashboards and admin panels usually scroll an inner pane while the document itself never moves, so a tool that scrolls the document captures the same screen over and over.

The five ways to do it

Method	Good for	Where it fails
Chrome DevTools	A quick capture of a simple page	Sticky headers, lazy loading, inner panes
The OS screenshot key	The part you can already see	Anything taller than the window
Print to PDF	Text you need to read, not a design	Almost any real layout
Headless browser or Playwright	Repeatable captures in a pipeline	Needs setting up and maintaining
A purpose built extension	Everything above, one click	Pages that never stop loading

Chrome DevTools

Free, already installed, and worth knowing. Open DevTools, open the command menu, run Capture full size screenshot. There is also a device toolbar, so you can set an exact width first and capture a page as a phone would see it, which is the one thing this method does better than most.

Its weakness is that it takes the page as it currently stands. It does not scroll, wait and settle, so whatever has not loaded yet stays unloaded.

The operating system key

Cmd+Shift+4 on a Mac, Win+Shift+S on Windows. Perfect for one region of one screen, useless for a page that runs past the bottom of the window. Worth remembering that this is the right tool when you only need the header.

Print to PDF

Ctrl+P and save as PDF. This is the honest option when what you need is the words, because print stylesheets deliberately strip layout. It is the wrong option when what you need is the design, for exactly the same reason.

A headless browser

If you need the same capture every week, script it. Playwright and Puppeteer both take a full page screenshot in one line, and headless Chrome will do it from the command line. This is the right answer for regression testing and the wrong answer for a Tuesday afternoon when you need one image.

An extension

Which is the gap we ended up building into.

The extension we built

We take a lot of screenshots. Every client review starts with a capture of the page as it stands, and every one of them was coming back with a header stripe through it, so we wrote Full Page Screenshot to stop doing that by hand.

It scrolls, settles, captures and stitches, frame by frame, to the bottom. It measures a pinned navigation bar once and leaves it out of every frame after the first. It handles pages that scroll inside a container rather than moving the document, which is what makes it work on dashboards and mail clients. One click starts it and clicking again cancels it.

After the capture there is an editor: crop, arrows, boxes, text, highlighter and a redaction tool for the parts that should not leave the building. Edits are stored as data and only baked in on export, so the original capture is never touched. Export as PNG, as JPEG with the quality you want, as a single long PDF or paginated onto A4 or Letter, or straight to the clipboard.

It is free, with no paid tier and no account. It asks for activeTab and nothing else, which is a permission granted per click that expires on its own, and it runs entirely in the browser with no server behind it. Chrome 116 or newer, and it works on the other Chromium browsers too: Edge, Brave, Arc, Vivaldi and Opera.

We built it for our own work and gave it away for the same reason we give away the other tools. A thing we use every day is a better argument than a page explaining that we are thorough.

What the image is actually for

A capture is only worth taking if something happens next. Five things usually do.

Review and markup. One image of the whole page, with arrows on the six things that are wrong, replaces a call. This is the main one for us.

Client and stakeholder feedback. People who will not open a staging link will look at a picture. Getting a decision out of somebody is often just a matter of putting the thing in front of them in a format they cannot avoid.

Bug reports. A full page capture shows the state of everything, not just the part the reporter thought was relevant. It also timestamps itself, which settles a lot of arguments about when something broke.

A before and after record. Capture the page the day before you change it. Six months later that image is the only evidence of what you improved, and it is worth more than the numbers, because everyone can read it.

Archiving before a migration. If you are moving platforms, capture every page that matters first. Content gets lost in migrations, and a folder of images is the cheapest insurance there is. We go into what else to prepare in how to choose a CMS.

Using one on your own site

Capture your own homepage at full length and look at it as one image rather than as a page you scroll. It is uncomfortable, and it is the fastest review you will ever run.

Three things tend to fall out of it immediately. How far down the first real statement of what you do actually sits. How many times you ask for the same action, and whether any of them explain why. And how much of the page is decoration between the parts that carry information.

Print it, mark it up, and count the sections that would be missed if you deleted them. That question answers itself in a way it never does on screen.

If the page turns out to be fine and the enquiries still are not arriving, the problem is further up, and we wrote about why a site gets traffic and no enquiries separately.

What a screenshot cannot tell you

It cannot tell you how the page felt to wait for. A capture of a page that took eleven seconds looks identical to a capture of one that took one, which is the whole subject of what a slow website is costing you.

It cannot show you anything interactive: no hover states, no focus rings, no menu open, no form error, no scroll animation as it was meant to be seen. It shows one width, so a desktop capture says nothing about the phone unless you capture that separately.

And it cannot tell you whether the page works. A beautiful page that does not convert screenshots exactly as well as one that does. The image is evidence about the page, and only about the page.

Where to start

Capture your homepage today with whichever method fits. DevTools if the page is simple, the extension if it has a sticky header or anything that loads as you scroll.

Then mark up the six things that are wrong, in order of how much they cost you. The point was never the screenshot. It was being able to see the whole thing at once, which is the only way anybody notices what is missing.