Why Playwright Screenshots Look Blurry on High-DPI Screens

Playwright screenshots can look blurry on high-DPI screens when the browser captures a page at a different device-pixel ratio than the display or when the image is later scaled to fit a viewer. Check the screenshot’s pixel dimensions and the page’s device scale factor first: the monitor’s DPI alone does not determine screenshot sharpness.

CSS Pixels and Image Pixels

Web pages are laid out in CSS pixels, which are logical units rather than fixed physical screen pixels. A device-pixel ratio (DPR) describes how many image pixels correspond to one CSS pixel in the rendering environment. For example, at DPR 2, a 400-CSS-pixel-wide page region can be represented by 800 image pixels. At DPR 1, that same region is represented by 400 image pixels.

High-density displays commonly use a DPR above 1 so text and controls remain physically readable while the page uses familiar CSS dimensions. A screenshot, however, is a raster image with a definite pixel width and height. If software displays that image at a size different from its native dimensions, it may interpolate pixels, making edges appear soft. This is why an image can look crisp at 100% zoom but blurry when enlarged—or look soft in a document preview that shrinks it.

The browser’s rendering environment matters more than the physical monitor where you inspect the file. Playwright may run headless, in a container, or on a remote machine whose display settings differ from your desktop. Its screenshot is based on the page viewport and configured browser context, not necessarily the DPI of the computer on which you open the resulting PNG.

How Playwright Chooses Screenshot Resolution

Playwright’s browser context has a viewport measured in CSS pixels and a device scale factor. The scale factor determines how many image pixels are used per CSS pixel when rendering screenshots. A context configured with a 1280-by-720 viewport and a scale factor of 1 generally produces a 1280-by-720 screenshot. With a scale factor of 2, the screenshot is generally 2560 by 1440 while the page’s CSS viewport remains 1280 by 720.

In Playwright configuration, the relevant context option is deviceScaleFactor. The screenshot option scale controls whether the screenshot is rendered using CSS pixels (css) or device pixels (device). The default screenshot scale is device pixels. These settings address different parts of the process: context scale factor affects the emulated device, while screenshot scale specifies the output-pixel basis.

import { chromium } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  deviceScaleFactor: 2
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'page.png', scale: 'device' });
await browser.close();

This example is intended to produce a high-resolution capture, not to guarantee that every image viewer will display it at the same apparent size. Browser engine, page content, fonts, and rendering conditions can also affect exact output.

Diagnose the Cause Before Changing Settings

Start by separating a genuinely low-resolution capture from a display or scaling issue. Compare the screenshot’s dimensions with the CSS viewport and the expected scale factor. A screenshot that is 1280 pixels wide for a 1280-CSS-pixel viewport is consistent with a one-to-one capture; it may simply be enlarged in the viewer. If you expected twice as many image pixels, inspect the context’s device scale factor and screenshot scale.

• Check the file’s pixel dimensions. Use an image viewer or file properties; do not judge resolution from how large the image appears on screen.
• Check browser-side values. In the page, inspect window.devicePixelRatio, window.innerWidth, and window.innerHeight. The ratio reports the page’s current rendering scale, while inner width and height are in CSS pixels.
• Inspect the original PNG. Avoid judging a screenshot copied into a chat, document, issue tracker, or web page, since those services may resize or recompress it.
• Compare at native size. View the image at 100% zoom, where one image pixel maps to one display pixel, if the viewer provides that option.

If text is sharp in the original file but soft only in a preview, the preview is likely scaling it. If the original is low-resolution, adjust the browser context or capture options and take a new screenshot. Increasing CSS viewport width is not the same as increasing resolution: a wider viewport changes layout, while a larger device scale factor increases output pixels without necessarily changing CSS layout.

Choose a Capture for the Intended Use

Use a scale factor of 1 when you want screenshots whose pixel dimensions correspond directly to CSS viewport dimensions—for example, for lightweight visual comparisons or documentation that is laid out in CSS pixels. Choose a higher device scale factor when the output needs more pixels for detailed inspection or high-density presentation. Keep the viewport constant when comparing these choices so that responsive layout changes do not confuse the comparison.

For Playwright screenshot tests, consistency is often more important than maximizing resolution. A test should use the same viewport, device scale factor, browser engine, fonts, and relevant page state each time. Different rasterization environments can produce small pixel differences, so changing scale settings may affect visual baselines and snapshots. Update those baselines only when the changed output is intentional.

When saving a screenshot with scale: 'css', the output is based on CSS pixels; with scale: 'device', it is based on device pixels. If you need an exact output size, verify the produced file rather than assuming the option alone guarantees a particular width: viewport size, full-page capture, and any image-processing step can affect dimensions.

Common Causes of Soft or Jagged Results

A screenshot can seem blurry even when its pixel count is high. Common causes include resizing after capture, image compression, browser zoom, CSS transforms, and assets that are themselves low-resolution. A logo provided only as a small raster image may look soft when the page renders it larger; increasing screenshot resolution cannot restore detail absent from the source asset. Vector graphics and appropriately sized image assets usually scale more cleanly.

Browser zoom can change the relationship between the page’s layout and rendered pixels, so avoid changing zoom unintentionally between test runs. Also check whether the screenshot is being resized in a test helper or downstream image pipeline. If the image is sharp at its original dimensions but blurry after being embedded elsewhere, fix that presentation step rather than changing Playwright’s viewport.

One frequent misconception is that a high-DPI monitor automatically makes every Playwright screenshot high-resolution. It does not: Playwright uses the browser context’s emulated settings and screenshot options. Another is that doubling the viewport width doubles image sharpness. It instead gives the page more CSS space and can trigger a different responsive layout; use device scale factor when the goal is more pixels for the same CSS layout.

Frequently Asked Questions

How do I make Playwright screenshots sharper?
Set an appropriate deviceScaleFactor on the browser context, keep the viewport as intended, and use device-pixel screenshot output when needed. Then inspect the original image at native size.

Does a high-DPI monitor change Playwright screenshot resolution?
Not necessarily. The monitor used to view the file does not by itself set the browser context’s device scale factor, especially when Playwright runs headless or remotely.

What is the difference between deviceScaleFactor and screenshot scale?
deviceScaleFactor configures the emulated device scale in the browser context. Screenshot scale selects CSS-pixel or device-pixel output for the capture.

Why is my screenshot blurry only in a preview?
The preview may be scaling the image to fit its panel. Check the PNG’s dimensions and view it at 100% zoom before changing your Playwright settings.

Should I use a device scale factor of 2 for visual tests?
Only if that matches the environment and output you want to test. Higher resolution changes screenshot pixels and may require different visual baselines; consistent settings matter more than choosing the largest value.

Related

• Shish Kebab Trophy Guide: Marvel’s Wolverine
• Long Reach Ethernet: 10BASE-T1L Explained
• Why My Raspberry Pi Projects Fell Out of My Routine