How to Take a Full-Page Screenshot (Scrolling, Long Pages, Apps)

A full-page screenshot is a capture of the entire scrollable area of a webpage, not just what is visible in the viewport. It is the right tool for capturing long articles, design references, error states at the bottom of a page, or a complete view of an app screen. This guide covers the right tool for every browser, plus the edge cases.

What "full page" means

A normal screenshot captures the viewport — the visible area. On a 1080p monitor, that is roughly 1920 × 1080 pixels (or a bit less, after the browser chrome). A full-page screenshot captures the entire scrollable content, which can be 5000, 10000, or even 50000 pixels tall.

The output is a single image (usually PNG) of the full content. The aspect ratio matches the page, not the viewport. Some pages render at 50,000 pixels tall for a single article; the screenshot will be a 50,000-pixel-tall image.

Chrome and Edge (built-in)

Both browsers have a full-page screenshot in DevTools.

The exact steps

1. Open DevTools (F12 or Cmd-Opt-I on Mac, Ctrl-Shift-I on Windows).
2. Open the Command Palette (Cmd-Shift-P on Mac, Ctrl-Shift-P on Windows).
3. Type "screenshot".
4. Pick "Capture full size screenshot" from the menu.
5. The screenshot downloads as a PNG.

The screenshot is the full rendered page, including lazy-loaded content, fixed elements, and overflow content. It is the most reliable method for most pages.

Edge cases

The built-in method has a few limits:

• Very long pages — the browser has a maximum height. Pages over ~16,000-30,000 pixels may be cut off. The exact limit depends on the browser version and the page content.
• Sticky headers and footers — fixed elements that follow the scroll are captured at their initial position, not at every scroll position. The result is usually fine (the header is at the top, the footer is at the bottom), but a parallax effect or a fixed chat widget may not render correctly.
• Lazy-loaded images — images that load only when in the viewport are captured based on whether they have loaded by the time of capture. The DevTools approach scrolls through the page first, so most lazy content is loaded by the time the screenshot is taken. Some pages (with very heavy lazy loading) may still miss content.
• Cross-origin iframes — iframes from other domains are not captured. They show as blank or as their placeholder.
• Animations and video — animations are captured at a single frame. Video may be captured as the poster image, or as a black box, depending on the browser.

Firefox (built-in)

Firefox has full-page screenshots in the page actions menu.

The exact steps

1. Click the page actions button (three dots, top-right) or right-click anywhere on the page.
2. Pick "Take a Screenshot".
3. Pick "Save full page".
4. The screenshot downloads as a PNG.

Alternative: the keyboard shortcut Ctrl-Shift-S. The Firefox tool has a click-and-drag region mode and a "Save visible" mode, in addition to "Save full page".

Safari (built-in, partially)

Safari does not have a one-click "full page screenshot" feature. The closest option is "Save as PDF" (File → Save as PDF or Cmd-P, then "Save PDF to disk"). The PDF preserves the full page content and is a reasonable substitute.

For an actual PNG, the workaround is to use the Web Inspector (Develop → Show Web Inspector) and run a JavaScript snippet to capture the full page. Or use a third-party extension like "Full Page Screen Capture" from the Mac App Store.

Third-party extensions (when built-in is not enough)

GoFullPage (Chrome, recommended)

The most popular full-page screenshot extension. One click, captures the entire page, downloads as a PNG. Free, no account. Handles the edge cases better than the built-in DevTools method: scrolls through the page to load lazy content, deals with sticky elements, captures cross-origin iframes (with a permission prompt).

Fireshot (Chrome, Firefox, Edge)

Another popular option. Captures the full page, a visible area, or a selected region. Has built-in annotation (arrows, boxes, text). Free for personal use; paid for team features.

Full Page Screen Capture (Safari, Mac App Store)

The closest equivalent for Safari. One click from the toolbar, captures the full page, downloads as PNG or PDF. Free with a paid upgrade for batch capture.

The "scroll and stitch" approach

For a long page that no tool handles cleanly, the manual approach works:

1. Take a screenshot of the visible area.
2. Scroll down by one viewport height.
3. Take another screenshot.
4. Repeat until the bottom of the page.
5. Stitch the screenshots together with an image editor (Photoshop, GIMP, or a free tool like ImageMagick).

