DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PC×
Skip to content
World desk4 min

How to Capture a Website Screenshot at 4K Resolution with Playwright

Use Playwright's viewport, deviceScaleFactor, and screenshot scale settings to capture a 3840 × 2160 website screenshot, with options for full-page and element captures.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

To save a viewport-sized 3840 × 2160 screenshot with Playwright, set a 1920 × 1080 CSS viewport, set deviceScaleFactor: 2, and capture with scale: 'device'. The viewport is measured in CSS pixels; the saved image uses device pixels. Alternatively, use a 3840 × 2160 viewport at device scale 1. You do not need a physical 4K monitor.

Set the viewport and output scale separately

Playwright controls screenshot dimensions through two settings. The browser context’s viewport sets the page’s visible area in CSS pixels. Its deviceScaleFactor sets the emulated device-pixel ratio. The screenshot option scale determines whether the output uses CSS pixels or device pixels: 'css' means one output pixel per CSS pixel, and 'device' means one output pixel per device pixel. The default device scale factor is 1. See the Page API and Browser API.

As an Amazon Associate I earn from qualifying purchases.

For the usual 3840 × 2160 target, either of these configurations gives those viewport-sized output dimensions when captured at device scale:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
CSS viewport Device scale factor Screenshot scale Expected viewport image
1920 × 1080 2 'device' 3840 × 2160
3840 × 2160 1 'device' 3840 × 2160

The first setup renders a conventional 1920 × 1080 CSS viewport at twice the pixel density. The second uses a 3840 × 2160 CSS viewport at the default pixel density. Choose based on the CSS layout you want to render, not on the monitor you own.

#1 Best Overall
Sale
Dell 27 Monitor S2725QS, 4K UHD IPS, 120Hz, 5ms, FreeSync Premium | 350 cd/m2 Brightness, 1,500:1 Contrast, 99% sRGB, Anti-Glare, HDMI, DisplayPort, USB‑C, Height Adjustable, Swivel, Pivot
  • Improved ComfortView Plus: Reduces harmful blue light emissions to ≤35%, for all-day comfort without sacrificing color accuracy.
  • Refresh rate: A smooth, tear-free experience with AMD FreeSync Premium (refresh rate up to 120Hz) and an ultra-low 0.03ms response time create a captivating experience for work and play.
  • Vivid colors: Immerse yourself in breathtaking 4K visuals with in-plane switching technology. Enjoy vibrant colors with 99% sRGB. The 1500:1 contrast ratio and HDR readiness deliver excellent depth and detail.
  • Re-engineered sound quality: Enjoy more detailed sound with spacious audio featuring greater output power, deeper frequency response and more decibel range than the previous generation.
  • Ultra-thin bezel: Designed with a sleek, modern aesthetic and an ash white finish, this display features ultra-thin bezels for a refined, minimalist design.

Capture a viewport-sized 4K image

Install Playwright in your project if needed with npm install playwright. The example below captures the visible 1920 × 1080 CSS viewport and writes a PNG with an intended 3840 × 2160 pixel output.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const context = await browser.newContext({
      viewport: { width: 1920, height: 1080 },
      deviceScaleFactor: 2,
    });
    const page = await context.newPage();

    await page.goto('https://example.com', { waitUntil: 'networkidle' });
    await page.screenshot({
      path: 'screenshot-4k.png',
      scale: 'device',
    });
  } finally {
    await browser.close();
  }
})();

waitUntil: 'networkidle' waits for network activity to settle before capture; pages with ongoing requests may not reach that state. If that happens, use a suitable navigation condition such as 'load' and wait explicitly for the content you need before calling screenshot(). Playwright’s navigation and screenshot behavior is documented in the Page API.

Choose what part of the page to capture

Visible viewport

The code above captures the currently visible page area. With the 1920 × 1080 CSS viewport and device scale 2, the intended saved image is 3840 × 2160 pixels.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #2
Sale
LG 27US500-W Ultrafine Monitor 27-Inch 4K UHD (3840x2160) HDR10 IPS Borderless Design Reader Mode Flicker Safe Switch App HDMI DisplayPort - White
  • 4K UHD with 1000:1 Contrast Ratio - This UltraFine display with a 1000:1 contrast ratio displays deeper blacks and vivid colors in UHD clarity. With wide viewing angles, it gives creative professionals the ability to view and work with highly-detailed, digital imagery.
  • 4K HDR10 DCI-P3 - Explore HDR10 content the way it was meant to be seen with up to 90% DCI-P3 color gamut expression—an elevated color spectrum that brings brilliant color to life.
  • Onscreen Control - You can customize the workspace by splitting the display or adjusting basic monitor options with just a few mouse clicks.
  • Ergonomic Stand - The ergonomic stand makes it easy to flexibly adjust the tilt of the screen in the optimal position for you.
  • What's In The Box - Stand Body, Stand Base, Screws, Power Adapter, HDMI Cable, Quick Start Guide, Registration Card, Warranty.

Full scrollable page

Add fullPage: true to the screenshot options to capture the full scrollable document:

await page.screenshot({
  path: 'full-page.png',
  scale: 'device',
  fullPage: true,
});

A full-page screenshot is not necessarily 3840 × 2160: its height follows the page’s scrollable content and can be much taller than the viewport. Playwright describes it as capturing the full scrollable page “as if you had a very tall screen and the page could fit it entirely.” See the Screenshots guide and Page API.

One element

For a component or other specific element, use a locator screenshot rather than capturing the whole page. For example:

