Usually, “wrong size” means one of three different things: the browser used a different CSS viewport than requested, the screenshot was saved at device-pixel scale, or the capture included a clipped region or the full page. Check those separately: record the effective viewport immediately before capture, then compare it with the output image’s pixel dimensions and the capture-region setting.
Separate the three dimensions that can be wrong
A requested width and height do not by themselves establish what the screenshot should measure. Distinguish the page’s layout viewport, the image’s pixel dimensions, and the area captured.
| What you are checking | What it controls | What a mismatch may look like |
|---|---|---|
| CSS viewport width and height | The browser dimensions used to lay out the page and evaluate viewport-related media queries. | The page has a desktop or mobile layout you did not expect. |
| Device scale factor and screenshot scale | How CSS pixels map to output image pixels. | The saved image has more pixels than the CSS viewport dimensions. |
| Capture region | Whether the image shows the visible viewport, a specified clip, or the full scrollable page. | The image is wider, taller, or differently positioned than the visible browser area. |
These settings are related but not interchangeable. A larger output image does not necessarily mean the page used a larger CSS viewport.
Check the effective viewport, not just the request
The API wrapper or service receives your requested size, but the browser page’s effective viewport is what determines layout. In Chrome DevTools Protocol, Page.setDeviceMetricsOverride affects reported screen and inner-window dimensions as well as device-width and device-height media-query results. Playwright likewise distinguishes page viewport sizing from context settings for viewport and screen properties. See the Playwright Page API and the Chrome DevTools Protocol device metrics documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Log the effective page viewport immediately before taking the screenshot. In a browser automation setup, inspect the page’s inner width and height, and compare them with the dimensions you intended to set. If they differ, investigate how the wrapper applies viewport and screen settings rather than diagnosing the image file first.
Set dimensions before navigating
Set the viewport before loading the target site. A page may respond to a resize by changing its layout or state, and Playwright notes that many sites do not expect phones to change size after loading. If both the viewport and screen dimensions matter, configure them deliberately at the browser-context level; a page-level viewport setter resets screen size. The relevant guidance is in the Playwright Page API.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Record the intended viewport width and height in CSS pixels.
- Configure viewport and, where needed, screen dimensions before navigation.
- Navigate to the site, wait for the condition your capture requires, and record the effective viewport immediately before capture.
- Take the screenshot and compare its pixel dimensions with the CSS viewport dimensions, accounting for device scale and capture-region options.
If you resize after navigation, a site that has already initialized may not behave like one loaded at the intended dimensions. Re-run the capture with dimensions configured before navigation to isolate that possibility.
Account for CSS pixels and device pixels
The browser lays out a page in CSS pixels; an image file is measured in output pixels. Those values can differ when the device scale factor or screenshot scale is greater than one. In Playwright, screenshot scale can be css, which produces one output pixel per CSS pixel, or device, which produces one output pixel per device pixel. On a high-DPI configuration, a device-scale screenshot can therefore have larger pixel dimensions than the CSS viewport. See the Playwright Page API.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #3
When diagnosing size, record the CSS viewport, device scale factor, screenshot scale option, and saved image dimensions as separate values. Do not treat a larger image file as evidence that the page layout used a larger viewport.
Verify whether the capture is clipped or full-page
A viewport-sized capture shows the currently visible browser area. A clip captures a specified rectangle, so its output dimensions can differ from the viewport. A full-page capture includes the page’s scrollable content, making its height greater than the viewport when the document scrolls. The Playwright Page API describes the full-page option this way: “When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport.” The Playwright Page API and Chrome DevTools Protocol screenshot documentation describe these capture controls.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Before changing viewport settings, check whether your request enables full-page capture, supplies a clip rectangle, or asks the browser to capture beyond the viewport. A tall full-page image may be correct even when the visible viewport has the requested dimensions.
Inspect the browser controls when using CDP
If you use Chrome DevTools Protocol directly, inspect both sides of the operation: Page.setDeviceMetricsOverride for the emulated page and screen metrics, and Page.captureScreenshot for the captured area and related options. Compare the effective dimensions with the screenshot parameters rather than assuming that a requested size automatically controls both layout and output. See the device metrics method and screenshot method.
Troubleshoot by symptom
| Symptom | Likely cause to check | What to do |
|---|---|---|
| The page uses the wrong responsive layout. | The effective CSS viewport differs from the requested dimensions, or dimensions were changed after navigation. | Set viewport and any required screen dimensions before navigating; log effective page dimensions immediately before capture. |
| The image has more pixels than the requested viewport. | Device-pixel output scale or a device scale factor above one. | Compare CSS viewport size, device scale factor, screenshot scale, and output pixel dimensions independently. |
| The screenshot is unexpectedly tall. | Full-page capture includes scrollable content. | Disable full-page capture if you need only the visible viewport; otherwise expect the image to extend beyond viewport height. |
| The screenshot dimensions do not match the visible area. | A clip rectangle or capture-beyond-viewport option is active. | Inspect the capture parameters and remove or adjust the clip if the intended result is a viewport capture. |
| The requested dimensions appear ignored by a hosted service. | The service or wrapper may apply its own defaults or translate options differently. | Inspect that service’s request schema and effective browser settings. Playwright, Puppeteer, and CDP behavior does not establish the defaults of every hosted API. |
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its one-call request accepts a URL and returns a screenshot or PDF; consult the API documentation for request options, including viewport and capture settings. For example, this requests a screenshot of Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
ScreenshotNeo accepts cookie and consent banners before capture 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, with response headers indicating the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
