When should I use WebP instead of PNG for website screenshots?

Use WebP for compact review artifacts, dashboards, notifications, previews, and AI pipelines where smaller payloads matter. Use PNG for pixel-perfect baselines or lossless inspection.

Does SnapshotFlow support WebP quality settings?

Yes. SnapshotFlow accepts format=webp and quality from 1 to 100. The same Node SDK option is format: "webp" with a numeric quality value.

Keyword: WebP screenshot API · Updated August 4, 2026

WebP Screenshot API: Smaller Website Captures for Apps, Reports, and AI Workflows

PNG is the safe default for exact screenshots, but it is often heavier than a dashboard, ticket, notification, or AI workflow needs. A WebP screenshot API gives you browser-rendered page captures with a tunable size and quality trade-off: render the page in Chromium, request format=webp, and return the artifact as a hosted URL, base64 string, JSON response, or binary image.

Why this is timely

WebP is no longer only an image-delivery concern for frontend teams. Browser automation tools are adding it directly to screenshot workflows: the current Playwright release notes document WebP support for page and locator screenshots, and Chrome DevTools Protocol documents webp as a supported Page.captureScreenshot format. That matters for teams storing thousands of visual artifacts from QA, monitoring, support, AI review, and reporting jobs.

SnapshotFlow already exposes WebP through the same production screenshot endpoint used for PNG, JPEG, and PDF. The backend confirms format=webp, quality, viewport settings, selector capture, wait controls, blocking controls, cache behavior, and response_type=image|json|base64|url. The Node SDK exposes matching camelCase options such as format: "webp", quality, waitForSelector, selector, and responseType.

Scope: this guide is about WebP output for compact screenshot artifacts. For exact visual regression baselines, start with visual regression testing. For viewport matrices, use the responsive screenshot API guide. For PDFs, use the webpage to PDF API guide.

When WebP screenshots fit best

Use WebP when the screenshot is reviewed by people, passed through an API, embedded in a report, or sent to a model, and smaller payloads are more valuable than pixel-perfect lossless output.

Workflow	SnapshotFlow settings	Why WebP helps
Support ticket evidence	`format=webp`, `response_type=url`, `quality=80`	Stores a compact hosted artifact that can be attached or linked from a case.
AI vision input	`format=webp`, `response_type=base64`, `width=1280`	Keeps the image payload smaller before it is sent to a multimodal API.
Dashboard report preview	`selector=#report`, `format=webp`, `quality=85`	Captures the useful component without storing a full-page PNG.
Monitoring timeline	`cache=false`, `format=webp`, `response_type=url`	Creates frequent human-review artifacts without making storage the first bottleneck.
Notification thumbnail	`image_width=800`, `format=webp`, `quality=75`	Returns a smaller final image for Slack, email, or in-app previews.

1. Capture a website as WebP with cURL

Start with a normal screenshot request and switch the output format to WebP. Use a fixed viewport and wait condition so quality comparisons are not mixed with layout changes.

curl --get "https://api.snapshotflow.com/screenshot" \ -H "X-Api-Key: $SNAPSHOTFLOW_API_KEY" \ --data-urlencode "url=https://example.com/dashboard" \ --data-urlencode "format=webp" \ --data-urlencode "quality=82" \ --data-urlencode "response_type=url" \ --data-urlencode "width=1440" \ --data-urlencode "height=900" \ --data-urlencode "wait_until=networkidle2" \ --data-urlencode "block_ads=true" \ --data-urlencode "block_cookie_banners=true"

Expected behavior: SnapshotFlow validates the URL, renders it in Chromium, captures a WebP image with quality 82, stores the artifact, and returns a plain-text download URL. On a cache miss the API charges one successful capture; on a cache hit it can return the cached WebP artifact without charging another render.

2. Use WebP from the Node SDK

The official Node SDK is a thin HTTP wrapper. Use camelCase options and let the SDK serialize them to SnapshotFlow's API parameters.

import { SnapshotFlow } from "snapshotflow"; const client = new SnapshotFlow({ apiKey: process.env.SNAPSHOTFLOW_API_KEY, }); const imageUrl = await client.takeUrl({ url: "https://example.com/dashboard", format: "webp", quality: 82, width: 1440, height: 900, waitUntil: "networkidle2", blockAds: true, blockCookieBanners: true, }); console.log(imageUrl);

