How to capture a full webpage, and why the result is often wrong
Capturing an entire scrolling page is built into every major browser. Getting an image that actually resembles the page is harder, because a full-page capture asks the browser to render something it was never designed to display: the whole document at once.
The built-in methods
Chrome and Edge. Open DevTools, press Cmd Shift P (or Ctrl Shift
P), type "screenshot", and choose Capture full size screenshot. The same
menu offers a node screenshot, which captures a single selected element — often
more useful than the full page.
Firefox. Right-click anywhere on the page and choose Take Screenshot, then Save full page. No developer tools required, which makes it the most accessible of the three.
Safari. File → Export as PDF captures the complete page. It's a PDF rather than an image, which is either fine or useless depending on where it's going.
Why the output looks wrong
Lazy-loaded images never load. Most sites defer images until they approach the viewport. A full-page capture renders the document without scrolling through it, so images far down the page may still be placeholders — grey boxes, blank space, or a spinner frozen mid-animation.
The fix is manual: scroll slowly to the bottom, wait for everything to settle, scroll back to the top, then capture.
Sticky headers multiply or float. A header with position: sticky is
designed to follow the viewport. In a full-page render the viewport is the entire
document, so the header may appear once at the top, stranded in the middle, or
repeated at intervals — depending on how the capture is implemented.
Viewport units stretch. An element sized height: 100vh means "as tall as
the window". When the capture treats the window as being fifteen thousand pixels
tall, that hero section becomes fifteen thousand pixels tall. One section can
consume the entire image.
Fixed elements pile up. Cookie banners, chat widgets, and floating buttons
use position: fixed and behave unpredictably in a full-page render — sometimes
pinned to the top, sometimes duplicated.
Working around it
Dismiss the overlays first. Close the cookie banner, the chat bubble, the newsletter modal. These are the most common thing that ruins a full-page capture, and they take two seconds to clear.
Scroll the whole page before capturing. This triggers lazy loading and lets animations reach their resting state.
Capture the element, not the page. Chrome's node screenshot is frequently the better tool. Select the main content container in the Elements panel, right-click, and capture just that node. You skip the header, the footer, the banners, and every fixed-position surprise.
Consider whether you need the whole page at all. A full-page screenshot of a long article produces an image with an extreme aspect ratio that is unreadable at any size it will actually be viewed. Two or three targeted captures usually communicate more.
When full-page is genuinely right
There are cases where nothing else works:
- Design review, where the vertical rhythm and section spacing are the subject
- Visual regression records, where you want a stable artefact to diff later
- Archiving a page before it changes
- Layout bugs that only appear in the relationship between distant sections
In all four, the whole point is the relationships across the full height. That's exactly when the extreme aspect ratio is a feature rather than a problem.
For everything else, the honest answer is usually that you wanted three screenshots and reached for one.