How to use
- Pick a direction: Image → Base64 to encode, or Base64 → Image to decode.
- To encode, upload an image. The full data URL and a ready-to-paste CSS background rule appear instantly, along with the MIME type and decoded size.
- Copy the data URL or the CSS snippet with one click.
- To decode, paste a base64 string or a full data URL — the image previews and a Download button appears.
What a data URL looks like
A base64 data URL packs an image’s bytes into a single string:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…The browser reads the data: prefix, the MIME type (image/png), the ;base64 marker, and then the encoded bytes — and renders it exactly like a linked image.
When to inline an image
Inlining shines for small assets — icons, tiny backgrounds, a logo inside an email — because it removes a separate network request. It’s a poor fit for large images: base64 is about 33% larger than the raw file, it can’t be cached on its own, and it bloats your HTML or CSS. A good rule of thumb is to inline only images of a few kilobytes or less.
Private by design
Both encoding and decoding happen locally in your browser. Your image and the resulting base64 string are never uploaded, so the conversion is instant and your files stay private.