WebP to Base64 converter

Drop in a WebP image and copy it as a Base64 data URI, raw Base64, an HTML img tag or a CSS background. Switch direction to turn Base64 back into a WebP file.

data:image/webp;base64,UklGR…

data:image/webp;base64,UklGRtYAAABXRUJQVlA4TMkAAAAvD8ADEEehoG0byftIHH+cVxoI2raNq/NneRyLgrZtJO9+ascfz1TWkSQref6AP5IgcPJyd3fbAHn/O300fVSlqbOiq+zEqNbxX3EM0X2YcAE4gIILhQVKPtzoKRoobAuDRiEedsoodgOCVDHwL+7tVXAYSbYSDW6LnOByLvmniBNBRP8ngAM6r6H6/qNPNbxDwM8lqW4k6WrAXYufEC/rIV9WwG3ZA4xiSWEAfjuXmIx/7VRqM22Uo85l3suki8XS4HR2WO55bA0A

222 bytes WebP · 296 Base64 characters (+33%)

How to convert WebP to Base64

Choose your WebP file, or drag it onto the box. It is read in your browser, so private images never leave your computer.
Pick the format you need. Data URI for web pages, raw Base64 for an API or JSON field, or a ready-made img tag or CSS rule.
Copy the result and paste it where the image should go.

Base64 turns the image's bytes into plain letters and numbers, so the picture can travel inside text: an HTML file, a stylesheet, a JSON request. The image itself is not changed or recompressed; decoding the Base64 gives back the exact same file.

Example: a 222-byte WebP icon

You have a small heart icon, heart.webp, 16 × 16 pixels and 222 bytes, and you want it inside your HTML instead of as a separate file. This is the example loaded in the tool.

Raw Base64 (296 characters)

UklGRtYAAABXRUJQVlA4TMkAAAAvD8ADEEehoG0byftIHH+cVxoI2raNq/NneRyLgrZtJO9+ascfz1TWkSQref6AP5IgcPJyd3fbAHn/O300fVSlqbOiq+zEqNbxX3EM0X2YcAE4gIILhQVKPtzoKRoobAuDRiEedsoodgOCVDHwL+7tVXAYSbYSDW6LnOByLvmniBNBRP8ngAM6r6H6/qNPNbxDwM8lqW4k6WrAXYufEC/rIV9WwG3ZA4xiSWEAfjuXmIx/7VRqM22Uo85l3suki8XS4HR2WO55bA0A

As an img tag

<img src="data:image/webp;base64,UklGRtYAAABXRUJQ…bA0A" alt="Heart" width="16" height="16">

Result: 222 bytes became 296 characters. With the 23-character data:image/webp;base64, prefix, the full data URI is 319 characters.

Using WebP Base64 in HTML and CSS

Where to paste WebP Base64 and which format to use
Where it goes	Format	Looks like
HTML image	Data URI	<img src="data:image/webp;base64,…">
CSS background	Data URI	background-image: url("data:image/webp;base64,…");
JSON or API field	Raw Base64	"image": "UklGR…"
Email	Avoid	Gmail and many other mail apps do not show data URI images

If an API rejects your image, check which one it wants: most expect raw Base64 and fail on the data: prefix, while browsers need the prefix to know it is a WebP.

Does Base64 make a WebP bigger?

Yes, by about a third. Every 3 bytes of image become 4 Base64 characters, so a 30 KB WebP turns into about 40 KB of text. The table shows the raw Base64 size; add 23 characters for the data URI prefix.

WebP file size and the size of its Base64
WebP file	Base64	Increase
1 KB	1.3 KB (1,368 characters)	+34%
5 KB	6.7 KB	+33%
10 KB	13.3 KB	+33%
50 KB	66.7 KB	+33%
100 KB	133.3 KB	+33%
1 MB	1.33 MB	+33%

That makes Base64 a good fit for small icons and placeholders of a few KB, where saving a separate download is worth it. For photos and large images, a normal .webp file is better: it is smaller, and the browser can cache it and reuse it across pages.

WebP to Base64 in JavaScript, Python and the command line

JavaScript in the browser (gives a data URI)

const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // data:image/webp;base64,…
reader.readAsDataURL(file);

Node.js (gives raw Base64)

const fs = require('fs');
const base64 = fs.readFileSync('image.webp').toString('base64');

Python

import base64

with open('image.webp', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')

Command line

base64 -w 0 image.webp      # Linux (-w 0 = no line breaks)
base64 -i image.webp        # macOS
[Convert]::ToBase64String([IO.File]::ReadAllBytes("C:\images\image.webp"))   # Windows PowerShell

For a data URI, put data:image/webp;base64, in front of the raw Base64.

Turning Base64 back into a WebP file

Switch the tool to Base64 → WebP and paste either the full data URI or just the Base64. It also copes with line breaks, missing = padding, the URL-safe - and _ characters, and a leftover src="…" or url(…) around it. Check the preview, then download the .webp file.

Quick check: WebP Base64 always starts with UklGR, because every WebP file starts with the letters RIFF. If yours starts with iVBOR it is a PNG, /9j/ is a JPEG and R0lGOD is a GIF; the tool tells you which.

In code, decoding is one line:

base64 -d image.txt > image.webp                      # Linux / macOS
open('image.webp', 'wb').write(base64.b64decode(b64))  # Python

Frequently asked questions

What is the difference between Base64 and a data URI?

Raw Base64 is just the encoded characters (UklGR…). A data URI adds data:image/webp;base64, in front so a browser knows it is a WebP image. Use the data URI in HTML and CSS, and raw Base64 for most APIs.

Why does my WebP Base64 not show as an image?

Usually the data URI prefix is missing, or the string was cut short when copying. Paste it into the Base64 → WebP side: if it previews there, the Base64 is fine and the problem is where you pasted it.