Rank #3
Sale
Dell 32 Monitor S3225QS, 4K UHD VA, 120Hz, FreeSync Premium, Eye Comfort | 3840x2160, 31.5in, 3000:1 Contrast, 300 cd/m2 Brightness, 4ms, 99% sRGB, Anti-Glare, HDMI, DisplayPort
  • Improved ComfortView Plus: Reduces harmful blue light emissions to ≤35%, for all-day comfort without sacrificing color accuracy.
  • Refresh rate: A smooth, tear-free experience with AMD FreeSync Premium (refresh rate up to 120Hz) and an ultra-low 0.03ms response time create a captivating experience for work and play.
  • Vivid colors: Immerse yourself in 4K visuals with a VA panel. Enjoy true-to-life colors with 99% sRGB and 95% DCI-P3 coverage. The 1500:1 contrast ratio and HDR readiness deliver excellent depth and detail.
  • Re-engineered sound quality: Enjoy more detailed sound with spacious audio featuring greater output power, deeper frequency response and more decibel range than the previous generation.
  • Ultra-thin bezel: Designed with a sleek, modern aesthetic and an ash white finish, this display features ultra-thin bezels for a refined, minimalist design.
await page.locator('main').screenshot({
  path: 'main.png',
  scale: 'device',
});

Replace main with a selector that identifies the element you need. Playwright discourages the older ElementHandle screenshot approach in favor of locator-based capture; see the Locator API.

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

Check the saved image dimensions

The dimensions above describe the intended viewport screenshot based on the configured viewport and device scale. Check the saved file’s actual dimensions in your image viewer or with an image-inspection utility, especially for full-page captures or when moving between environments. Full-page height depends on page content, and the rendering environment can affect screenshot output.

Make repeated captures more consistent

A 4K output does not by itself guarantee pixel-identical screenshots. Playwright notes that rendering may vary with the host operating system, browser version, settings, hardware, power source, and headless mode. For visual regression baselines, produce reference and comparison screenshots in the same environment and control those variables as closely as practical. See the Visual comparisons guide.

Rank #4
Samsung 27" Odyssey G5 (G51F) Series QHD (1440P) Gaming Monitor | 180Hz, 1ms, AMD FreeSync, HDR10, Height Adj Stand, Black Equalizer, Virtual Aim Point, Auto Source Switch+ (LS27FG512ENXZA)
  • QHD Resolution (2560 x 1440) has 1.7 times the pixel density of Full HD for incredibly detailed pinsharp images
  • HDR10 provides brighter highlights and nuanced shadow for added depth - making every scene feel more vivid and realistic
  • The 180Hz refresh rate minimizes lag for gameplay with ultra-smooth action. Plus, the 1ms response time helps capture your moves in real-time, allowing you to react fast for gaming precision
  • AMD FreeSync reduces choppiness, screen lag and image tearing, ensuring that your fast-paced, complex in-game action is stable with minimal stutter
  • Ergonomic stand allows for tilt, pivot and height adjustments to maximize gaming comfort
  • Keep the browser version and operating system consistent between baseline creation and comparison.
  • Use the same viewport, device scale factor, screenshot scale, and capture extent.
  • Wait for the page content you need before capture; dynamic content can change between runs.
  • Inspect the output dimensions when validating a pipeline, especially after changing from viewport capture to fullPage: true.

Or skip the browser setup

ScreenshotNeo can return a screenshot from one GET request, without installing or managing Playwright. Its API supports PNG, JPEG, WebP, or PDF output and offers viewport and device options. For a 3840 × 2160 viewport image, request the corresponding dimensions and output settings in the API parameters described in the ScreenshotNeo documentation.

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 or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers indicate the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

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

Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshoot unexpected output

The image is 1920 × 1080, not 3840 × 2160

Check that the context has deviceScaleFactor: 2 and that the screenshot call uses scale: 'device'. With scale: 'css', output is one pixel per CSS pixel. Also verify that the context used to create the page is the one with the intended viewport and scale factor.

Best Value
Dell 27 Monitor S2725QC, 4K UHD IPS, 120Hz, 99% sRGB, 4ms, FreeSync Premium
  • Low blue light: The improved ComfortView Plus reduces harmful blue light emissions to ≤35%, for all-day comfort without sacrificing color accuracy.
  • Refresh rate: A smooth, tear-free experience with AMD FreeSync Premium (refresh rate up to 120Hz) and an ultra-low 0.03ms response time create a captivating experience for work and play.
  • Vivid colors: Immerse yourself in breathtaking 4K visuals with in-plane switching technology. Enjoy vibrant colors with 99% sRGB. The 1500:1 contrast ratio and HDR readiness deliver excellent depth and detail.
  • Re-engineered sound quality: Enjoy more detailed sound with spacious audio featuring greater output power, deeper frequency response and more decibel range than the previous generation.
  • Easy connectivity: Keep your desk organized and clutter-free with a single USB-C cable (up to 65W power delivery).

The image is taller than 2160 pixels

If fullPage: true is set, the screenshot includes the full scrollable page, not just the viewport. Remove that option for a viewport-sized image; keep it when you need the full document.

The page looks different across machines or runs

Rendering can vary by operating system, browser version, settings, hardware, power source, and headless mode. Use the same environment for reference and comparison captures, and ensure the page has reached the state you intend to record.

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

Navigation never reaches network idle

Some pages keep network requests active. Instead of waiting indefinitely for networkidle, select a navigation condition that fits the page and explicitly wait for the required selector or content before taking the screenshot.

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.

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
Crashes, No Sound, or Screen Glitches?Free driver scan
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.