What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use a .webp filename with Playwright’s screenshot method and it will infer the format: await page.screenshot({ path: 'screenshot.webp' }). You can also set type: 'webp' explicitly. The examples below cover setup, full-page and element captures, quality, and visual-regression tests.
Save a WebP screenshot with Playwright
Playwright infers the screenshot format from the output filename’s extension. The minimal call is:
As an Amazon Associate I earn from qualifying purchases.
await page.screenshot({ path: 'screenshot.webp' });For the complete format list and options, see the Playwright Page API reference.
Runnable JavaScript example
Install Playwright and its Chromium browser if they are not already available:
#1 Best Overall
npm install playwright
npx playwright install chromiumSave this as webp-screenshot.js and run it with node webp-screenshot.js:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'screenshot.webp' });
} finally {
await browser.close();
}
})();The browser is closed in a finally block so it is shut down even if navigation or capture fails.
Set the format explicitly
If you want to specify the encoding independently of the inferred format, pass type: 'webp'. Keep the filename extension consistent with the image contents:
Recommended Free Tools
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.screenshot({ path: 'screenshot.webp', type: 'webp' });The documented screenshot types are png, jpeg, and webp. A filename ending in .png otherwise implies PNG, so avoid pairing a WebP type with a misleading extension.
Choose the capture scope
Capture the visible viewport
The basic page.screenshot() call captures the page’s current viewport. Navigate to the page and set the viewport before capturing if your screenshot needs a particular size.
Capture the entire scrollable page
Set fullPage: true to capture beyond the viewport:
await page.screenshot({ path: 'full-page.webp', fullPage: true });Capture one element
Use a locator’s screenshot method when you need only a particular element. It supports WebP output as well:
Rank #3
await page.locator('.product-card').screenshot({ path: 'product-card.webp' });Replace .product-card with a selector present on the page. The official release notes describe WebP support for both page and locator screenshots: Playwright 1.62 release notes.
Set WebP quality and output scale
Quality
Playwright documents a WebP quality 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 });Lower quality may reduce the file size, but the documentation does not guarantee a particular reduction. Compare the resulting image and file size with your own pages before choosing a value.
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
CSS pixels or device pixels
The scale option controls output dimensions: 'css' produces CSS-pixel output, while 'device' uses device-pixel output. Choose the scale that matches how the image will be displayed or compared.
Transparent background
Use omitBackground: true to omit the default white background where supported. This option does not apply to JPEG; WebP can be used when you need an image format that supports transparency.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Use WebP for a Playwright visual regression baseline
For a saved image file, call page.screenshot(). For a visual assertion managed by Playwright Test, use toHaveScreenshot() instead:
await expect(page).toHaveScreenshot('landing.webp');This is a Playwright Test feature, not a replacement for the general screenshot method when your goal is simply to save an image. Screenshot assertions wait for consecutive screenshots to become stable before comparing against the expected image. See the Playwright visual comparisons documentation.
Rendering can differ with the host operating system, browser version, browser settings, hardware, power source, and headless mode. Keep the environments used to create and compare baselines consistent to reduce environment-driven visual differences.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Version and compatibility notes
Playwright’s 1.62 release notes announce WebP support for page.screenshot() and locator.screenshot(), including format inference from a .webp filename or explicit type: 'webp'. The cited note is from the Python documentation and does not give a complete compatibility matrix for every language binding, browser, or earlier Playwright version. If your installed version rejects WebP, check the documentation and release notes for that binding and version.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshoot common problems
- The file is PNG instead of WebP: Check that the path ends in
.webp, or explicitly settype: 'webp'. Use both together to make the file extension and contents agree. - Your installed Playwright rejects WebP: Verify the installed version and the relevant binding’s documentation. The cited 1.62 release note announces the capability but does not establish support for every older version or environment.
- The screenshot misses content below the fold: Add
fullPage: trueto a page screenshot. For a single component, use a locator screenshot instead. - The image is larger than expected: Try a lower WebP
qualityvalue and compare the result. The size change depends on the content; no fixed reduction is promised. - A visual assertion changes across machines: Align the operating system, browser version, settings, and headless configuration used for baseline generation and comparison. Playwright documents these as potential sources of rendering variation.
Or skip the browser setup
ScreenshotNeo can return a WebP screenshot with one GET request. For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the API options. ScreenshotNeo accepts cookie banners before capture 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 response headers report the page verdict and billing status. Its MCP server provides screenshot 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.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
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.
