Base64 Encoding Explained Simply

What Is Base64?

Base64 is an encoding scheme that converts binary data into a string of ASCII characters. The name comes from the fact that it uses a 64-character alphabet: A–Z, a–z, 0–9, +, and /. Every 3 bytes of binary input produces exactly 4 Base64 characters — a 4:3 ratio, meaning Base64-encoded data is about 33% larger than the original.

It is not encryption. Base64 is fully reversible and provides no security. Anyone who has a Base64 string can decode it instantly. Its purpose is encoding, not protecting data.

Why Does Base64 Exist?

Many systems were designed to handle text, not arbitrary binary data. Email protocols (SMTP), HTML attributes, URLs, and JSON fields all expect printable text characters. If you try to embed a raw binary file (like a PNG image) in an email or a JSON payload, it breaks — certain byte values are interpreted as control characters.

Base64 solves this by representing any binary data using only safe, printable ASCII characters. This is why you see Base64 everywhere:

• Email attachments — MIME encodes files in Base64 before embedding them in email messages.
• Data URIs — src="data:image/png;base64,iVBOR..." embeds images directly in HTML/CSS.
• HTTP Basic Auth — Credentials are Base64-encoded in the Authorization header.
• JWTs — JSON Web Token headers and payloads are Base64URL-encoded.
• Storing binary in databases — Some databases or APIs don't support binary columns, so data is stored as Base64 strings.

How Base64 Encoding Works

Here's the step-by-step process for encoding the word "Man":

1. Convert each character to its ASCII byte value: M = 77, a = 97, n = 110
2. Write as binary: 01001101 01100001 01101110
3. Group into 6-bit chunks: 010011 010110 000101 101110
4. Map each 6-bit value (0–63) to the Base64 alphabet: T W F u

So "Man" encodes to TWFu. If the input length isn't a multiple of 3, the output is padded with = characters.

Base64 vs Base64URL

Standard Base64 uses + and /, which have special meaning in URLs (+ = space, / = path separator). For URL-safe encoding (used in JWTs and OAuth), Base64URL replaces:

• + → -
• / → _
• Padding = is usually omitted

How to Encode/Decode in JavaScript

// Encode a string to Base64
const encoded = btoa("Hello, World!");
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// Decode Base64 back to string
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
console.log(decoded); // "Hello, World!"

For binary data (files, images) in modern JavaScript, use the FileReader API or Buffer in Node.js:

// Node.js: encode a file to Base64
import { readFileSync } from "fs";
const data = readFileSync("image.png");
const b64 = data.toString("base64");

// Node.js: decode Base64 back to buffer
const buffer = Buffer.from(b64, "base64");

Practical Use Cases

Embedding Images in CSS

Small icons and logos can be embedded directly in your CSS as Data URIs, eliminating an HTTP request:

.logo {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

Sending Files via JSON API

If your REST API uses JSON and needs to accept file uploads, encoding the file as Base64 lets you send it as a string field. This avoids multipart form handling. Note: Base64 adds 33% overhead, so this is only practical for small files (<1MB).

Decoding a JWT Payload

A JWT looks like header.payload.signature. The payload is Base64URL-encoded JSON. You can decode it (without verification) like this:

const payload = jwt.split(".")[1];
const json = atob(payload.replace(/-/g, "+").replace(/_/g, "/"));
console.log(JSON.parse(json));

Frequently Asked Questions

Is Base64 the same as encryption?

No. Base64 is encoding — anyone can decode it. Never use Base64 to protect sensitive data. Use proper encryption (AES, RSA) for that.

Why is my Base64 string ending with == ?

The = padding characters appear when the input length isn't a multiple of 3 bytes. One = means 1 padding byte, two means 2. This is normal and required for correct decoding.

How much larger is Base64 than the original?

Exactly 4/3 times, or about 33% larger. A 100KB file becomes approximately 133KB when Base64-encoded.