Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix Now×
Skip to content
Mountain View desk5 min

How to Capture Website Screenshots at the Exact CSS Pixel Size

Set the browser viewport in CSS pixels and use Playwright’s scale: "css" for one output pixel per CSS pixel. Learn when DPR, full-page capture, and clipping change the result.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To get a screenshot with one image pixel for every CSS pixel, set the browser viewport to the requested width and height, then capture with Playwright’s scale: "css". A viewport setting alone does not determine the exported image’s pixel dimensions: device-pixel ratio (DPR) and whether you capture the full page also matter.

Choose what “exact size” means

First decide whether you need a fixed viewport rectangle or the whole scrollable document. A viewport screenshot has the dimensions of the visible browser area; a full-page screenshot includes content beyond that area and can be much taller. A requested viewport height does not limit the height of a full-page capture.

As an Amazon Associate I earn from qualifying purchases.

  • Fixed viewport: specify CSS-pixel width and height, then capture only what is visible.
  • Full page: specify the viewport width, but expect the output height to follow the rendered page content.
  • Fixed crop: capture a planned rectangle and verify its final dimensions.

Playwright supports viewport, full-page, and clipped screenshots in its Page API. Chrome DevTools distinguishes a visible-viewport screenshot from a full-size screenshot in its Device Mode documentation.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Capture an exact CSS-pixel viewport with Playwright

Set the viewport before navigating, then specify scale: "css". Replace the example URL and dimensions with your target values:

#1 Best Overall
Lavsoul 4K Webcam with Microphone for PC & Streaming Computer Camera
  • ULTRA HD 4K CLARITY: Stand out in every video call with breathtaking 4K video at 30fps or smooth 1080p at 60fps. Powered by a premium 1/2.5" CMOS sensor and a wide f/1.78 aperture, this webcam captures every detail with vibrant color and stunning low-light performance-so you always look your best
  • FAST AUTOFOCUS & SMART LIGHT CORRECTION: No more blurry moments with this webcam for PC. Advanced Phase Detection Auto Focus (PDAF) locks onto your face instantly and keeps you sharp-even when you move. Built-in light correction adapts to your environment, balancing brightness and contrast for a flawless image in dim rooms or bright spaces
  • DUAL NOISE-CANCELING MICS: Speak with confidence using this webcam with microphones. Dual microphones with intelligent noise-canceling tech isolate your voice and reduce background noise-suitable for webinars, live streams, team meetings, and virtual interviews
  • WIDE-ANGLE LENS & FLEXIBLE MOUNTING OPTIONS: Capture more of your world with an 80 field of view and full 360 swivel rotation. Whether this streaming webcam is mounted on a laptop, monitor, or tripod, it allows you to find the right angle for any setup
  • BUILT-IN PRIVACY COVER & PLUG-AND-PLAY SIMPLICITY: Protect your privacy with a secure sliding lens cover that blocks the camera when not in use. Setup is a breeze-just plug into any USB-A port and start streaming, chatting, or recording instantly. The USB webcam is compatible with Zoom, Microsoft Teams, Skype, OBS Studio, and all major platforms across Windows, macOS, and Linux
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1280, height: 800 },
  });
  await page.goto('https://example.com');
  await page.screenshot({ path: 'page.png', scale: 'css' });
  await browser.close();
})();

With scale: "css", Playwright defines the output as one image pixel per CSS pixel. Its ordinary screenshot scale is "device", which produces one image pixel per device pixel and can yield larger output on a high-DPI device. Setting the viewport to 1280 CSS pixels wide therefore does not, by itself, guarantee a 1280-pixel-wide file; choose the scale explicitly and inspect the saved image.

Set the viewport before navigation because changing it later can affect sites that are not designed to handle a viewport change. The scale option controls output pixel scale, not page layout, font rendering, image readiness, animation state, or timing. Keep the browser version, viewport, emulation settings, and capture mode consistent when making repeatable comparisons.

Rank #2
10.1 Inch Mini Netbook, Quad-Core Processor Laptop Computer, 2GB Memory 64GB Storage Android 12 Portable Notebook Built-in Webcam, WiFi & Bluetooth Keyboard & Mouse for Home Schooling & Office Work
  • 【Efficient Quad-Core Performance】 Powered by a 1.8GHz Quad-Core processor, this mini laptop ensures smooth multitasking. With 2GB RAM and 64GB ROM (expandable to 1TB), it handles daily work and online tasks with ease.
  • 【10.1" HD IPS Display & GMS Support】 Featuring a 1280x800 HD IPS screen, this cheap laptop delivers vibrant visuals. Pre-installed with Android OS and GMS, you get direct access to the Google Play Store for apps.
  • 【Ultra-Portable & Lightweight Design】 Weighing only 1.76 lbs, this Blue computer is designed for mobility. Its compact form makes it an ideal companion for students and professionals for home schooling or trips.
  • 【Versatile Connectivity Options】 Stay productive with dual USB 2.0 ports, a headphone jack, and a TF card slot. This computer for kids and adults features built-in Wi-Fi and Bluetooth for stable connections.
  • 【Complete All-in-One Bundle】 This kid laptop kit includes the laptop, carrying bag, mouse, mouse pad, and power adapter. It is the perfect ready-to-use set for online classes, remote work, and entertainment.

Full page or a specific region

For the whole scrollable page, pass fullPage: true:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
await page.screenshot({ path: 'full-page.png', scale: 'css', fullPage: true });

