How to Save a Website Screenshot as a WebP Image

To save a website screenshot as a WebP image, capture the rendered page as PNG, then convert the PNG with Google’s cwebp encoder. Firefox’s documented DevTools Web Console helper saves PNG files; it does not natively export WebP. For example, capture with :screenshot --fullpage, then run cwebp -q 80 screenshot.png -o screenshot.webp.

Do you mean a screenshot of the whole webpage, or the image displayed on it? A page screenshot is a raster image of the browser-rendered page. Saving an image from a webpage downloads that individual image resource. The steps below are for the screenshot.

1. Capture the webpage in Firefox

Open the page in Firefox and wait for the content you need to appear.
Open Developer Tools, then open the Web Console.
Enter :screenshot to capture the current page view. Firefox saves a PNG with a timestamp-based name.
For a full-page capture, enter :screenshot --fullpage. This includes content beyond the current viewport.

Mozilla documents additional controls: --delay waits before capture, --dpr sets the device-pixel ratio, --filename sets the output name, and --selector captures a selected element and its descendants. Use a filename ending in .png; this helper’s output is PNG. Reusing a filename such as test.png overwrites the previous capture, so choose a distinct name when keeping multiple captures. See Mozilla’s Firefox screenshot documentation for current syntax and platform details.

2. Convert the PNG file to WebP

Install Google’s WebP command-line tools for your operating system, then run this in the directory containing your screenshot:

cwebp -q 80 screenshot.png -o screenshot.webp

Replace screenshot.png with the actual capture filename and change the output path if needed. Google documents this quality-80 example for converting PNG to WebP. The quality number is an encoder setting, not a guarantee of a particular file size or visual match. Inspect the result and adjust it for your needs. More details are in Google’s WebP getting-started guide.

To convert a WebP back to PNG, Google documents:

dwebp screenshot.webp -o screenshot.png

3. Choose the capture and encoding settings

Goal	Capture or format choice
Capture only what is currently visible	Use `:screenshot`.
Capture the page beyond the viewport	Use `:screenshot --fullpage`.
Capture one element and its descendants	Use `--selector` with a selector supported by the Firefox helper.
Wait for a page animation or delayed content	Use `--delay`, and allow enough time for the content to render.
Control capture pixel density	Set `--dpr`. A higher device-pixel ratio can create a larger PNG and take more disk space.
Keep a lossless source for later edits or comparison	Keep the original PNG. Convert a copy to WebP.
Reduce file size for delivery	Try lossy WebP with a quality setting such as `-q 80`, then inspect text, edges, and gradients.
Preserve transparency or avoid lossy changes	Use a WebP lossless workflow and verify the encoder options and output. WebP supports transparency and both lossy and lossless compression.

Lossy conversion can change image data, which may be visible around small text, fine lines, and sharp UI edges. For pixel-sensitive work, preserve the PNG master and compare the converted output at its intended display size. Google reports WebP lossless images are 26% smaller than PNGs as a format-level comparison; that is not a prediction for a particular screenshot. Its reported 25–34% size reduction compares lossy WebP with comparable JPEG at equivalent SSIM quality, not PNG-to-WebP screenshot conversion. See Google’s WebP overview.

4. Check the output file

Confirm the output filename ends in .webp and that the file opens in your intended viewer or application.
Check the image dimensions and transparency if those matter to your use case.
Compare the WebP with the PNG at the display size where it will be used. Small text and narrow borders reveal compression artifacts quickly.
For a web response, use the MIME type image/webp. The file extension is .webp.

WebP is supported by current Chrome, Edge, Firefox, Opera, and Safari according to MDN’s image format guide. A browser displaying WebP does not mean its screenshot tool exports WebP; verify the actual saved file format.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API can return a WebP screenshot directly, so there is no local browser capture and conversion step. The request below uses the documented endpoint and basic parameters; see the ScreenshotNeo API documentation for additional options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Troubleshooting

Problem	Likely cause	Fix
The file is PNG, not WebP	Firefox’s documented `:screenshot` helper saves PNG.	Run `cwebp` on the PNG and use a `.webp` output filename.
`cwebp` is not found	The WebP tools are not installed or the executable is not on your PATH.	Install Google’s WebP tools for your operating system, then reopen the terminal or use the full path to `cwebp`.
Input file cannot be opened	The command is running in a different directory or the capture filename differs.	Check the capture’s exact name and path, then pass that path to `cwebp`.
The screenshot cuts off content	A normal capture covers the visible page area, or content had not rendered yet.	Use `--fullpage` for the full scrollable page and `--delay` when content appears after a wait.
The new screenshot replaced an earlier one	The same output filename was reused.	Choose a unique PNG filename for each capture before converting.
The WebP looks soft or has artifacts	Lossy compression at the selected quality altered fine detail.	Raise the quality setting, compare at intended display size, or use a lossless workflow and keep the PNG original.
A transparent area became opaque	The capture or conversion workflow flattened the background.	Check that the source PNG has alpha and use WebP settings that preserve transparency; inspect the resulting file.
The downloaded file is an image from the page, not a page screenshot	An image resource was saved instead of capturing the rendered document.	Use the browser screenshot workflow for the page. Save the image resource only when you want that individual asset.

Performance, reliability, and cost

Local capture and conversion avoid a screenshot API request and are suitable for occasional work or a local script. Full-page captures and high device-pixel ratios create larger source images, which take more time and disk space to process. For repeatable results, use the same browser version, viewport, device-pixel ratio, wait behavior, and converter settings.

ScreenshotNeo is an option for automated capture when managing browser setup is inconvenient. Its plans include the same features: Free offers 1,000 shots per month, Starter is $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free. Only clean shots are billed, and every response indicates its verdict and billing status. Choose the local workflow when you need direct control of the PNG and conversion process; choose the API when its managed capture, cleanup, or agent workflow fits your use case.

FAQ

Can I save a screenshot as WebP directly from Firefox?

The documented Firefox :screenshot helper saves PNG. Convert that PNG with cwebp, or use a screenshot service that returns WebP.

Does changing the filename to `.webp` convert the screenshot?

No. A filename extension does not change the file encoding. Run an image encoder and verify the resulting format.

Should I delete the PNG after converting?

Keep it if you need a lossless source, future recropping, or pixel comparison. Delete it only when you are sure the WebP meets the use case and you do not need the original.

Is WebP always smaller than PNG for a screenshot?

No specific screenshot size reduction is guaranteed. Results depend on image content and encoding settings; compare the actual files.

What is the difference between a screenshot and saving an image from a page?

A screenshot captures the rendered page or a selected part of it. Saving an image downloads one image resource embedded in the page; the browser may request different formats based on content negotiation. MDN documents this behavior in its Accept header reference.