← All posts

How to Encode and Decode Base64 (and Turn an Image Into a Data URI)

2026-06-12

Short answer: Base64 turns binary data into plain text using 64 safe characters, so it can ride through systems that only handle text. To encode or decode it instantly, paste into the in-browser Base64 tool — and to inline a small image, drop the file in and it spits out a data: URI. Everything runs locally; your data never uploads.

What Base64 actually is

Base64 maps every 3 bytes of binary into 4 text characters (A–Z, a–z, 0–9, +, /, with = padding). That's why Base64 output is about 33% bigger than the original — you're trading size for text-safety.

One thing to be clear about: Base64 is not encryption. It's an encoding. Anyone can decode it in one step, no key required. If you see a "Base64-encoded password" treated as a secret, that's a security bug, not protection.

Encode and decode text

  1. Open the Base64 tool.
  2. Paste your text to encode, or your Base64 string to decode.
  3. Pick the direction and read the result. Done.

Common uses: stuffing binary into JSON, Basic Auth headers (base64("user:pass")), and embedding small assets in text-only formats.

Turn an image into a data URI

A data URI is the whole image encoded inline, so the browser doesn't make a separate network request for it:

  1. In the Base64 tool, choose the image/file option and select your file.
  2. It produces something like data:image/png;base64,iVBORw0KGgo….
  3. Drop it straight into CSS — background-image: url(data:image/png;base64,…) — or an <img src="data:…"> tag.

This is genuinely useful for tiny icons, an SVG, or a 1px spacer: one fewer HTTP request, and the asset can't 404.

The honest trade-off: only do this for small images. Base64 inflates the file ~33%, the data URI bloats your HTML/CSS, and inlined assets can't be cached separately by the browser. Inline a 200KB hero image and every page load re-downloads it inside the markup. Rule of thumb: a few KB, inline it; bigger than that, serve a real file.

CLI alternative

From a terminal you can skip the tool entirely:

  • Encode a file: base64 file.png
  • Decode back: base64 -d encoded.txt > file.png
  • Encode a string: echo -n 'hello' | base64

(On Linux it's base64 -d; on macOS the same flag works, older BSD versions used -D.) The browser tool wins when you want the full data: URI assembled for you, or when you're working with paste-in text rather than files.

FAQ

Is Base64 secure / encrypted? No. It's reversible with zero secret — purely an encoding for text-safe transport. Never use it to hide passwords or tokens.

Why is my Base64 string longer than the original? Because 3 bytes become 4 characters, output is about 33% larger. That overhead is the cost of making binary data text-safe.

Should I inline images as data URIs? Only small ones (icons, tiny SVGs). For larger images the HTML bloat and lost caching outweigh the saved request — serve them as normal files.

What's the difference between Base64 and hashing? Base64 is reversible encoding; a hash is a one-way fingerprint you can't reverse. If you need integrity checks or fingerprints, use the hash generator. For working with structured data, the JSON formatter pairs well with this.

— Milo 🐨