What Is Base64 Encoding? A Beginner's Guide

If you've ever wondered what is Base64 encoding, the short answer is this: it's a method for converting binary data into text using 64 printable ASCII characters. Base64 exists because many systems — email servers, URLs, JSON parsers, databases — were designed to handle text, not raw binary. When you need to send an image through email, embed a file in a URL, or carry binary data in a JSON payload, Base64 is the bridge that makes it possible without corrupting the data.

The Problem Base64 Solves

Computers store everything as binary — sequences of 0s and 1s. But many communication protocols and storage systems were built around text. They expect printable characters and choke on raw binary data, which can contain null bytes, control characters, and byte sequences that don't map to any readable character.

For example, SMTP (email protocol) was originally designed for 7-bit ASCII text. Sending a raw binary file through SMTP would corrupt it — the protocol would interpret certain byte values as control signals and strip or alter them. The same problem exists in URLs (which can't contain spaces or certain characters), JSON (which only supports text, not binary), and XML.

Base64 encoding solves this by converting binary data into a format that only uses safe, printable characters. The encoded output can pass through any text-based system without modification.

What Is Base64 Encoding: How It Works

Base64 encoding takes binary data and processes it in groups of 3 bytes (24 bits). It splits those 24 bits into 4 groups of 6 bits each. Each 6-bit group represents a number from 0 to 63, which maps to a character in the Base64 alphabet.

The Base64 Alphabet

The 64 characters used in Base64 encoding are:

Value	Characters
0-25	`A-Z` (uppercase letters)
26-51	`a-z` (lowercase letters)
52-61	`0-9` (digits)
62	`+`
63	`/`
Padding	`=`

This alphabet was chosen specifically because these 64 characters exist in every common character encoding and are safe to transmit through text-based systems.

Step-by-Step Encoding Example

Let's encode the text "Man" to see how it works:

<svg viewBox="0 0 820 340" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:820px;margin:24px auto;display:block">
  <rect x="0" y="0" width="820" height="340" fill="#f8fafc" rx="12"/>
  <text x="410" y="32" fill="#1e293b" font-size="16" font-family="sans-serif" text-anchor="middle" font-weight="bold">Base64 Encoding: "Man" → "TWFu"</text>

  <!-- Step 1: Input bytes -->
  <text x="20" y="65" fill="#64748b" font-size="12" font-family="sans-serif">Step 1: 3 input bytes (ASCII)</text>
  <rect x="20" y="75" width="80" height="40" fill="#3b82f6" rx="5"/>
  <text x="60" y="100" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">M (77)</text>
  <rect x="105" y="75" width="80" height="40" fill="#3b82f6" rx="5"/>
  <text x="145" y="100" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">a (97)</text>
  <rect x="190" y="75" width="80" height="40" fill="#3b82f6" rx="5"/>
  <text x="230" y="100" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">n (110)</text>

  <!-- Step 2: Binary -->
  <text x="20" y="140" fill="#64748b" font-size="12" font-family="sans-serif">Step 2: Convert to 24 binary bits</text>
  <rect x="20" y="150" width="250" height="35" fill="#1e293b" rx="5"/>
  <text x="145" y="173" fill="#e2e8f0" font-size="12" font-family="monospace" text-anchor="middle">01001101 01100001 01101110</text>

  <!-- Step 3: Split into 6-bit groups -->
  <text x="20" y="210" fill="#64748b" font-size="12" font-family="sans-serif">Step 3: Split into 4 groups of 6 bits</text>
  <rect x="20" y="220" width="58" height="35" fill="#8b5cf6" rx="5"/>
  <text x="49" y="243" fill="white" font-size="11" font-family="monospace" text-anchor="middle">010011</text>
  <rect x="83" y="220" width="58" height="35" fill="#8b5cf6" rx="5"/>
  <text x="112" y="243" fill="white" font-size="11" font-family="monospace" text-anchor="middle">010110</text>
  <rect x="146" y="220" width="58" height="35" fill="#8b5cf6" rx="5"/>
  <text x="175" y="243" fill="white" font-size="11" font-family="monospace" text-anchor="middle">000101</text>
  <rect x="209" y="220" width="58" height="35" fill="#8b5cf6" rx="5"/>
  <text x="238" y="243" fill="white" font-size="11" font-family="monospace" text-anchor="middle">101110</text>

  <!-- Step 4: Map to characters -->
  <text x="20" y="280" fill="#64748b" font-size="12" font-family="sans-serif">Step 4: Map each 6-bit value to Base64 character</text>
  <rect x="20" y="290" width="58" height="35" fill="#10b981" rx="5"/>
  <text x="49" y="313" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">T</text>
  <rect x="83" y="290" width="58" height="35" fill="#10b981" rx="5"/>
  <text x="112" y="313" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">W</text>
  <rect x="146" y="290" width="58" height="35" fill="#10b981" rx="5"/>
  <text x="175" y="313" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">F</text>
  <rect x="209" y="290" width="58" height="35" fill="#10b981" rx="5"/>
  <text x="238" y="313" fill="white" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">u</text>

  <!-- Arrow -->
  <line x1="285" y1="173" x2="285" y2="237" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,3"/>
  <line x1="285" y1="258" x2="285" y2="307" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4,3"/>

  <!-- Result -->
  <text x="400" y="170" fill="#64748b" font-size="12" font-family="sans-serif">Result:</text>
  <rect x="400" y="180" width="180" height="50" fill="#059669" rx="8"/>
  <text x="490" y="212" fill="white" font-size="20" font-family="monospace" text-anchor="middle" font-weight="bold">TWFu</text>

  <text x="400" y="255" fill="#64748b" font-size="11" font-family="sans-serif">When input isn't 3 bytes exactly,</text>
  <text x="400" y="270" fill="#64748b" font-size="11" font-family="sans-serif">= padding fills the remaining space.</text>
  <text x="400" y="295" fill="#64748b" font-size="11" font-family="sans-serif">Example: "Ma" → "TWE="</text>
  <text x="400" y="310" fill="#64748b" font-size="11" font-family="sans-serif">Example: "M"  → "TQ=="</text>
</svg>

The 6-bit groups map to indices in the Base64 alphabet: 19→T, 22→W, 5→F, 46→u. The result is TWFu.

Padding with `=`

When the input length isn't a multiple of 3 bytes, Base64 adds = padding to make the output a multiple of 4 characters:

1 byte remaining → 2 Base64 characters + ==
2 bytes remaining → 3 Base64 characters + =
3 bytes remaining → 4 Base64 characters (no padding)

Some systems strip the padding. A good decoder handles both padded and unpadded input.

Why Base64 Encoding Exists

Email (MIME)

The original motivation. SMTP was designed for 7-bit ASCII text. MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode binary attachments so they can travel through email servers that only handle text. The RFC 2045 specification defines this usage.

URLs and URIs

URLs can't contain certain characters (spaces, control characters, non-ASCII). Base64 encodes binary data into URL-safe text. Standard Base64 uses + and /, which have special meanings in URLs, so URL-safe Base64 replaces them with - and _.

JSON and XML

JSON and XML are text-only formats. When you need to include binary data — an image, a file, a cryptographic signature — Base64 encodes it as a text string that fits cleanly into the JSON or XML structure. If you're working with JSON payloads, the JSON formatter helps you read and validate the structure.

JWT Tokens

JSON Web Tokens (JWT) use Base64 encoding for the header and payload sections. Each part is Base64-encoded JSON. The JWT decoder decodes these sections so you can inspect the token's claims and metadata.

The 33% Size Overhead

Base64 encoding increases data size by approximately 33%. Three bytes of input (24 bits) become four Base64 characters (32 bits) — that's 4/3 = 1.33, or 33% more.

For small payloads, this overhead is negligible. For large files, it matters:

Original Size	Base64 Size	Overhead
1 KB	~1.33 KB	333 bytes
100 KB	~133 KB	33 KB
1 MB	~1.33 MB	333 KB
100 MB	~133 MB	33 MB

This is why Base64 is used for small embedded assets (icons, tokens, small images) but not for large file transfers. For large files, direct binary transfer is more efficient.

What Base64 Is Not

Base64 is encoding, not encryption. It's fully reversible — anyone with the encoded string can decode it back to the original data. There's no key, no secret, no security. Don't use Base64 to protect sensitive data. Use it for transport and storage compatibility, then use actual encryption (AES, RSA) for confidentiality.

The Base64 converter handles both encoding and decoding in your browser — no data leaves your device, which matters when working with tokens or credentials.

Common Use Cases

Data URLs — embed small images directly in HTML/CSS as data:image/png;base64,...
API payloads — carry binary data in JSON requests and responses
Email attachments — MIME encoding for binary files
JWT tokens — Base64-encoded JSON header and payload
Basic authentication — HTTP Basic Auth sends Base64(username:password) in the Authorization header
Source maps — embedded source map data in JavaScript files
Certificate inspection — PEM-format certificates use Base64 encoding

Tips for Working with Base64

Know the alphabet — standard Base64 uses A-Za-z0-9+/, URL-safe uses A-Za-z0-9-_
Check for padding — = padding is standard but sometimes stripped; handle both
Don't confuse encoding with encryption — Base64 provides zero security
Account for the 33% overhead — plan storage and bandwidth accordingly
Use browser-based tools for sensitive data — avoid uploading tokens or credentials to server-based encoders

Base64 converter — Encode and decode Base64 in your browser
JSON formatter — Format and validate JSON payloads
JWT decoder — Decode JWT tokens (which use Base64 internally)
How to encode Base64 online — Practical guide to encoding text and files

Published: August 20, 2026
Category: Dev Tools
Reading Time: 6 minutes

Blog

What Is Base64 Encoding? A Beginner's Guide

The Problem Base64 Solves