How to use
- Drop a WebP file onto the drop area, click to choose one, or paste an image. PNG and JPEG files work too.
- To create WebP from another format, choose WebP as the target format and set the quality.
- Optionally set a maximum width, then compare the original and encoded sizes.
- Copy or download the data URI, raw Base64, HTML img tag, CSS background-image or Markdown.
What is WebP?
WebP is an image format released by Google in 2010. It offers lossy compression based on the VP8 video codec, a separate lossless mode, an alpha channel and animation, all in one format. The MIME type is image/webp, and because the file is a RIFF container, the Base64 output starts with UklGR. Google reports lossless WebP files about 26% smaller than PNG, and lossy files 25 to 34% smaller than JPEG at comparable quality.
Why WebP suits data URIs
Base64 adds the same third to every file, so the smallest source gives the shortest string. That makes WebP a natural fit: a transparent PNG icon converted to WebP keeps its transparency and usually shrinks, and a JPEG photo gets smaller at a similar visual quality. Very high quality settings can produce a file larger than an optimised original, so check the encoded size before copying.
Animated WebP files keep all their frames when you encode them unchanged. Converting or resizing re-renders a single frame.
Browser and client support
All current major browsers display WebP: Chrome, Edge, Firefox, Opera and Safari 14 or later. Only very old browsers such as Internet Explorer lack support. Email is different: several desktop email clients, including Outlook for Windows, do not render WebP, so use PNG or JPEG in email templates.
Creating WebP data URIs in JavaScript
// Read a file the user selected
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Re-encode a canvas as WebP at 80% quality
const uri = canvas.toDataURL('image/webp', 0.8);If a browser cannot encode WebP, toDataURL silently falls back to PNG, so check that the result starts with data:image/webp.
Frequently asked questions
Can I convert PNG or JPEG to WebP Base64 here?
Yes. Load the image, choose WebP as the target format and set the quality. The conversion uses the encoder built into your browser, and the result is encoded as data:image/webp.
Does Base64 keep WebP animation?
Yes, provided no conversion is selected and no maximum width is set. The Base64 string then holds the exact file with every frame.
Do all browsers show data:image/webp images?
All current versions of Chrome, Edge, Firefox, Opera and Safari do. Internet Explorer and Safari versions before 14 do not.