How to Encode and Decode Base64 (With Examples)

You open a config file and find a long line like SGVsbG8sIFdvcmxkIQ==. It looks like a secret. It isn't. It's Base64, and anyone can turn it back into the original in a second. Here's what it is, where it shows up and how to encode and decode it.

What is Base64?

Base64 is a way to write binary data as text using 64 printable ASCII characters: A-Z, a-z, 0-9, + and /, with = as padding at the end. Every three bytes of input become four characters of output, so encoded data is about 33% larger than the original.

Why bother? Some channels, like email, were built to carry text only. Raw bytes from an image or a PDF can get mangled on the way. Base64 turns those bytes into safe, boring letters and digits. On the web you'll also see it in HTML and CSS, in URLs and in HTTP headers.

Where Base64 is used

Email attachments

Email was built to carry text. When you attach an image or a PDF, the mail client encodes the file as Base64 (part of the MIME standard) so it survives mail servers that only accept 7-bit text. The recipient’s client decodes it back into the file. You never see any of this, which is the point.

Data URIs

A data URI embeds a file directly in HTML or CSS, so the browser doesn't make a separate request for it. Small icons and images are often inlined this way:

HTML

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

That saves a network request for small assets. But the encoded file is a third larger and can't be cached on its own, so it's a poor fit for large images. To turn an image into a data URI, use the image to Base64 converter.

HTTP Basic authentication

Basic authentication joins a username and password with a colon and sends the Base64 of that string in the Authorization header. For the username admin and the (please don’t use it) password secret123:

HTTP

GET /api/reports HTTP/1.1
Host: example.com
Authorization: Basic YWRtaW46c2VjcmV0MTIz

Decoding YWRtaW46c2VjcmV0MTIz gives back admin:secret123, which is why Basic authentication must only be used over HTTPS.

Encoding is not encryption

This is the part people get wrong most often. Base64 provides no security. It's a reversible transformation, and anyone can decode it without a key. Encryption uses a secret key, so the data can't be read without it.

So don't use Base64 to hide passwords, tokens or personal data. To protect data in transit, use HTTPS. To protect stored data, use real encryption such as AES-256.

How to use the Base64 encoder and decoder

Open the Base64 encoder and decoder and pick Encode or Decode.
Paste your text or Base64 string and select the Encode or Decode button below the input.
Select Copy to copy the result. Swap moves the output back into the input and flips the mode, which is a quick way to check a round trip.

Text is encoded as UTF-8, so accented letters, non-Latin scripts and emoji all work. Decoding expects standard Base64 that holds UTF-8 text. Two things it won't do: URL-safe strings that use - and _ are rejected until you swap those back to + and /, and an encoded image won't decode into anything readable. Everything runs in your browser.

Base64 in JavaScript

Browsers and Node.js have btoa to encode and atob to decode:

JavaScript

const encoded = btoa("Hello, World!");
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

There's a catch. Both only handle characters in the Latin-1 range, and btoa throws an error on anything else, such as the euro sign below. For Unicode text, convert to UTF-8 bytes first and back again after decoding:

JavaScript

function encodeUtf8(text) {
  const bytes = new TextEncoder().encode(text);
  return btoa(String.fromCharCode(...bytes));
}

function decodeUtf8(base64) {
  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

console.log(encodeUtf8("Coffee for 3 €")); // "Q29mZmVlIGZvciAzIOKCrA=="
console.log(decodeUtf8("Q29mZmVlIGZvciAzIOKCrA==")); // "Coffee for 3 €"

The spread into String.fromCharCode is fine for normal strings. For very large inputs (megabytes), build the string in chunks so you don't hit the engine's limit on function arguments.

URL-safe Base64

Standard Base64 uses + and /, which mean something else inside a URL. The URL-safe variant, called base64url, replaces them with - and _ and usually drops the = padding. You'll find it in JWTs, URL parameters and file names. To decode one with a standard decoder, swap the characters back and add = until the length is a multiple of four.

How to encode and decode Base64