What is Base64 encoding?

Base64 is a way of representing binary data using only 64 printable ASCII characters (A–Z, a–z, 0–9, + and /). It lets you safely transmit or store data — like images, files, or text with special characters — in systems that only reliably handle plain text, such as URLs, JSON, XML, or email.

How do I encode text to Base64?

Paste or type your text into the input box on the left with "Encode" selected. The Base64 result appears instantly on the right thanks to live mode. Click "Copy" to copy it to your clipboard.

How do I decode a Base64 string?

Switch to "Decode", paste your Base64 string into the input box, and the original text appears on the right. If the string is not valid Base64, you will see a clear error message.

Is this Base64 tool safe and private?

Yes. All encoding and decoding happens entirely in your browser using JavaScript — your data is never uploaded to a server. This makes it safe to use even with sensitive text.

What is URL-safe Base64?

URL-safe Base64 replaces the "+" and "/" characters with "-" and "_" so the result can be used in URLs and filenames without additional escaping. Enable the "URL-safe variant" option before encoding.

Does Base64 encryption keep my data secure?

No. Base64 is an encoding, not encryption — anyone can decode it. Use it for safe transport and storage of data, not to protect secrets. For confidentiality you need real encryption.

How to Encode an Image to Base64 — Data URIs Explained

Encoding an image to Base64 turns the file into a text string you can embed directly inside HTML or CSS — no separate image request needed. That string is usually wrapped as a data URI.

What a Base64 image (data URI) looks like

A data URI has three parts: the MIME type, the base64 marker, and the encoded data:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Encode an image in the browser (JavaScript)

FileReader.readAsDataURL() is the reliable way — it produces the full data URI, correctly handling the binary bytes:

const input = document.querySelector("input[type=file]");
input.addEventListener("change", () => {
  const reader = new FileReader();
  reader.onload = () => console.log(reader.result); // data:image/png;base64,...
  reader.readAsDataURL(input.files[0]);
});

Encode an image on the command line

# Linux (no line wrapping)
base64 -w0 logo.png > logo.txt

# macOS
base64 -i logo.png -o logo.txt

# Build a full data URI (Linux)
echo "data:image/png;base64,$(base64 -w0 logo.png)"

Use it in HTML and CSS

<img src="data:image/png;base64,iVBORw0KG..." alt="Logo" />

.logo {
  background-image: url("data:image/png;base64,iVBORw0KG...");
}

When to use — and avoid — Base64 images

Good for: tiny icons, sprites, and email templates, where cutting an HTTP request helps.
Costs ~33% more size: Base64 always inflates data by about a third.
Not cached separately: the image re-downloads with every page that inlines it.
Avoid for large images — a normal <img> file is faster and cacheable.

Working with text instead of images? Use the Base64 encoder/decoder, or the JSON formatter for JSON payloads.