How to Capture a Web Page in High Resolution

Short answer: choose between a viewport screenshot and a full-page screenshot, then choose a device pixel ratio (DPR) if you need more pixels for the same CSS layout. In Chrome, open DevTools Device Mode, choose More options, then Capture a full size screenshot. In Firefox, use Save full page or run :screenshot --fullpage --dpr 2. Always inspect the saved file: page length and pixel density are separate settings, and dynamic pages can still omit, duplicate, or move content.

What “high resolution” means

A screenshot is a raster image. Two independent choices determine its result:

Coverage: a viewport capture includes only what is visible; a full-page capture includes content outside the viewport.
Pixel density: DPR controls how many screen pixels Chrome or Firefox uses to draw each CSS pixel. A higher DPR increases raster dimensions without changing the CSS layout.

A tall full-page image can contain many vertical pixels without being higher density. Conversely, increasing DPR can make a viewport or full-page file much larger while showing the same layout. The official browser documentation does not define one ideal DPR or a universal maximum image size, so check the actual dimensions and file size after every capture.

Choose the right capture method

Need	Best starting point	Check
Only what is visible	Chrome DevTools Capture screenshot or Firefox Save visible	Viewport, zoom, and responsive layout
The entire document	Chrome Capture a full size screenshot or Firefox Save full page	Missing, repeated, or unloaded sections
More pixels per CSS pixel	Set DPR in Chrome Device Mode or use Firefox `--dpr N`	Exported pixel dimensions and file size
One element	Firefox `:screenshot --selector <CSS selector>`	Selector matches the intended element and descendants
Repeatable captures	Chrome Headless with `--screenshot` and `--window-size`	Waits, dynamic content, and full-page workflow

Chrome: capture a high-resolution full page

1. Set the viewport and DPR

Open the page in Chrome.
Open DevTools and turn on Device Mode.
Choose a device preset or set a custom viewport width and height.
Use the DPR control to add and select the density you need.

Chrome defines DPR as the ratio between physical hardware-screen pixels and logical CSS pixels. A larger DPR is useful when the image will be inspected closely or printed, but it can produce a very large file.

2. Capture the page

Open the Device Mode More options menu.
Choose Capture a full size screenshot for the complete document.
Choose Capture screenshot when only the current viewport is required.
Open the saved image and verify the top, bottom, text, images, and dynamic sections.

Chrome documents both screenshot commands and the DPR control in its Device Mode guide.

Firefox: save a full page or set DPR from the console

Firefox interface

Open the Firefox screenshot interface and choose Save full page for the whole document or Save visible for the current viewport. Mozilla documents saving the image or copying it to the clipboard in Take screenshots in Firefox.

Firefox Web Console

For a full page at DPR 2, open the Web Console and run:

:screenshot --fullpage --dpr 2

Replace 2 with the desired density. Firefox also supports a filename, delay, and CSS selector:

:screenshot page.png --fullpage --dpr 2 --delay 1000
:screenshot hero.png --selector ".hero" --dpr 2
:screenshot delayed.png --delay 2000

The --fullpage option includes content outside the current window bounds. The --selector form targets an element and its descendants. Reusing a filename overwrites the previous capture, so use unique names for batch work. See Mozilla’s screenshot command documentation.

Chrome Headless for repeatable captures

Chrome Headless supports --screenshot and --window-size, which is useful for a chosen viewport in scripts or CI:

google-chrome --headless --screenshot=page.png --window-size=1440,900 https://example.com

The documented simple command captures the chosen window. Full-page automation requires a more involved workflow than this flag alone. Treat browser command examples as version-sensitive and check the current Chrome Headless documentation before putting them in production.

Prepare dynamic pages before capturing

Navigate to the exact URL and state you need.
Make content that appears after scrolling or interaction visible before capture.
Wait for images, fonts, and application data to finish loading.
Disable or accommodate animations when a moving element causes inconsistent frames.
Inspect the result for sticky headers repeated down a long image, lazy images that never loaded, embedded frames, and content that changed during capture.

