WebP to Base64

Drop a WebP and get a Base64 data URI you can paste straight into HTML or CSS. Everything runs in your browser — the file is never uploaded.

Drop a WebP here or click to browse

WebP files

— —

DATA URI

Raw Base64 Copy

Base64 output

Waiting for a WebP

How to convert a WebP to Base64

Drag a WebP onto the drop zone above (or click to browse). The tool reads it locally with the browser's FileReader API and produces a data URI — a string of the form data:image/webp;base64,UklGR… that embeds the whole image inline. Click Copy, then paste it where you need it. Use the Raw Base64 toggle if you want only the encoded payload without the data: prefix.

When to inline a WebP as a data URI

WebP is a modern, highly compressed format that supports both lossy and lossless modes plus alpha transparency — often 25–35% smaller than the equivalent PNG or JPEG. That makes it a good candidate for inlining small assets. The tradeoffs:

• Size: Base64 still adds ~33% on top of the compressed WebP bytes, so the data URI is larger than the file on disk.
• Caching: An inlined WebP can't be cached on its own — it's re-downloaded with the HTML/CSS whenever that changes.
• Rule of thumb: inline tiny WebP icons or thumbnails to save a request; keep larger or reused images as normal files served with cache headers.

Using the data URI in HTML and CSS

In HTML, drop it into an <img> src:

<img src="data:image/webp;base64,UklGRiIAAABXRUJQVlA4..." alt="thumbnail">

In CSS, use it as a background-image:

.thumb {
  background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4...");
}

Is this private?

Yes. The conversion happens entirely client-side in JavaScript. Your WebP is read into memory in the browser and encoded locally — it is never sent to a server. You can confirm this by opening DevTools → Network: adding a WebP fires no upload request.

Frequently asked questions

How do I convert a WebP to Base64?

Drop the WebP onto the converter at the top of this page. It outputs a data URI like data:image/webp;base64,UklGR… that you can paste into an <img> src or a CSS url().

Do WebP data URIs work in all browsers?

Yes — WebP is supported in all modern browsers (Chrome, Edge, Firefox, Safari 14+), so a data:image/webp;base64 URI renders like any other image. Only very old browsers need a PNG or JPEG fallback.

Should I inline a WebP as a Base64 data URI?

Inline small WebP icons or thumbnails to save an HTTP request. For large or reused images, keep a normal <img src="file.webp"> so the browser can cache it separately.

How do I go the other way (Base64 back to a WebP)?

Use the Base64 to WebP tool to decode a data URI or raw Base64 back into a viewable, downloadable WebP.