WebP Image Example · ScreenshotNeo

WebP is an image file format that stores images in a RIFF-based container using VP8 or VP8L image data. It supports lossy and lossless compression, transparency, and animation. You can open WebP files in modern browsers and many image applications, convert them with Google’s cwebp and dwebp tools, or generate WebP screenshots through an API.

What is a WebP image?

The WebP Image Format is defined by IETF RFC 9649 as a RIFF-based image format. A WebP file can contain:

Lossy images: smaller files produced by discarding some visual information.
Lossless images: pixels reconstructed exactly from the encoded data.
Alpha transparency: transparent pixels, like PNG.
Animation: multiple frames in one file.

Google’s overview reports that lossless WebP images are 26% smaller than comparable PNG images, while lossy WebP images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality. These are Google’s comparative results for its test material, not a guaranteed reduction for every image.

What does a WebP image look like?

A WebP image can look like any other raster image: a photograph, illustration, icon, screenshot, or animation. The .webp extension identifies the encoding, not the subject or visual style.

Two WebP files can look different because one may use lossy compression and the other lossless compression. Transparency can make a WebP appear to have no background, and an animated WebP may display motion when opened in a browser.

How do I open a WebP file?

Drag the file into a current Chrome, Edge, Firefox, or Safari browser window.
Use an image editor or viewer that lists WebP among its supported formats.
If the application cannot open it, convert it to PNG or JPEG with dwebp or another trusted converter.

Support depends on the application and on the WebP feature being used. If your audience includes clients or embedded systems with uncertain support, provide a fallback format. Check the current compatibility guidance in Google’s WebP FAQ instead of relying on old browser-version tables.

How do I convert an image to WebP?

Google’s reference tools are included with the libwebp distribution. The basic PNG-to-WebP command is:

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

The -q 80 setting requests lossy quality 80. The resulting size and appearance depend on the source image and encoder settings.

Convert JPEG or other supported input

cwebp -q 80 photo.jpg -o photo.webp

Use lossless encoding when every pixel matters:

cwebp -lossless diagram.png -o diagram.webp

Convert WebP back to PNG

dwebp image.webp -o image.png

Decoding to PNG preserves the decoded pixels, but converting a lossy WebP cannot restore details discarded during the original encoding.

Inspect the result

Compare the source and output at their intended display size. A smaller file is useful only if the visual quality and required features remain acceptable. Check transparency and animation separately; a workflow that converts an animated or transparent source to JPEG will lose those capabilities.

WebP versus JPEG, PNG, and GIF

Requirement	WebP	JPEG	PNG	GIF
Lossy compression	Yes	Yes	Typically no	Limited palette
Lossless compression	Yes	No	Yes	Yes, with palette limits
Transparency	Yes, including alpha	No	Yes	Palette transparency
Animation	Yes	No	Not in the usual single-image workflow	Yes
Typical use	Web photos, graphics, transparent assets, animation	Photographs and broad legacy compatibility	Graphics, screenshots, and exact-color assets	Short, simple animations

Choose based on the image, quality target, transparency or animation needs, and the applications that must decode it. WebP is not automatically the best choice for every asset.

Serving WebP on a website

Use a picture fallback

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Description of the image" width="1600" height="900">
</picture>

The browser can select the WebP source when it supports it and use the JPEG fallback otherwise. Keep meaningful alternative text on the fallback img element.

Use content negotiation

A server can inspect the request’s Accept header and return WebP to clients that advertise support, with another format as a fallback. Configure caches to vary on Accept when your server serves different representations for the same URL. Verify the behavior with your CDN and cache configuration.

Feature detection

For applications that need to know whether a specific WebP feature works, use the detection approach documented in Google’s FAQ. Detect the capability you require rather than assuming all WebP features have identical support.

Creating WebP screenshots

For a local workflow, a browser automation tool can load a page, wait for it to render, capture pixels, and encode the result as WebP. The difficult parts are usually page readiness, cookie banners, popups, lazy-loaded images, bot checks, and consistent viewport settings.

Practical capture checklist

Set the viewport and device pixel ratio explicitly.
Wait for a selector, a delay, or network idle before capture.
Scroll or use full-page capture so lazy images load.
Hide cookie notices, newsletters, chat widgets, and other overlays.
Choose lossy WebP for smaller photographic screenshots and lossless WebP for text-heavy or pixel-sensitive screens.
Record the URL, viewport, browser version, and encoding settings with each artifact.

Or skip the browser setup

ScreenshotNeo returns PNG, JPEG, WebP, or PDF from one GET request. Before capture it accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.

It also supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, device presets or custom viewports, retina scale, custom CSS and JavaScript, clicks, selector waits, delays, network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

See the ScreenshotNeo documentation for the complete option list and parameter details.

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)
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}`);

The free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.

Troubleshooting WebP files

Problem	Likely cause	Fix
The file will not open	The application lacks WebP support or the file is damaged	Try a current browser, validate the file, or decode it with `dwebp`.
The output is much larger	Lossless mode, high quality, or an unsuitable source	Test lossy quality settings for photos; keep lossless for graphics that need exact pixels.
Transparent background became solid	The target format or application does not preserve alpha	Keep WebP or PNG and verify the export settings.
Animation became a still image	The conversion workflow handled only one frame	Use an animation-capable WebP workflow and verify the output in a browser.
Text looks blurry	Lossy compression removed high-contrast detail	Raise quality or use lossless WebP for screenshots and UI text.
WebP is not selected in production	Missing `picture` fallback, cache variation, or incorrect MIME type	Check the HTML, send `image/webp`, vary caches on `Accept` when needed, and inspect the response in developer tools.

Performance, reliability, and cost considerations

Measure your own assets: file size depends on dimensions, content, quality, and encoder settings.
Keep dimensions intentional: resizing a source before encoding often matters more than changing formats.
Cache immutable assets: give versioned WebP files long cache lifetimes and change the URL when content changes.
Preserve fallbacks: compatibility requirements are part of reliability, especially for embedded viewers and older software.
For automated screenshots: use explicit waits, retries for transient navigation failures, deterministic viewport settings, and caching when the page has not changed.
For ScreenshotNeo: cache TTLs are configurable, cache hits are not billed, and failed loads, blank pages, bot checks, and timeouts are not billed.

WebP image FAQ

Is WebP better than PNG?

It depends on the image. WebP supports lossless compression and transparency and may be smaller, while PNG remains a useful fallback and a familiar lossless workflow.

Is WebP better than JPEG for photos?

WebP can provide smaller files at comparable visual quality, but the result depends on the source and settings. Compare the actual outputs before choosing.

Can I rename a PNG to WebP?

No. Changing the extension does not encode the pixels. Use an encoder such as cwebp.

Does WebP support transparent backgrounds?

Yes. WebP supports alpha transparency, although the application and export path must preserve it.

Can a WebP file contain animation?

Yes. Animated WebP is supported by the format, but verify that the target browser or application supports the animation feature you need.

What MIME type should a server send?

Serve WebP images as image/webp and provide a fallback strategy where required.