Capture only the component you need

WebP pairs well with selector capture when the artifact is a report widget, chart, receipt, or card rather than a full page.

const shot = await client.take({ url: "https://example.com/reports/monthly", format: "webp", quality: 86, width: 1440, height: 900, waitForSelector: "#monthly-summary", selector: "#monthly-summary", hideSelectors: [".intercom-launcher", ".toast"], cache: false, }); await shot.save("monthly-summary.webp");

3. Choose the right WebP response type

SnapshotFlow supports the same response shapes for WebP as for other image formats.

Response type	Use it when	Expected shape
`response_type=image`	Your server wants to stream or proxy the image directly.	Binary response with `Content-Type: image/webp`.
`response_type=url`	You need a shareable artifact for tickets, reviews, reports, or notifications.	Plain-text hosted download URL.
`response_type=base64`	You need to pass the WebP image through JSON, an AI API, or a queue.	JSON with a `data:image/webp;base64,...` image string.
`response_type=json`	You need capture metadata or text alongside storage information.	JSON with URL, format, width, height, cache state, IDs, metadata, or extracted content when requested.

Base64 WebP for an AI pipeline

When an AI workflow needs the image in JSON, ask SnapshotFlow for base64. Keep screenshots readable: compress enough to reduce transfer size, but do not make text, charts, or small UI controls ambiguous.

const result = await client.takeJson({ url: "https://example.com/pricing", format: "webp", quality: 80, width: 1280, height: 900, responseType: "base64", waitForSelector: "main", blockCookieBanners: true, }); console.log(result.image); // data:image/webp;base64,...

Operational advice and edge cases

Start around quality=80. Raise quality for text-heavy dashboards or dense charts. Lower it for thumbnails and review streams where small artifacts are acceptable.
Use PNG for pixel-perfect assertions. WebP is a good delivery and review format, but lossy compression can create tiny visual differences. For strict baselines, use format=png or the /diff workflow.
Keep viewport settings explicit. Store width, height, device_scale_factor, dark mode, and mobile settings next to the screenshot URL so reviewers know what state was captured.
Resize intentionally. Use image_width or image_height only when you need a smaller display artifact. For OCR, chart review, and AI inspection, preserve enough resolution for text and labels.
Set cache=false for verification runs. Cached WebP captures are useful for repeated reads, but deployment checks, support escalations, and monitoring confirmations often need a fresh render.
Do not expect WebP for PDF output. format=pdf returns a PDF, not a WebP image. Use the PDF guide when print CSS, paper size, or document export is the goal.
Watch downstream compatibility. Modern browsers support WebP, but some older email, enterprise, or document systems may still prefer PNG or JPEG. Test the receiver before changing a workflow format.

Security note: keep API keys on a server-side job. If the screenshot requires cookies, headers, or private URLs, pass them from trusted backend code and avoid logging the resulting request URL.

FAQ

Can SnapshotFlow capture full-page screenshots as WebP?

Yes. Use format=webp with full_page=true. For very tall pages, test text readability and output size before using the same quality value everywhere.

Can I capture an element screenshot as WebP?

Yes. Combine format=webp with selector and, when needed, wait_for_selector. SnapshotFlow captures the matched element using the same WebP format and quality settings.

Is WebP always smaller than PNG?

Often, but do not make it a blind rule. Screenshots with flat UI, photos, gradients, charts, and text compress differently. Validate against your own page mix and downstream review needs.

Sources and further reading

Playwright 1.62 release notes for WebP screenshot support.
Chrome DevTools Protocol Page.captureScreenshot for supported screenshot formats including WebP.
MDN image type guide for WebP browser image-format context.
Anthropic vision documentation for accepted image inputs, including WebP, when using screenshot artifacts in AI workflows.
Cloudflare Browser Rendering screenshot endpoint as another current browser-rendering API reference point.

Next step

Pick one representative page, capture it as PNG and WebP, and compare output size with the actual review path: dashboard, ticket, notification, AI request, or archive. Then lock the viewport, quality, and response type into the workflow.

Read /screenshot docs