Best Image Formats for Website Screenshot APIs: PNG or WebP?

Short answer: use PNG or lossless WebP when screenshots must preserve text, icons, thin borders, and other sharp edges. PNG is the conservative choice; lossless WebP can be smaller while preserving image data. MDN says lossless WebP images are typically 26% smaller than comparable PNG images, but that is a general comparison, not a guaranteed saving for your screenshot API or captures. Use lossy WebP only when you have checked its quality at the size people will actually view.

First check the screenshot API’s documentation and response headers. A file extension alone does not prove the encoding, and browser-level format defaults do not tell you what every hosted screenshot service supports.

1. PNG vs. WebP for website screenshots

Format	Compression	Transparency	Good starting point	Trade-off
PNG	Lossless	Yes	Pixel fidelity, text-heavy pages, visual diffs, archival captures	Files may be larger than lossless WebP for the same image
WebP, lossless	Lossless	Yes	Faithful pixels with a chance of smaller files	Confirm that the API and every downstream consumer accept WebP
WebP, lossy	Lossy	Yes	When smaller files matter more than exact pixels	Compression can blur text or create colored fringes near sharp edges

For screenshots, diagrams, logos, and line art, MDN recommends lossless encoding because blur and colored fringes around text and sharp edges are easy to see. Lossless WebP is therefore a useful option when the recipient supports it and you want to reduce output size without choosing lossy compression.

About the 26% figure: MDN describes lossless WebP as typically 26% smaller than the same image in PNG. Actual results depend on page content, dimensions, and encoder behavior. Do not treat that figure as a per-capture promise or a benchmark of a particular API.

2. Choose a format for your use case

• Pixel comparison, OCR-sensitive review, or long-term reference: start with PNG or lossless WebP. Keep a lossless original if later work depends on faithful pixels.
• Smaller files with faithful image data: try lossless WebP, then verify the actual response encoding and size.
• Bandwidth or storage is the priority: test lossy WebP at candidate quality settings. Inspect small text, one-pixel borders, icons, and colored edges at the intended display size.
• Transparent background: PNG and WebP both support transparency. Confirm that the API preserves alpha and that your consumer handles it as expected.
• Compatibility with an unknown consumer: PNG is a conservative starting point, but still check the receiving system. Compatibility depends on that system, not just browser support.

For an apples-to-apples comparison, use the same page, viewport, device scale, wait condition, and capture dimensions. Compare decoded pixels for fidelity and actual output bytes for size. If lossy quality is involved, review the image visually; file size alone cannot show whether text remains legible.

3. Verify what the screenshot API returns

1. Read the provider’s accepted format names and quality rules. Do not assume that an API accepts a browser MIME type as its parameter value.
2. Request the format explicitly when the API supports it. Record any quality setting too, and check whether it applies only to lossy encoding.
3. Inspect the response’s Content-Type. MDN lists image/png for PNG and image/webp for WebP.
4. Check the downloaded file and decode it with your image tooling. Do not infer format from the filename suffix.
5. Check dimensions and transparency as well. A valid format can still be the wrong size or have an unexpected background.
6. Repeat with representative pages: text-heavy layouts, photographs, icons, thin rules, and transparent areas if relevant.

Defaults vary by implementation. The WebDriver BiDi screenshot command documents PNG as its default when format is omitted and supports a MIME-type option plus a quality parameter for lossy formats. Canvas export also falls back to PNG when no supported type is selected. These browser behaviors do not establish the defaults or capabilities of a hosted screenshot API.

4. Browser-level examples: request and inspect a screenshot

These examples use the WebDriver BiDi screenshot command shape. They illustrate browser-level capture, not a universal hosted screenshot API endpoint. Consult your WebDriver implementation’s documentation for session setup, command transport, and its accepted options.

PNG with WebDriver BiDi

// Send this command through your WebDriver BiDi session's command transport.
{
  "method": "browsingContext.captureScreenshot",
  "params": {
    "context": "YOUR_BROWSING_CONTEXT_ID",
    "format": { "type": "image/png" }
  }
}

WebP with an explicit lossy quality

// Use only if your WebDriver implementation supports WebP.
{
  "method": "browsingContext.captureScreenshot",
  "params": {
    "context": "YOUR_BROWSING_CONTEXT_ID",
    "format": { "type": "image/webp", "quality": 80 }
  }
}

The value 80 is an example setting, not a recommended universal quality level. Test the range your implementation documents. If you need lossless WebP, verify that the capture API exposes a lossless mode; a MIME type by itself does not prove that it does.

Canvas export: check the returned MIME type

const canvas = document.querySelector("canvas");
if (!canvas) throw new Error("Canvas not found");

const blob = await new Promise((resolve) => {
  canvas.toBlob(resolve, "image/webp", 0.8);
});
if (!blob) throw new Error("Canvas export failed");

console.log("Actual encoding:", blob.type);
console.log("Output bytes:", blob.size);

Canvas export can fall back to PNG if the requested type is omitted or unsupported. Check blob.type before labeling or serving the result, and remember that canvas export captures the canvas content rather than a whole web page.

