What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use page.screenshot({ path: 'screenshot.webp' }): Playwright infers WebP from the .webp extension. You can also set type: 'webp' explicitly. This guide covers a standalone screenshot, full-page and element captures, quality settings, and visual regression snapshots.
Save a page screenshot as WebP
In Playwright, pass a WebP filename to page.screenshot(). The screenshot type is inferred from the extension; alternatively, set the type explicitly. Use a .webp filename in either case so the name matches the image contents. See the Playwright Page API reference.
await page.screenshot({ path: 'screenshot.webp' });Or specify the format directly:
await page.screenshot({ path: 'screenshot.webp', type: 'webp' });Playwright’s screenshot API documents png, jpeg, and webp as supported types. If the type is not inferred or specified, the documented default is PNG.
Runnable example in Playwright Test
This JavaScript example opens a page, writes a WebP screenshot, and closes the browser. Install the Playwright Test package and its browser binaries first; for setup, follow the official Playwright getting-started guide.
Recommended Free Tools
#1 Best Overall
import { test } from '@playwright/test';
test('save a page as WebP', async ({ page }) => {
await page.goto('https://example.com');
await page.screenshot({ path: 'example.webp' });
});Choose the capture scope
Capture the visible viewport
By default, page.screenshot() captures the current page view. Use this for a normal image of what is visible in the browser viewport.
Capture the full scrollable page
Set fullPage: true when the image should include the entire scrollable page rather than only the current viewport:
await page.screenshot({ path: 'full-page.webp', fullPage: true });Capture one element
Use a locator’s screenshot method to save an individual element. The official Playwright 1.62 release notes identify locator.screenshot() as supporting WebP as well.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.locator('main').screenshot({ path: 'main.webp' });Replace main with a selector that identifies the element you want.
Set WebP quality and image options
Playwright documents WebP quality on a scale from 0 to 100. The default is 100, which produces lossless output; lower values use lossy compression. For example:
await page.screenshot({ path: 'homepage.webp', quality: 70 });A lower quality can reduce file size, but the documentation does not guarantee a particular reduction. Check the resulting image and file size for your page before choosing a value.
Rank #3
fullPage: truecaptures the full scrollable page.scale: 'css'outputs at CSS-pixel scale;scale: 'device'uses device-pixel scale.omitBackground: trueomits the default white background where supported; it does not apply to JPEG.
For the complete option list and details, see the Page screenshot API.
Use WebP in a visual regression test
If the goal is to check whether a page has changed, use Playwright Test’s screenshot assertion rather than treating a saved image as a test baseline manually:
import { test, expect } from '@playwright/test';
test('landing page matches its screenshot', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('landing.webp');
});toHaveScreenshot() is a Playwright Test feature. Its assertion waits until consecutive screenshots are stable before comparing against the expectation. See the visual comparisons guide.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Keep comparison environments consistent
Browser rendering can vary with the host operating system, browser version, settings, hardware, power source, and headless mode. Generate and compare baselines in consistent environments to reduce visual differences unrelated to your code. Playwright documents these sources of variation in its visual comparisons guidance.
Version notes
Playwright’s 1.62 release notes announce WebP support for page.screenshot() and locator.screenshot(), including inference from a .webp filename and explicit format selection. The cited release note is from the Python documentation and does not give a full compatibility matrix across language bindings, browsers, or earlier versions. If your installed version rejects WebP, check the documentation and release notes for that binding and version: Playwright Python release notes.
Troubleshoot WebP screenshots
- The output is PNG. Confirm the path ends in
.webp, or specifytype: 'webp'. Keep the extension aligned with the selected format. - Playwright rejects WebP. Check the installed Playwright version and the release notes for the language binding you use. The cited 1.62 note does not establish compatibility for every older version or environment.
- The image is larger or less crisp than expected. Quality 100 is lossless; lower values are lossy. Try a lower quality and inspect the actual image and file size rather than assuming a particular reduction.
- A visual snapshot changes across runs or machines. Keep the operating system, browser version, settings, hardware, power source, and headless configuration as consistent as possible.
Or skip the browser setup
If you want a screenshot without setting up and running Playwright in your own browser environment, ScreenshotNeo provides a website screenshot API. One GET request can return PNG, JPEG, WebP, or PDF. Its screenshot API 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 and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. It also has an MCP server for AI agents, with tools including take_screenshot, get_page_info, and capture_pdf.
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 options. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for free.
Frequently Asked Questions
Can Playwright save screenshots as WebP?
Yes. Use a .webp output path or set type: 'webp' in the screenshot options.
What is the default WebP screenshot quality in Playwright?
The documented default is 100, which produces lossless WebP output. Lower quality values use lossy compression.
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.
