Base64 Encoding Explained: How It Works and When to Use It

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into a string of ASCII characters. It uses a set of 64 characters (A-Z, a-z, 0-9, +, /) to represent binary data, making it safe to transmit through text-based protocols like email, HTTP headers, and JSON.

The name "Base64" comes from the fact that it uses 64 different characters to encode data. Each character represents 6 bits of data (since 2^6 = 64).

Why Does Base64 Exist?

Many communication protocols and storage systems were designed to handle text, not binary data. When you need to send binary data (images, files, encrypted content) through these text-based channels, you need a way to represent binary data as text.

Common use cases include:

• Email attachments — MIME encoding uses Base64 to embed binary files in email messages
• Data URIs — Embedding images directly in HTML/CSS: data:image/png;base64,...
• API payloads — Sending binary data in JSON (which only supports text)
• HTTP Basic Authentication — Credentials are Base64-encoded in the Authorization header
• Storing binary data in text formats — XML, JSON, CSV files

How Base64 Works: Step by Step

The Encoding Process

1. Take the input bytes — Each byte is 8 bits
2. Concatenate all bits — Create one long bit string
3. Split into 6-bit groups — Each group maps to one Base64 character
4. Map each group to a character — Using the Base64 alphabet
5. Add padding — Use = characters to make the output length a multiple of 4

The Base64 Alphabet

Index  Char    Index  Char    Index  Char    Index  Char
  0     A       16     Q       32     g       48     w
  1     B       17     R       33     h       49     x
  2     C       18     S       34     i       50     y
  3     D       19     T       35     j       51     z
  4     E       20     U       36     k       52     0
  5     F       21     V       37     l       53     1
  6     G       22     W       38     m       54     2
  7     H       23     X       39     n       55     3
  8     I       24     Y       40     o       56     4
  9     J       25     Z       41     p       57     5
 10     K       26     a       42     q       58     6
 11     L       27     b       43     r       59     7
 12     M       28     c       44     s       60     8
 13     N       29     d       45     t       61     9
 14     O       30     e       46     u       62     +
 15     P       31     f       47     v       63     /

Worked Example

Let's encode the string "Hi!" step by step:

Step 1: Get ASCII values

• H = 72, i = 105, ! = 33

Step 2: Convert to binary (8 bits each)

• H = 01001000
• i = 01101001
• ! = 00100001

Step 3: Concatenate

• 010010000110100100100001

Step 4: Split into 6-bit groups

• 010010 | 000110 | 100100 | 100001

Step 5: Convert to decimal and map

• 010010 = 18 → S
• 000110 = 6 → G
• 100100 = 36 → k
• 100001 = 33 → h

Result: "SGkh"

Padding

When the input length isn't divisible by 3, padding is needed:

• 1 byte input → 2 Base64 chars + ==
• 2 byte input → 3 Base64 chars + =
• 3 byte input → 4 Base64 chars (no padding)

Base64 in JavaScript

Browser (btoa/atob)

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

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

Important: btoa() only works with ASCII characters. For Unicode strings:

// Encode Unicode
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(
    /%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16))
  ));
}

// Decode Unicode
function decodeUnicode(str) {
  return decodeURIComponent(
    Array.from(atob(str))
      .map(c => "%" + c.charCodeAt(0).toString(16).padStart(2, "0"))
      .join("")
  );
}

Node.js (Buffer)

// Encode
const encoded = Buffer.from("Hello, World!").toString("base64");

// Decode
const decoded = Buffer.from(encoded, "base64").toString("utf-8");

// Encode a file
const fs = require("fs");
const fileBase64 = fs.readFileSync("image.png").toString("base64");

Base64 in Python

import base64

# Encode
encoded = base64.b64encode(b"Hello, World!").decode("utf-8")
print(encoded)  # SGVsbG8sIFdvcmxkIQ==

# Decode
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==").decode("utf-8")
print(decoded)  # Hello, World!

# Encode a file
with open("image.png", "rb") as f:
    file_base64 = base64.b64encode(f.read()).decode("utf-8")

Base64 URL-Safe Variant

Standard Base64 uses + and / which are not safe in URLs. The URL-safe variant replaces them:

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

This variant is used in JWTs, URL parameters, and filenames.

// URL-safe encode
function base64UrlEncode(str) {
  return btoa(str)
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

// URL-safe decode
function base64UrlDecode(str) {
  str = str.replace(/-/g, "+").replace(/_/g, "/");
  while (str.length % 4) str += "=";
  return atob(str);
}

When NOT to Use Base64

1. Encryption — Base64 is NOT encryption. It's trivially reversible. Never use it to "hide" sensitive data.

2. Large files in JSON — Base64 increases size by ~33%. For large files, use multipart uploads or binary protocols instead.

3. Images in production CSS — While data URIs work, they increase CSS file size and can't be cached separately. Use actual image files for anything over a few KB.

4. Passwords — Base64-encoded passwords provide zero security. Use proper hashing (bcrypt, argon2).

Size Overhead

Base64 encoding increases data size by approximately 33% (4 output bytes for every 3 input bytes). For a 1 MB file, the Base64 representation will be about 1.33 MB.

This overhead is the trade-off for being able to represent binary data as text. For most API payloads and small embedded assets, this is acceptable. For large files, consider binary transfer methods.

Try encoding and decoding with our Base64 Encoder/Decoder tool.