5. Configure an encoder when you own the pipeline

If your application receives screenshot pixels and performs encoding itself, set the output format explicitly. Sharp documents PNG and WebP output, including a lossless WebP option. This demonstrates encoder capability; it does not mean a particular screenshot service uses Sharp.

import sharp from "sharp";
import { readFile, writeFile } from "node:fs/promises";

const screenshotPixels = await readFile("capture.png");
const webp = await sharp(screenshotPixels)
  .webp({ lossless: true })
  .toBuffer();

await writeFile("capture-lossless.webp", webp);

For lossy output, select a quality only after checking the encoder’s documented range and reviewing representative captures:

const webp = await sharp(screenshotPixels)
  .webp({ quality: 80 })
  .toBuffer();

The quality value is an example, not a universal setting. Encoder options and defaults can change; consult the version of the encoder you use.

6. ScreenshotNeo: format options for API captures

ScreenshotNeo is a website screenshot API and MCP server. Its API returns PNG, JPEG, or WebP, and its format controls include WebP quality. For exact format parameter names and current request options, see the ScreenshotNeo API documentation.

One GET request can capture a URL. This runnable cURL example saves a WebP response:

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

Python:

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)

Node.js:

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 import('node:fs/promises').then(async ({ writeFile }) =>
  writeFile('shot.webp', Buffer.from(await res.arrayBuffer()))
);

These examples use the documented base request and target URL. Set output format and any quality options according to the API documentation, and inspect the response headers before treating the saved bytes as a particular encoding.

7. Performance, reliability, and cost

Compare the whole pipeline

• Transfer and storage: compare actual response sizes for your pages. Smaller files can reduce transfer and storage needs, but the gain varies.
• Encoding and decoding: include conversion work and downstream image processing in your decision. The available research does not establish a universal speed winner.
• Fidelity: lossy output can make small text and edges harder to inspect. For diffs, OCR, or audit records, preserve a lossless source where pixel fidelity matters.
• Reliability: use explicit format settings when supported, check status and MIME type, and handle a provider returning an error instead of image bytes.
• Cost: format choice can affect bandwidth and storage, but the research provides no measured cost comparison. Calculate it from your own request volume, output sizes, retention, and transfer pricing.

Practical selection checklist

• Does the API document the requested format and quality behavior?
• Does the response header match the encoding you requested?
• Can every consumer open that format?
• Do text, borders, and icons remain clear at the actual viewing size?
• Does alpha transparency survive the full pipeline?
• Have you measured representative output sizes instead of relying on a generic percentage?

8. Troubleshooting

Symptom	Likely cause	Fix
File ends in .webp but will not decode	The response may be an error body, another image encoding, or a non-image response saved with that suffix	Check HTTP status and Content-Type; inspect the response before saving it as an image
Requested WebP, received PNG	The API may not support that type, may have ignored the request, or may have fallen back	Check documented format names and inspect the actual MIME type; canvas export can fall back to PNG for unsupported types
WebP text looks soft or has colored edges	Lossy compression is affecting sharp features	Use PNG or lossless WebP, or test a higher quality setting and inspect at the target size
WebP output is not smaller	The content or encoder may not benefit from WebP for this particular image	Compare actual bytes on representative captures; choose based on measured results rather than assuming a fixed saving
Transparency appears as a solid background	The capture or a later conversion step may have composited the background, or the consumer may not display alpha	Check alpha preservation at capture, encoding, and display stages; test both PNG and WebP in the destination
Quality option has no effect	The API may ignore quality for lossless output or may not expose that option	Confirm documented support and whether quality applies only to lossy encoding; compare decoded outputs
Screenshot is unexpectedly large	Viewport, full-page dimensions, or device scale may be larger than expected	Verify output dimensions and capture settings before comparing formats

9. Or skip the browser setup

Use the ScreenshotNeo API for a one-call capture and consult the API docs for output format and quality options:

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

ScreenshotNeo accepts cookie and consent banners like a visitor, then removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server lets Claude, Cursor, and other MCP clients use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month with no card.

10. FAQ

Which image format is best for website screenshots?

PNG or lossless WebP when preserving text and sharp edges matters. Choose based on API support and the needs of your downstream systems.

Should screenshot APIs return PNG or WebP?

Either can work. The API should document its supported formats and return a matching MIME type. Test the result with your actual consumers.

Is lossless WebP always 26% smaller than PNG?

No. MDN reports 26% as a typical comparison. The size difference for a particular screenshot depends on its content and encoding.

Does a WebP file extension prove the image is WebP?

No. Check the response MIME type and decode the bytes. A filename can be wrong, and an error response can be saved with an image suffix.

Sources

• MDN: Image file type and format guide — compression, transparency, MIME types, and the typical lossless WebP size comparison.
• WebDriver BiDi: Capture Screenshot command — documented screenshot format and quality options.
• MDN: HTMLCanvasElement.toBlob() — canvas export type behavior.
• Sharp output API — PNG and WebP encoder options, including lossless WebP.