This is the last resort. The output is not pixel-perfect (overlap zones, parallax shifts, fixed elements duplicated) but it works for everything.

Mobile: iPhone and Android

iPhone

The iPhone has no built-in full-page screenshot. The workarounds:

• Take multiple screenshots and stitch — same as the manual desktop approach. Tedious but works.
• Use a third-party app — apps like "Pic Stitch" or "Tailor" can stitch multiple iPhone screenshots into one image. Tailor is the most popular; it detects the overlap and stitches automatically.
• Use a Mac and QuickTime — plug the iPhone into the Mac, open QuickTime Player, choose File → New Movie Recording, select the iPhone as the camera. The full screen of the iPhone appears in QuickTime, where you can take a screenshot of the entire thing. (Note: this captures the screen, not the scrollable content beyond the viewport.)

Android 12+

Android 12 introduced a built-in scrolling screenshot:

1. Take a normal screenshot (Power + Volume Down).
2. Tap "Capture more" in the screenshot preview that appears.
3. The screen scrolls and captures automatically.
4. Tap "Save" when the whole page is captured.

This works for most apps and web pages. Some apps (with custom scroll containers) block it.

Special cases

Pages that scroll horizontally (e.g. maps)

Some pages have horizontal scroll (maps, dashboards). The full-page screenshot captures the vertical extent but may not handle horizontal scroll. The fix: resize the browser window to be very wide (e.g. 5000 pixels) before taking the screenshot. DevTools has a responsive mode that lets you set any viewport size.

Pages that use canvas or WebGL

Canvas and WebGL content is rendered by JavaScript at runtime. The built-in screenshot tools capture the current state of the canvas, which may not be the state you want. The fix: pause animations and wait for the canvas to be in the desired state before capturing.

Pages that require login

The full-page screenshot captures whatever the logged-in user sees. For a private page, the screenshot is private too. The built-in tools do not anonymize; if the page has personal information, it ends up in the PNG. Redact before sharing.

Pages with DRM or restricted content

Netflix, Disney+, and other streaming services have DRM that prevents screenshot capture. The screenshot will be black or show a "screenshot not allowed" message. This is intentional, not a bug.

What to do with the screenshot

Most full-page screenshots need some post-processing before they are useful:

• Compress — a 10,000-pixel-tall PNG can be 10+ MB. The Uttir Image Compressor reduces the size without visible quality loss.
• Resize — if the screenshot is for a presentation or documentation, scale it down. The Uttir Image Resizer handles this in your browser.
• Crop — if you only need a portion (the top of a long article, the footer of a long page), crop it. The Uttir Image Cropper does this locally.
• Convert to JPG — if file size matters and the screenshot is for web viewing, convert to JPG. PNG is lossless but larger; JPG is smaller with imperceptible quality loss for screenshots. The Uttir PNG to JPG tool does the conversion.

All of these run in your browser. The screenshot never leaves your device.

Common pitfalls

Capturing the wrong viewport

If the browser window is small (e.g. resized for testing), the "full page" screenshot is the full content of the small viewport. The result is much wider than expected. The fix: maximize the window or set a specific viewport size in DevTools before capturing.

Forgetting device pixel ratio

A "Retina" or high-DPI display has a 2x or 3x device pixel ratio. The screenshot is captured at the actual pixel resolution, so a 1920-pixel-wide viewport becomes a 3840-pixel-wide image on a Retina display. The fix: scale the image down with the Uttir Image Resizer after capturing, or set the browser to 1x DPR in DevTools.

Including the browser chrome

The built-in tools capture only the page content, not the browser UI (URL bar, tabs, bookmarks). This is usually what you want. If you want the chrome too, take a normal screenshot of the whole screen instead.

Bottom line

Full-page screenshots are the right tool for capturing long pages, design references, and complete app screens. Chrome and Edge have it built into DevTools; Firefox has it in the page menu; Safari requires a workaround. For most cases, the built-in tools are enough. For edge cases (very long pages, sticky elements, lazy content), a dedicated extension like GoFullPage is the right choice. The Uttir Image Compressor and Resizer handle the post-processing.