For a fixed rectangular area, use a clip rectangle:

Rank #3
Sale
Logitech C920x HD Pro Webcam, Full HD 1080p/30fps - Black w/Blue Yeti USB Microphone - Blackout
  • Webcam comes with a 3-month XSplit VCam license and no privacy shutter. XSplit VCam lets you remove, replace and blur your background without a Green Screen.
  • Full HD 1080p video calling and recording at 30 fps - You’ll make a strong impression when it counts with crisp, clearly detailed and vibrantly colored video.
  • Stereo audio with dual mics - Capture natural sound on calls and recorded videos.
  • Custom three-capsule array: This professional USB mic produces clear, powerful, broadcast-quality sound for YouTube videos, Twitch game streaming, podcasting, Zoom meetings, music recording and more
  • Blue VOICE software: Elevate your streamings and recordings with clear broadcast vocal sound and entertain your audience with enhanced effects, advanced modulation and HD audio samples
await page.screenshot({
  path: 'region.png',
  scale: 'css',
  clip: { x: 0, y: 0, width: 640, height: 400 },
});

Plan clip coordinates and dimensions in page/CSS-coordinate terms, and check the resulting file dimensions for the Playwright version and page you use. A clip is useful when the required deliverable is a known rectangle rather than the visible viewport or entire document.

Make captures more repeatable

Wait for the content relevant to your image to load and settle. Navigation completing is not a universal guarantee that fonts, images, lazy-loaded sections, animations, or third-party widgets are ready. When dynamic styling interferes with a stable capture, Playwright’s screenshot style or stylePath option can apply a stylesheet for the screenshot; the documented styling also reaches Shadow DOM and inner frames.

Rank #4
Webcam Cover for Logitech C920 C930e c922x Lens Privacy Shutter Slider
  • Compatible with Logitech C920x HD Pro Webcam, Full HD 1080p/30fps Video Calling. Compatible with Logitech C920 Hd Pro Webcam. Compatible with Logitech HD Pro Webcam C920 Widescreen Video Calling and Recording Webcam.
  • Compatible with Logitech C930e Webcam. Compatible with Logitech C922 Pro Stream Webcam 1080P Camera for HD Video Streaming. Compatible with Logitech Privacy Cover for C920 and C930e.
  • This webcam cover conveniently blocks your camera cover to protect your privacy.
  • This also compatible with other popular webcams. This is also known as webcam lid, webcam cap, webcam protector, web camera privacy cover.
  • ienza is a registered trademark and a registered Amazon brand. Use of the ienza trademark without the prior written consent of ienza, LLC. may constitute trademark infringement and unfair competition in violation of federal and state laws. ienza products are developed as cost-effective alternatives to OEM parts. They are not necessarily endorsed by the OEMs
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Capture manually in Chrome DevTools

  1. Open Chrome DevTools and turn on Device Mode.
  2. In the responsive viewport fields, enter the requested width and height.
  3. Choose the capture mode: use More options > Capture screenshot for the visible viewport, or More options > Capture a full size screenshot for the whole page.
  4. Inspect the downloaded image’s width and height rather than assuming the viewport fields guarantee the exported dimensions.

Device Mode provides a DPR control. DPR describes the relationship between physical hardware-screen pixels and logical CSS pixels, so it matters when interpreting device-scale output. The DevTools guidance does not establish an explicit output-scale selector equivalent to Playwright’s scale: "css"; do not assume a DevTools capture is always one output pixel per CSS pixel across display and emulation conditions. Verify the file.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Know which setting controls which pixels

Choice What it determines What to verify
Viewport width and height The page’s visible layout area, in CSS pixels Set before navigation for automated captures
CSS scale in Playwright One output image pixel per CSS pixel Inspect the saved file’s dimensions
Device scale in Playwright One output image pixel per device pixel; output may be larger than CSS dimensions Account for DPR rather than equating viewport pixels with file pixels
Viewport capture The visible viewport Use when a fixed viewport-sized image is required
Full-page capture The full scrollable page Its height follows rendered content, not just the viewport setting

Troubleshoot unexpected dimensions or content

  • The file is larger than the viewport dimensions: check whether the capture used device scale instead of CSS scale, and inspect DPR and emulation settings.
  • The image is much taller than expected: confirm that you did not request a full-page capture. Full-page height follows the document’s rendered content.
  • The page layout differs from the expected size: make sure the viewport was set before navigation. A site may respond differently if its viewport changes after loading.
  • Images or sections are missing: wait for the relevant content to load; lazy images and third-party content may not be ready merely because navigation completed.
  • Repeated captures differ: keep browser version, viewport, device settings, capture mode, and relevant page styling consistent; use screenshot styling to control dynamic elements where appropriate.
  • A clipped image has unexpected boundaries: review the clip rectangle and validate the resulting file rather than relying only on the requested coordinates.

Or skip the browser setup

ScreenshotNeo is a screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. For a capture at a specified viewport, pass the dimensions and output format required by the API; see the ScreenshotNeo documentation for its current parameters and examples.

curl -G "https://api.screenshotneo.com/v1/shot" 
  -d access_key=YOUR_API_KEY 
  --data-urlencode url=https://example.com 
  -d width=1280 
  -d height=800 
  -o shot.webp

ScreenshotNeo accepts 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, and response headers identify the page verdict and billing status. Its MCP server provides screenshot and PDF tools for AI agents. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.

Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.