Base64 Encoding Explained

Base64 appears in so many places in web development that it's easy to assume everyone knows what it is. But its purpose is often misunderstood: Base64 is not encryption, not compression, and not a security measure. It's a way to represent binary data using only printable text characters.

Why Base64 Exists

Some data transport systems were designed for plain text. Early email systems, for example, could only handle 7-bit ASCII characters. Sending a binary file (like an image or PDF) over these systems would corrupt the data because certain byte values collide with control characters.

Base64 solves this by converting any binary data into a string made of only 64 safe characters: A-Z, a-z, 0-9, +, /, and = (for padding). These characters exist safely in every text encoding.

How Base64 Encoding Works

Base64 works in groups of 3 bytes (24 bits), converting each group into 4 characters.

Step-by-step example

Take the string "Man":

Character	M	a	n
ASCII code	77	97	110
Binary	01001101	01100001	01101110

Concatenate the 24 bits: 010011010110000101101110

Split into 4 groups of 6 bits: 010011 010110 000101 101110

Convert each 6-bit group to decimal: 19, 22, 5, 46

Look up in the Base64 alphabet: T, W, F, u

Result: TWFu

Padding

If the input length isn't divisible by 3, = characters are added: - 1 remaining byte → 2 Base64 chars + == - 2 remaining bytes → 3 Base64 chars + =

Base64 Size Overhead

Base64 encoding increases data size by approximately 33%: - 3 bytes of input → 4 bytes of Base64 - 1 MB binary file → ~1.37 MB Base64 string

This overhead is why you wouldn't use Base64 for large file transfers if a binary channel is available.

Common Uses of Base64

1. Data URLs (inline images in HTML/CSS)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==">

Embeds a tiny image directly in HTML without an HTTP request. Useful for icons, placeholders, and email templates where external images may be blocked.

2. JSON Web Tokens (JWT)

A JWT has three Base64URL-encoded sections separated by dots:

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMTIzIn0.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

The first two sections (header and payload) are Base64URL-encoded JSON, meaning anyone can decode and read them. This is a common misconception: JWTs are not encrypted by default. The signature section (third part) verifies integrity, but the claims are readable without any key.

# Decode a JWT payload in bash
echo "eyJzdWIiOiJ1c2VyMTIzIn0" | base64 -d
# {"sub":"user123"}

3. API authentication headers

HTTP Basic Auth encodes credentials as Base64:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Decoded: user:password

Again — this is not secure on its own. Base64 is trivially reversible. Basic Auth only makes sense over HTTPS.

4. Email attachments (MIME)

The MIME standard uses Base64 to encode binary attachments in emails, allowing them to travel through text-only mail servers.

5. Storing binary data in JSON

JSON doesn't support binary natively. Certificates, cryptographic keys, and image thumbnails are often Base64-encoded when stored in JSON documents or databases.

Base64 vs. Base64URL

Standard Base64 uses + and / and =. These characters have special meaning in URLs: - + means space - / separates path segments - = is used in query strings

Base64URL replaces these with URL-safe alternatives: - + → - - / → _ - Padding = is omitted

JWTs use Base64URL. When encoding data for use in URLs or filenames, use Base64URL.

Encoding vs. Encrypting

This is the most important point in this entire guide:

Property	Base64	Encryption
Reversible without key?	Yes	No
Purpose	Data format compatibility	Data confidentiality
Hides content?	No	Yes
Used for security?	Never alone	Yes

Never use Base64 to "hide" a password, API key, or sensitive value. It provides zero security — any developer who sees it can decode it in seconds.

Decoding Base64 in Common Languages

# Python
import base64
decoded = base64.b64decode("SGVsbG8gV29ybGQ=").decode("utf-8")
# "Hello World"

// JavaScript (browser)
atob("SGVsbG8gV29ybGQ=")
// "Hello World"

// Node.js
Buffer.from("SGVsbG8gV29ybGQ=", "base64").toString("utf-8")

# Bash
echo "SGVsbG8gV29ybGQ=" | base64 -d
# Hello World

// Go
import "encoding/base64"
decoded, _ := base64.StdEncoding.DecodeString("SGVsbG8gV29ybGQ=")

Quick Reference

Task	Action
Binary → text transport	Encode with Base64
JWT payload inspection	Base64URL decode the middle section
Inline image in HTML	data:image/png;base64,<encoded>
URL-safe encoding	Use Base64URL (not standard Base64)
Hiding sensitive data	Don't use Base64 — use real encryption

---

Encode or decode Base64 instantly: Base64 Encoder/Decoder →