About the WebP to Base64 Converter
WebP typically stores the same picture in a quarter to a third fewer bytes than PNG or JPEG, which makes it the sensible starting point when you plan to inline something. Since Base64 inflates whatever it is given by roughly a third, starting from the smallest possible file is the single biggest saving available.
The encoder reads the file locally and confirms the format from the RIFF container header, where the bytes RIFF are followed four positions later by WEBP. Both the lossy and lossless variants encode identically, and an alpha channel is preserved because the bytes are never re-encoded.
One caution before you inline: a data URI carries no fallback. Every current browser supports WebP, but an old client, a feed reader or a mail client that does not will show nothing at all, with no chance to substitute a PNG the way a <picture> element would. Keep that in mind for email templates in particular.
The output shapes cover a plain data URI, a CSS background declaration, an img tag, a Markdown image and a JSON object with the file metadata. Use PNG to Base64 when you need the safer fallback format, and Base64 to Image to preview an encoded string.
How to use
- Choose or drop a
.webpfile on the panel. - Select how you want it wrapped, from a raw data URI to a CSS rule.
- Copy the result, and keep a PNG fallback if old clients matter to you.
Common questions
- Is animated WebP supported?
- Yes. The container is copied whole, so an animated WebP keeps all of its frames.
- Why choose WebP over PNG for inlining?
- It is usually much smaller, and since Base64 multiplies the size, a smaller starting file gives a much shorter string.
- Does the alpha channel survive?
- Yes. Nothing is re-encoded, so lossless WebP with transparency is preserved byte for byte.
- What if a browser cannot display WebP?
- A data URI has no fallback, so nothing renders. Use a PNG data URI where old clients are a real concern.