Base64 Encoding & Decoding Explained: Complete Guide

Published: June 7, 2026 · 11 min read

What is Base64 Encoding?

Base64 is an encoding scheme that converts binary data into ASCII string format by translating it into a radix-64 representation. It's designed to allow binary data to be transmitted over channels that only support text, making it essential for web development, email systems, and API integrations.

The technique was originally developed in the early days of email when the Simple Mail Transfer Protocol (SMTP) could only handle 7-bit ASCII characters. Today, Base64 remains crucial for embedding images in HTML/CSS, transmitting binary data in JSON APIs, and handling file uploads.

One common misconception is that Base64 encrypts data. It does not. Base64 is merely an encoding mechanism that makes binary data safe for text-based transmission. The output is easily reversible and should never be used for security purposes.

How Base64 Works: The Technical Details

Base64 uses a 64-character alphabet to represent binary data. This alphabet consists of uppercase letters A-Z, lowercase letters a-z, digits 0-9, plus (+), and forward slash (/). For padding, the equals sign (=) is used.

The Base64 Alphabet

Index | Character | Index | Character | Index | Character | Index | Character
------|-----------|-------|-----------|-------|-----------|-------|-----------
   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   | /

Size Increase Calculation

Base64 encoding increases data size by approximately 33%. For every 3 bytes of binary data, you get 4 Base64 characters. The formula is:

Base64 size = ceil(binary_size / 3) * 4

Additionally, padding may add 1-2 characters if the input isn't divisible by 3.

Common Use Cases

1. Data URIs for Images

Embedding small images directly in HTML or CSS reduces HTTP requests:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

2. API Authentication

Basic HTTP authentication uses Base64-encoded credentials:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

This decodes to "username:password" but is not encrypted—always use HTTPS.

3. Email Attachments

MIME email uses Base64 to encode binary attachments like images and documents. This is why email attachments appear as garbled text in raw email headers.

4. JSON Data Transmission

When APIs need to transmit binary data (file uploads, signatures), Base64 encoding makes it JSON-compatible:

{
  "document": {
    "filename": "contract.pdf",
    "content": "JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBlIC9QYWdlCi9QYXJlbnQgMSAwIFI...",
    "mimeType": "application/pdf"
  }
}

5. Storing Binary Data in Text Fields

Databases without BLOB support can store binary data by encoding it as Base64 strings.

Step-by-Step Encoding Process

Understanding how Base64 works helps you debug issues and work with data more effectively. Here's the manual process:

Example: Encoding "Hi"

Step 1: Convert each character to its 8-bit ASCII binary representation:

H = 72 = 01001000
i = 105 = 01101001

Step 2: Combine into a 16-bit stream:

0100100001101001

Step 3: Group into 6-bit chunks (padding with zeros if needed):

010010 000110 1001--

Step 4: Convert each 6-bit chunk to decimal:

010010 = 18 = S
000110 = 6  = G
1001-- = 36 padded to 36 = a

Step 5: Map to Base64 alphabet and add padding:

S G a =

So "Hi" encodes to "SGk=" in Base64. You can verify this with the JieBang Base64 Encoder/Decoder.

Implementation in Popular Languages

JavaScript

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

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

// For UTF-8 characters (like Chinese)
const utf8Encode = (str) => {
  return encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
    (_, p1) => String.fromCharCode(parseInt(p1, 16)));
};

const utf8Decode = (str) => {
  return decodeURIComponent(str.split('').map(c => 
    '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  ).join(''));
};

const chinese = "你好";
const encodedChinese = btoa(utf8Encode(chinese));
console.log(encodedChinese); // "5L2g5aW9"

Python

import base64

# Encoding
text = "Hello, World!"
encoded = base64.b64encode(text.encode('utf-8'))
print(encoded) # b'SGVsbG8sIFdvcmxkIQ=='

# Decoding
decoded = base64.b64decode(encoded)
print(decoded.decode('utf-8')) # "Hello, World!"

# File encoding
with open('image.png', 'rb') as f:
    file_data = f.read()
    encoded_data = base64.b64encode(file_data)

Node.js

const Buffer = require('buffer').Buffer;

// Encoding
const text = "Hello, World!";
const encoded = Buffer.from(text).toString('base64');
console.log(encoded); // "SGVsbG8sIFdvcmxkIQ=="

// Decoding
const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log(decoded); // "Hello, World!"

// Modern approach (Node 10+)
const encodedModern = Buffer.from(text).toString('base64url');
console.log(encodedModern); // "SGVsbG8sIFdvcmxkIQ"

Security Considerations

What Base64 Is NOT

• Not encryption: Anyone can decode Base64. It's not a security mechanism.
• Not compression: Base64 increases data size by 33%.
• Not obfuscation: It provides zero protection against reverse engineering.

When Base64 Is Safe to Use

• Transmitting binary data over text-only protocols (HTTP headers, XML, JSON)
• Encoding data for URLs that contain special characters (though URL-safe Base64 is preferred)
• Storing small binary data in systems without native binary support
• Email MIME encoding

When NOT to Use Base64

• Storing passwords or sensitive credentials (use proper hashing like bcrypt)
• API authentication without HTTPS (credentials are trivially readable)
• Large files (33% size increase plus encoding overhead)
• Performance-critical paths (encoding/decoding adds CPU overhead)

URL-Safe Base64

Standard Base64 uses +, /, and = characters, which can cause issues in URLs. URL-safe Base64 replaces these:

Standard Base64: + / =
URL-Safe Base64: - _ (no padding)

// JavaScript URL-safe encoding
const urlSafeEncode = (str) => {
  return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
};

const urlSafeDecode = (str) => {
  const base64 = str.replace(/-/g, '+').replace(/_/g, '/');
  return atob(base64);
};

Base64 Variants and Alternatives

Base64 Variants

When to Choose Alternatives

For many modern use cases, consider these alternatives:

• Protocol Buffers: More efficient binary serialization for internal services
• MessagePack: Compact binary format similar to JSON
• FlatBuffers: Efficient cross-language serialization for games and real-time apps
• BSON: Binary JSON extension used by MongoDB