To save a rendered web page as WebP, open the URL in a Playwright page and call page.screenshot({ type: 'webp', path: 'output.webp' }). This captures what the browser renders; it does not download and transcode an image file found at the URL.
Save a web page as a WebP screenshot
Install Playwright and its browser first. For example, in a Node.js project, install the package and Chromium:
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Introducing Squoosh: A Beginner’s Guide to Image Compression (Wish I Knew This Sooner) | $6.99 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
npm install playwright
npx playwright install chromiumThen save this as capture.js and run it with node capture.js https://example.com:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →const { chromium } = require('playwright');
(async () => {
const url = process.argv[2];
if (!url) {
throw new Error('Usage: node capture.js <url>');
}
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto(url);
await page.screenshot({ path: 'output.webp', type: 'webp' });
console.log('Saved output.webp');
} finally {
await browser.close();
}
})();The script navigates to the supplied URL, captures the visible viewport, and writes output.webp in the current directory. Playwright documents the screenshot options, including WebP output, on its Page API.
#1 Best Overall
Choose viewport, full-page, quality, or buffer output
Capture the full scrollable page
By default, a screenshot covers the visible viewport. Add fullPage: true to capture the full scrollable page:
await page.screenshot({ path: 'full-page.webp', type: 'webp', fullPage: true });Set WebP quality
WebP quality defaults to 100. Playwright documents this default as lossless; lower quality values use lossy compression. Set a lower value when you want lossy output:
await page.screenshot({ path: 'compressed.webp', type: 'webp', quality: 80 });Quality does not apply to PNG. Check the resulting image for the visual detail you need before choosing a lower quality setting.
Return the image bytes instead of writing a file
page.screenshot() returns a Node.js Buffer. Omit path to keep the bytes in memory, for example to send them to storage or another processing step:
const image = await page.screenshot({ type: 'webp' });
// image is a Buffer containing the WebP screenshot.The Playwright Screenshots guide describes using the returned buffer for post-processing or passing it to another tool.
Use WebP in Playwright Test visual snapshots
If the goal is a visual regression baseline rather than an image generated by an application script, Playwright Test supports naming the snapshot with a .webp extension:
await expect(page).toHaveScreenshot('homepage.webp');Use page.screenshot() when your code needs a screenshot file or buffer. Use toHaveScreenshot() when the image is part of a Playwright Test assertion. The visual comparisons guide documents WebP snapshots as lossless.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
When the URL points to an image file
This workflow screenshots a browser-rendered page. It is not a general-purpose image converter that fetches an image asset from a URL and transcodes it into WebP. If you mean an image file rather than a web page, download that asset and use an image-processing workflow to convert it; page.screenshot() captures the browser view instead.
Troubleshooting and reliability
- No output file: Confirm the script reached the screenshot call and that the current directory is writable. If you omit
path, Playwright returns a buffer rather than saving a file. - Browser launch fails: Install the browser corresponding to your Playwright setup; the example command installs Chromium. Check the installation output for errors.
- The capture is incomplete: Navigation and page rendering can vary by destination. Verify that the URL loads in the browser and that the content you need has rendered before taking the screenshot. The documented API does not guarantee access to every destination or consistent rendering.
- Only part of the page appears: The default is the viewport; set
fullPage: truefor the full scrollable page. - Output is not WebP: Set
type: 'webp'explicitly or use a.webpoutput path. Playwright also supports PNG and JPEG, and its documented default format is PNG. - Unexpected image size or detail: WebP quality 100 is lossless according to Playwright; lower quality is lossy. Adjust quality only if lossy compression is acceptable.
Or skip the browser setup
ScreenshotNeo can return a WebP screenshot through one GET request. Its API accepts a URL and supports options for full-page capture and quality alongside other capture controls. See the ScreenshotNeo API documentation for request parameters.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, 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, including Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free to get 1,000 screenshots a month without a 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.