Browser documentation does not provide a complete compatibility guarantee for every dynamic site. A repeatable workflow should therefore validate the output instead of assuming that a full-page command handled every lazy or animated component.

High-resolution capture checklist

Decide viewport versus full page.
Set the CSS viewport width and height.
Choose DPR only when additional raster pixels are needed.
Load or reveal content that appears after scrolling or interaction.
Wait for images, fonts, and data.
Use a unique output filename.
Inspect actual pixel dimensions and file size.
Check the top and bottom of long pages for missing or duplicated content.
Use the smallest DPR that meets the viewing or print requirement.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. It can capture a full page with lazy images loaded, a single CSS-selected element, dark mode, device presets or any viewport, and a chosen retina scale.

Its capture controls also include custom CSS and JavaScript, clicking an element, waiting for a selector, delay, or network idle, blocking ads, trackers, requests, or resource types, custom headers, cookies, user agents and Authorization, timezone and geolocation, transparent backgrounds, image resizing, a selectable cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification.

Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo API documentation for request details.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Free accounts include 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Likely cause	Fix
The image stops at the viewport	A visible screenshot command was used	Use Chrome’s Capture a full size screenshot, Firefox Save full page, or Firefox `--fullpage`.
The image is large but text is not denser	Page coverage and DPR were confused	Keep full-page capture for height; raise DPR for more pixels per CSS pixel.
Images are blank or missing	Lazy loading or asynchronous content had not completed	Scroll or interact to reveal content, wait, then capture again.
A sticky header appears repeatedly	The page layout was captured while the header remained fixed	Inspect the output and adjust the page state or capture workflow.
Animations differ between captures	The frame changed during capture	Disable animations where possible or add a deliberate delay before capture.
Firefox capture overwrote an earlier file	The same filename was reused	Use a unique filename for each capture.
Headless Chrome is only viewport-sized	`--screenshot` with `--window-size` was used without a full-page workflow	Use a browser automation workflow designed for full-page capture.
ScreenshotNeo response is not a clean page	The target returned a bot check, blank page, timeout, or failed load	Read `X-Page-Verdict` and `X-Billed`, then adjust waits, headers, cookies, user agent, or blocking settings.
Python or Node request fails	Invalid key, inaccessible URL, or non-success HTTP response	Check the API key and target URL, keep a long client timeout, and handle non-2xx responses before writing the file.

Performance, reliability, and cost

Performance

Full-page captures and higher DPR both increase work and output size. Use the smallest viewport and DPR that meet the requirement, and capture a single element when the deliverable does not need the whole document. For repeat jobs, caching with a TTL you choose can avoid unnecessary recapture.

Reliability

Validate saved dimensions and inspect representative pages. Dynamic content, animations, sticky elements, embedded frames, and lazy loading can affect the result. For API workflows, use waits suited to the page, preserve the response verdict headers, and use asynchronous jobs with signed webhooks for longer or larger batches.

Cost

Browser screenshots have no separate hardware requirement according to the reviewed sources. ScreenshotNeo bills only clean shots: bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Plans are Free (1,000 per month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000).

FAQ

Is a full-page screenshot automatically high resolution?

No. Full page controls how much document is included. DPR controls raster density.

What DPR should I use?

Use the smallest value that satisfies the intended viewing or print size, then verify the exported dimensions and file size. The official docs do not define one universal best value.

Can I capture only one element?

Firefox supports :screenshot --selector. ScreenshotNeo can capture one element by CSS selector.

Why is my very tall image so large?

Page height, DPR, image content, and output format all contribute. Lower DPR, capture only the required element, or use an image format and dimensions appropriate for the destination.

Should I use a screenshot for text archival?

If you need searchable text and links rather than visual appearance, a screenshot may not be the right archival format.