How to Capture a Screenshot at a Specific Size

To capture a screenshot at a specific size, set the browser viewport width and height before capturing. In Chrome, open DevTools, enable Device Mode, enter the required dimensions in Responsive mode, then choose a viewport or full-page screenshot. For repeatable automation, use WebDriver BiDi or a screenshot API that accepts viewport settings.

The important distinction is between viewport dimensions and final bitmap dimensions. A 1920×1080 viewport can produce a different file size when device pixel ratio, browser zoom, operating-system scaling, or export settings change. If the file dimensions are contractual, inspect the saved image and standardize those variables.

Choose the capture type first

Capture	What it includes	Use it when
Viewport	Only the visible browser viewport at the configured width and height	You need an exact desktop, tablet, or mobile frame
Full page	The entire scrollable document; height can exceed the configured viewport	You need a complete article, dashboard, or landing page
Area	An arbitrary rectangle selected on the page	You need a crop with known screen coordinates
Element	A single inspected HTML node	You need one card, chart, component, or widget

Chrome DevTools: capture an exact viewport

1. Open the page in Chrome.
2. Open DevTools with F12 or Inspect.
3. Enable Device Mode with the phone/tablet icon or Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS).
4. Select Responsive.
5. Enter the required width and height in the dimension fields. Chrome documents common presets including 320px, 375px, 425px, 768px, 1024px, 1440px, and 2560px, while Responsive mode accepts custom values. See the Chrome Device Mode documentation.
6. Set zoom to 100% and keep the same device scale settings for every capture.
7. Open the Device Mode three-dot menu and choose Capture screenshot.

Example: for a 1920×1080 viewport, enter 1920 for width and 1080 for height, wait for the page to finish rendering, then capture the viewport.

Capture the entire page at a specific width

Set the width in Responsive mode, then choose Capture full size screenshot from the same menu. This keeps the configured viewport width but captures content below the fold, so the resulting image height is usually greater than the viewport height. Chrome describes this as capturing the whole page, including content that is not currently visible, in its screenshot documentation.

Full-page capture can expose layout problems that are hidden in a viewport shot: lazy images may not have loaded, sticky headers can repeat, and very long pages can create large files. Scroll through the page first when lazy-loaded content matters.

Capture an area or one element

Area capture

Use DevTools’ area capture command to drag a rectangle around the part of the page you need. This is useful when the rectangle is more important than the underlying DOM structure.

Element capture

1. Open the Elements panel.
2. Inspect the target node.
3. Open the command menu with Ctrl+Shift+P or Cmd+Shift+P.
4. Run the node screenshot command.

The node workflow follows the element’s rendered bounds. Padding, borders, transforms, and overflow can therefore affect the output dimensions. Chrome documents both area and node screenshot workflows in its DevTools screenshot guide.

Why the saved image may not be the dimensions you entered

• Device pixel ratio: a high-DPI emulation setting can multiply CSS pixels into bitmap pixels.
• Browser zoom: zoom other than 100% changes layout and rasterization.
• Operating-system scaling: display scaling can influence device emulation and exported pixels.
• Full-page mode: the height becomes the document’s scrollable height, not the viewport height.
• Element bounds: fractional CSS coordinates can be rounded when rasterized.
• Image processing: later resizing or format conversion changes the final dimensions.

After capture, check the file metadata with an image tool or library. For a strict contract, record the browser version, viewport, zoom, device scale, operating system, and output format.

Automate exact captures with WebDriver BiDi

For CI, visual regression, and repeatable documentation, automate the browser instead of relying on a manually configured DevTools window. MDN documents WebDriver BiDi’s browsingContext.captureScreenshot, which returns an encoded image and supports a rectangular region or a specific element: MDN WebDriver BiDi reference.

Your BiDi client must create a browsing context, navigate to the URL, set the viewport through the browser automation implementation, wait for the page state you require, and call browsingContext.captureScreenshot. Use a region when you need fixed coordinates; use an element reference when the target is a DOM component. Keep the same browser, scale factor, fonts, and rendering environment in CI to reduce pixel drift.

Make dimensions reproducible

1. Define width and height in CSS pixels in source control.
2. Use one browser version and a fixed operating-system image.
3. Set browser zoom to 100%.
4. Keep device pixel ratio and display scaling constant.
5. Wait for fonts, images, and application data before capture.
6. Disable animations or wait for a stable animation frame.
7. Save lossless PNG files for visual comparisons; use WebP or JPEG when size matters.
8. Validate the output width and height after every capture.

Performance, reliability, and cost considerations

• Viewport screenshots are faster and smaller than full-page captures.
• Full-page screenshots take longer on pages with many images, large DOM trees, or lazy loading.
• Waiting for network idle can improve completeness but may never finish on pages with analytics or streaming requests; use a bounded wait or a selector that signals readiness.
• Element captures avoid processing unrelated page content.
• For many URLs, queue work and limit concurrency so the target sites and your browser hosts are not overloaded.
• Cache stable pages when appropriate, but invalidate the cache when content or authentication changes.

Troubleshooting

Symptom	Likely cause	Fix
Output is wider or narrower than expected	Zoom, device pixel ratio, or scaling differs	Use 100% zoom, standardize scale, and verify bitmap metadata.
Height is much larger than requested	Full-page capture was selected	Use viewport capture for a fixed height, or accept document height for a full-page image.
Images are missing	Lazy loading has not been triggered or the page is still loading	Scroll before capture, wait for the image selector, and confirm network completion.
Fonts change between runs	Web fonts are late, unavailable, or different on the runner	Wait for fonts, package required fonts in the runner, and use the same environment.
Sticky elements repeat in a full-page image	The browser stitched multiple viewport regions	Use a viewport shot, hide the sticky selector, or capture the content element directly.
Element screenshot has unexpected padding	CSS box model, borders, transforms, or fractional bounds	Inspect computed bounds and capture a wrapper with explicit dimensions.
Capture command is unavailable	Wrong DevTools panel or browser version	Use Device Mode’s three-dot menu, update Chrome, and retry from the documented workflow.
Automated capture is blank	Navigation or application rendering has not completed	Wait for a page-ready selector, check console and network errors, and retry with a bounded timeout.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API with viewport options for exact dimensions, full-page and element capture, device presets, retina scale, waits, custom CSS and JavaScript, and image resizing. Configure the required width and height with the options in the ScreenshotNeo API documentation.

Before capture, ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports 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.

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)
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}`);

The free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 screenshots, and every feature is available on every plan. Create a free ScreenshotNeo account.

FAQ

Can I guarantee a 1920×1080 file?

You can guarantee the viewport dimensions by setting 1920×1080, but verify the saved bitmap because device scale, zoom, and export behavior affect physical pixels.

Should I use viewport or full-page capture?

Use viewport capture for a fixed width and height. Use full-page capture when all scrollable content matters; its height will vary with the document.

How do I capture only a card?

Use DevTools node capture or an automated element screenshot. Give the card a stable selector and explicit dimensions when exact output is required.

What is the most repeatable approach for CI?

Use automated capture in a fixed browser and operating-system environment, wait for a deterministic ready condition, and validate image dimensions after saving.