What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Make screenshot dimensions deterministic by fixing the viewport, pixel density, and capture mode before capture. For Firefox’s command-line screenshot, pass an explicit --window-size; for Playwright, set a context viewport and deviceScaleFactor, then choose CSS-pixel or device-pixel output with scale. Also decide whether you need only the visible viewport or the full page: those produce different height contracts.
Choose the dimensions you actually need
“Screenshot size” can mean the browser’s CSS viewport, the PNG’s pixel width and height, or the full document’s scrollable dimensions. A repeatable capture specifies all of these that matter. For example, a viewport capture might mean a 1440 × 900 CSS-pixel viewport with one output pixel per CSS pixel. A full-page capture instead keeps a chosen width but extends the image vertically to include the scrollable page.
- Viewport: the visible browser area used for layout and responsive breakpoints.
- Pixel density: how CSS pixels map to output image pixels. A device-pixel ratio above 1 can make a screenshot larger in pixels than its CSS viewport.
- Capture mode: visible viewport or full scrollable page. Full-page capture changes the output height and should not be compared with viewport-only captures as though they were the same artifact.
Before comparing files, write down the intended viewport width and height, device-pixel ratio, screenshot scale, full-page setting, browser and automation-library versions, and the page state to capture. A stable contract is more useful than relying on a browser window or CI host default.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteSet dimensions with Firefox’s native headless command
For a direct Firefox command-line capture, specify both dimensions with --window-size and supply an explicit screenshot filename:
#1 Best Overall
firefox --headless --window-size=1440,900 --screenshot=page.png https://example.comMozilla’s Firefox Source Docs describe --window-size width[,height] as the width and optional height used for --screenshot. Including both values avoids leaving the height to an implicit setting. Use the same command-line arguments and Firefox version on each machine where you need comparable output.
The separate Web Console :screenshot helper has its own controls. When using it, choose the device-pixel ratio and full-page behavior explicitly:
:screenshot page.png --dpr 1 --fullpageHere, --dpr 1 requests a device-pixel ratio of 1, while --fullpage requests the full page rather than only the visible viewport. Omit or change --fullpage according to the artifact you need; don’t treat it as a harmless formatting option because it changes the capture contract. The helper also documents --delay, --selector, and --filename controls. Use a selector when the intended capture is a particular element, and use a delay only when it is part of a deliberate page-readiness strategy.
Free tools Windows power users keep installed
One-click scans. No signup required.
Make Playwright Firefox deterministic
In Playwright, set the viewport and device-pixel ratio when creating the browser context, before navigating. The context viewport defaults to 1280 × 720; setting viewport: null delegates sizing to the host window and is non-deterministic across environments. Playwright recommends setting viewport size before navigation because sites may respond to size changes.
const { firefox } = require('playwright');
(async () => {
const url = 'https://example.com';
const browser = await firefox.launch({ headless: true });
const context = await browser.newContext({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
const page = await context.newPage();
await page.goto(url, { waitUntil: 'networkidle' });
await page.screenshot({
path: 'page.png',
fullPage: false,
scale: 'css'
});
await browser.close();
})();Run it in a project with Playwright installed. The example captures the visible viewport, with a 1440 × 900 CSS viewport, at one output pixel per CSS pixel. If the required output is the entire scrollable document, switch fullPage to true; that will make the image taller than 900 pixels when the page extends below the viewport.
Choose CSS pixels or device pixels
Playwright’s screenshot option scale: 'css' produces one image pixel per CSS pixel. Use it when downstream systems expect the image dimensions to match the CSS viewport. scale: 'device' uses device pixels instead, which can produce larger high-DPI images. Set deviceScaleFactor deliberately and keep it consistent across runs; otherwise output pixel dimensions can differ even if the CSS viewport is unchanged.
Set the viewport another way only when necessary
You can set a Playwright page’s viewport with page.setViewportSize({ width, height }), but apply it before navigation when the page’s responsive layout matters. Creating a context with the desired viewport makes the contract visible at setup time and avoids accidentally capturing with a default or host-sized viewport.
Wait for the page state you mean to capture
Matching viewport and scale settings does not guarantee identical content if the page is captured at different points in its loading lifecycle. Fonts, images, animations, client-rendered content, and responsive behavior can change what is visible or the document’s height. Choose a readiness condition that matches the page and use it consistently. The Playwright example waits for networkidle; it is a choice, not a universal promise that every application is visually settled.
Rank #3
If late-loading content is relevant, wait for a meaningful selector or a deliberate delay rather than assuming a fixed amount of time is right for every site. For full-page captures in particular, wait until the content that determines the document height has loaded. Record the readiness approach alongside viewport and scale settings so changes in timing are distinguishable from changes in image dimensions.
Measure what the browser is about to capture
Log these values immediately before taking a screenshot when diagnosing a mismatch:
console.log({
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
scrollWidth: document.documentElement.scrollWidth,
scrollHeight: document.documentElement.scrollHeight,
devicePixelRatio: window.devicePixelRatio
});innerWidth and innerHeight describe the page’s current viewport in CSS pixels. The document’s scrollWidth and scrollHeight help identify content extending beyond it. devicePixelRatio reveals the browser’s current pixel-density setting. These measurements help separate a viewport mismatch from a full-page height difference or a pixel-scale difference.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Troubleshoot dimension changes
| Symptom | Likely setting to inspect | What to do |
|---|---|---|
| Width or height changes between machines | Playwright viewport or native Firefox --window-size |
Set both viewport dimensions explicitly. In Playwright, avoid viewport: null; in Firefox CLI, pass the desired width and height. |
| PNG dimensions are larger than the CSS viewport | deviceScaleFactor, device-pixel ratio, or screenshot scale |
For CSS-pixel output in Playwright, use scale: 'css'. Set the context’s deviceScaleFactor explicitly rather than inheriting an environment-specific value. |
| Only the image height differs | fullPage or --fullpage |
Compare viewport captures with viewport captures and full-page captures with full-page captures. Check document scroll height when full-page output varies. |
| Layout or document height changes despite matching settings | Capture timing, content loading, or responsive layout | Use the same readiness condition and inspect the logged viewport and document measurements immediately before capture. Ensure all workers navigate and capture in the same order. |
| CI output differs from local output | Firefox and Playwright versions, viewport, DPR, scale, or full-page flag | Make those settings identical across workers and record the versions used. Do not let a CI host window determine the viewport. |
| The wrong or stale file appears to have been captured | Filename and command-line arguments | Use an explicit output filename and inspect the exact arguments passed to the process. The Firefox screenshot helper documents filename controls and overwrite behavior. |
A practical CI check is to log the browser and Playwright versions together with viewport, device-pixel ratio, screenshot scale, and full-page setting for every capture job. That gives you enough information to tell whether a changed PNG came from a changed contract or a changed page state.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server: a GET request with a URL returns a PNG, JPEG, WebP, or PDF. Its capture options include viewport/device presets, retina scale, full-page capture, and format selection, so you can specify the artifact you need without setting up a Firefox process for each request.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request parameters and response details. Before capture, ScreenshotNeo accepts cookie and consent banners like a visitor 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 are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; yearly billing gives two months free, and every feature is on every plan. Sign up for ScreenshotNeo free to get 1,000 screenshots a month with no card.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Keep a capture contract for each workflow
For a repeatable result, make the capture configuration explicit and preserve it with the job:
- Browser and automation-library versions.
- Viewport width and height, set before navigation.
- Device-pixel ratio or
deviceScaleFactor. - Output scale: CSS pixels or device pixels.
- Viewport-only or full-page mode.
- Page readiness condition and any selector or delay.
- Measured viewport and document dimensions at capture time.
When a PNG changes, compare those values first. They distinguish configuration drift from a genuine change to the page being captured.
Best Value
Frequently Asked Questions
Does Firefox’s --window-size change the webpage’s CSS dimensions or only the output image?
It supplies the width and optional height used for Firefox’s command-line --screenshot. For a specific page, inspect window.innerWidth and window.innerHeight during capture to see the viewport the page actually received.
Should I use networkidle for every Playwright screenshot?
No. It is one possible navigation wait condition, but the right readiness condition depends on how the page loads and what content the screenshot must include. Use a condition that represents the page state you need.
Can screenshots with the same width still have different file sizes?
Yes. Pixel dimensions and encoded file size are different properties. This guide’s fixed viewport and scale settings control dimensions; they do not establish a fixed PNG byte size.
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.
