Set the format on a regular Playwright screenshot with type: 'png', type: 'jpeg', or type: 'webp'. PNG is the default. If you provide a path, Playwright can infer the format from its extension, so path: 'capture.webp' creates a WebP file. Set type explicitly when you want the format to be unambiguous.
Screenshot assertions are a separate API: expect(page).toHaveScreenshot() uses PNG by default, and a snapshot name ending in .webp selects WebP. Do not assume the regular screenshot API’s JPEG option applies to visual-test snapshots.
Set the format for a regular page screenshot
The Page screenshot API accepts three values:
png(the default)jpegwebp
The option is named jpeg, although the output filename may end in either .jpg or .jpeg. A screenshot can be written to disk with path or returned in memory when no path is supplied.
Use the filename extension
For a simple file capture, the extension is enough:
#1 Best Overall
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'homepage.webp' });
await browser.close();
})();Here Playwright infers WebP from homepage.webp. The equivalent choices are homepage.png and homepage.jpeg (or homepage.jpg).
Set type explicitly
Use an explicit type when a filename is generated elsewhere, when you pass a buffer onward, or when you want the code to state its intent:
await page.screenshot({
path: 'homepage.jpeg',
type: 'jpeg'
});Using matching values for path and type avoids ambiguity for people and for build scripts that later rename files.
Capture without creating a file
Omit path to receive the screenshot as a buffer. This is useful when you upload the bytes, attach them to a test report, or pass them to an image-processing step.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsconst pngBytes = await page.screenshot({ type: 'png' });
// pngBytes is a Buffer in Node.jsThe same call can request JPEG or WebP by changing type.
Choose PNG, JPEG, or WebP deliberately
| Format | Playwright behavior | Use it when | Important limitation |
|---|---|---|---|
| PNG | Default format | You need lossless image data, crisp text, or a dependable archival/test format | quality has no effect |
| JPEG | Supports quality; documented default is 80 |
Lossy compression is acceptable and transparency is not needed | omitBackground does not apply |
| WebP | Supports quality; documented default is 100, described by Playwright as lossless |
You want WebP output and may choose a lower quality for lossy compression | Lower quality changes the image from the default lossless behavior |
These are API characteristics, not a promise that one format will always produce a smaller file. The documentation does not provide comparative size benchmarks, so measure your own pages if storage or transfer volume is important.
JPEG quality
await page.screenshot({
path: 'product.jpg',
type: 'jpeg',
quality: 70
});JPEG accepts a quality value, with 80 documented as the default. Because JPEG is lossy, inspect text, fine lines, and gradients at the quality you select.
WebP quality
await page.screenshot({
path: 'product.webp',
type: 'webp',
quality: 85
});WebP’s documented default quality is 100 and is described as lossless. A lower value requests lossy compression. Do not apply a WebP quality setting when you need byte-for-byte lossless output.
Free tools Windows power users keep installed
One-click scans. No signup required.
Transparent backgrounds
Set omitBackground: true when you need transparency:
await page.screenshot({
path: 'logo.png',
type: 'png',
omitBackground: true
});Playwright states that omitBackground is not applicable to JPEG. Choose PNG or WebP when transparent pixels are part of the deliverable.
Set the format for a locator screenshot
Locator screenshots use the same format options. This lets you export one component instead of the whole page:
const card = page.locator('[data-testid="pricing-card"]');
await card.screenshot({
path: 'pricing-card.webp',
type: 'webp'
});If you use a path, its extension can select the type here as it does for a page screenshot. An explicit type is useful when a helper constructs the path dynamically.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minutePython Playwright examples
The Python binding exposes the same screenshot concepts. With the synchronous API:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto("https://example.com")
page.screenshot(path="page.png", type="png")
page.screenshot(path="page.jpeg", type="jpeg", quality=80)
page.screenshot(path="page.webp", type="webp", quality=100)
image_bytes = page.screenshot(type="png")
browser.close()The returned image_bytes value is suitable for code that handles the image in memory rather than saving it immediately.
Regular screenshots and visual assertions are different
page.screenshot() and locator screenshots are output APIs. Playwright Test’s expect(page).toHaveScreenshot() is a visual comparison API with its own snapshot naming rules.
PNG snapshots
import { test, expect } from '@playwright/test';
test('landing page', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('landing.png');
});Screenshot assertions store snapshots in PNG by default.
Recommended Free Tools
WebP snapshots
await expect(page).toHaveScreenshot('landing.webp');A snapshot name ending in .webp selects WebP. The documented assertion extensions are .png and .webp; do not assume that the regular screenshot API’s JPEG option is available for this assertion.
Pick a format for visual regression
PNG or WebP can provide lossless snapshots according to the assertion documentation. The format does not make rendering deterministic by itself. Baselines can still differ when the host operating system, browser version, browser settings, hardware, power source, or headless mode changes.
Keep visual comparisons repeatable
Generate and compare baselines in the same environment whenever possible. Pin the browser version used by your project, use the same operating-system image for baseline creation and CI, and avoid treating a format change as a fix for rendering drift. If a comparison changes after moving from PNG to WebP, first check whether the browser environment also changed.
Or skip the browser setup
ScreenshotNeo provides a website screenshot API when you need a URL captured without managing a Playwright browser. A single request can return PNG, JPEG, WebP, or a PDF. The API accepts the same common screenshot parameter names used by other services, which helps when switching.
cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or 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 gives Claude, Cursor, and other MCP clients tools for screenshots, page information, and PDFs.
The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot format and snapshot problems
The file is PNG even though you expected JPEG or WebP
Check both the path and the option. A call with no type and a path that does not end in a recognized image extension can fall back to the default PNG behavior. Use an explicit pair such as path: 'capture.webp', type: 'webp'.
Changing quality has no effect
quality applies to JPEG and WebP, not PNG. If the call still requests PNG, changing the number cannot alter the output.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Transparency is missing
Use omitBackground: true with PNG or WebP. JPEG does not support this option, so changing only the JPEG quality cannot produce transparent pixels.
A visual assertion rejects a JPEG-related option
Assertions and ordinary screenshots are separate APIs. Name the assertion snapshot with .png or .webp and keep JPEG settings on page.screenshot() or a locator screenshot.
Baselines differ between a laptop and CI
Investigate the rendering environment: operating system, browser version, settings, hardware, power source, and headless mode can all affect screenshots. Run baseline generation and comparison in the same environment instead of changing formats first.
You need to process the image before saving it
Omit path and capture a buffer. This avoids an intermediate file and lets your application upload or transform the bytes directly.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Format decision checklist
- Choose PNG when lossless output, sharp text, or transparency is the priority.
- Choose JPEG when lossy compression is acceptable and you do not need transparency; set
qualitydeliberately. - Choose WebP when your consumer accepts it; quality 100 is the documented lossless default, while lower values are lossy.
- Use an extension for simple calls and add
typewhen the format must be explicit. - For visual assertions, use PNG by default or a
.webpsnapshot name; do not infer JPEG support from the regular screenshot API. - Keep the browser and operating environment consistent when screenshots are used for regression comparisons.
Frequently Asked Questions
Does the installed Playwright version matter for screenshot formats?
Yes. This guidance follows the current documented API behavior; if your local reference differs, verify the version of Playwright installed in the project before changing test code.
Can I use a screenshot buffer instead of a file in a CI pipeline?
Yes. Leave out path; the screenshot call returns image bytes that your pipeline can upload, archive, or process directly.
Will switching from PNG to WebP fix cross-machine visual-test differences?
No. Format selection does not remove differences caused by the operating system, browser version, settings, hardware, power source, or headless mode.
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.
