The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →To save a web page as a WebP image with Playwright, open the URL in a browser page and call page.screenshot() with type: 'webp'. Add path to write a file, or omit it to receive the image bytes as a buffer.
Save a URL as a WebP screenshot
This captures the page as it appears in a browser; it does not download and transcode an image file found at the URL. The following Node.js example opens a page and saves the visible viewport as output.webp:
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Introducing Squoosh: A Beginner’s Guide to Image Compression (Wish I Knew This Sooner) | $6.99 | Buy on Amazon |
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'output.webp', type: 'webp' });
} finally {
await browser.close();
}
})();Install Playwright and its browser before running the script. Save it in a JavaScript file and run it with Node.js; replace https://example.com with the page URL you want to capture. The finally block closes the browser even if navigation or capture fails.
Playwright’s Page API documents the URL navigation and screenshot options, including WebP output and the optional file path: Page API.
#1 Best Overall
Choose viewport, full-page, or buffer output
Capture the visible viewport
The default screenshot is the browser’s visible viewport. To control its dimensions, set a viewport when creating the page:
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });Capture the full scrollable page
Use fullPage: true when the output should include content below the fold:
await page.screenshot({ path: 'full-page.webp', type: 'webp', fullPage: true });This makes a full-page capture rather than limiting the image to the visible viewport. See the documented screenshot options in the Page API.
Return bytes instead of writing a file
page.screenshot() returns a Buffer. Omit path when another part of your program will store or process the result:
Recommended Free Tools
const image = await page.screenshot({ type: 'webp' });
// image is a Buffer; store it or pass it to another tool.The Playwright screenshots guide describes using the returned buffer for post-processing or passing it to another tool.
Set WebP quality
The documented default quality for WebP is 100, which Playwright describes as lossless. Lower quality values use lossy compression. Set a lower value when you prefer a smaller, lossy image; the quality option does not apply to PNG.
await page.screenshot({
path: 'smaller.webp',
type: 'webp',
quality: 80
});Choose the quality that suits your use case; a lower number trades image fidelity for compression. Refer to the Page API for the format and quality options.
Use WebP for Playwright Test visual snapshots
For visual regression tests, use Playwright Test’s screenshot assertion rather than the standalone Page screenshot API. Give the snapshot a .webp filename:
Free tools Windows power users keep installed
One-click scans. No signup required.
import { test, expect } from '@playwright/test';
test('page snapshot', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('page.webp');
});This workflow stores a test snapshot for visual comparison; it is not a substitute for page.screenshot() when your script needs an image file or buffer. Playwright’s visual comparisons guide documents WebP snapshots and describes them as lossless.
Convert an image file URL instead of a web page
If the URL points directly to an image and your goal is to transcode that original image asset to WebP, this browser screenshot workflow is not that operation. page.screenshot() captures a rendered browser page. Downloading an image and converting its bytes requires an image-processing workflow instead.
Or skip the browser setup
ScreenshotNeo provides a screenshot API for capturing a page URL as an image, including WebP. One GET request returns the capture; see the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status. Its MCP server offers screenshot tools for AI agents, including Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up free.
Troubleshoot common problems
The output is PNG instead of WebP
Set type: 'webp' explicitly. Playwright’s documented default screenshot format is PNG; a .webp filename can also determine the format, but the explicit type makes the intended output clear. Check the Page API options.
The image contains only the first screen
That is the default viewport capture. Add fullPage: true if the output should cover the full scrollable page.
The page is blank or incomplete
Check whether navigation completed and whether the destination is accessible to the browser. A URL alone does not guarantee that a page will load or render consistently; access controls and runtime behavior can affect the result. If content appears after navigation, wait for the relevant page state before taking the screenshot.
The output file is missing
Confirm the script’s working directory and that the supplied path points to a writable location. If you omit path, the screenshot is returned as a Buffer rather than saved automatically.
Crashes, 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 minuteWindows 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 reinstallThe image is larger or less faithful than expected
WebP quality 100 is lossless according to Playwright’s documentation; lower values use lossy compression. Adjust quality when you need a smaller lossy image, and inspect the output at the size where it will be used.
FAQ
Frequently Asked Questions
Does Playwright convert an image URL directly to WebP?
No. The screenshot API captures a rendered browser page. Transcoding an image file downloaded from a URL is a separate image-processing task.
Can Playwright return a WebP screenshot as a buffer?
Yes. Call page.screenshot({ type: 'webp' }) without a path; it returns a Buffer.
Is Playwright’s default WebP quality lossless?
The documented default quality is 100, which Playwright says produces a lossless WebP. Lower values are lossy.
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.
