楊東霖

Posted on Mar 25 • Originally published at devplaybook.cc

Base64 Encoding and Decoding Explained for Developers

#webdev #programming #productivity #devtools

Base64 shows up everywhere in software development — in authentication headers, image embedding, email attachments, JWT tokens, and data URLs. Most developers learn to recognize it without fully understanding what it is or why it exists.

This guide explains Base64 encoding from first principles: why it was invented, exactly how it works, when you should use it (and when you shouldn't), and how to encode or decode Base64 instantly online.

What Is Base64?

Base64 is a binary-to-text encoding scheme. It converts arbitrary binary data into a string made up of 64 printable ASCII characters: A-Z, a-z, 0-9, +, and /. A = character is used for padding.

The core reason it exists: not all systems can safely transmit arbitrary binary bytes. Email protocols, URLs, HTML attributes, and many older network protocols were designed to handle text — specifically printable ASCII characters. Raw binary data, which can contain control characters, null bytes, and other non-printable values, can corrupt or break these systems.

Base64 transforms any binary data into a safe, transmittable string.

How Base64 Encoding Works

Here's the step-by-step process:

Step 1: Convert input to bytes

Start with your input data as raw bytes. For text, this means the bytes of the UTF-8 (or ASCII) encoding.

For the string "Man":

M = 77 = 01001101
a = 97 = 01100001
n = 110 = 01101110

Total: 010011010110000101101110

Step 2: Split into 6-bit groups

Take those 24 bits and split into four 6-bit groups:

010011 = 19
010110 = 22
000101 = 5
101110 = 46

Step 3: Map each group to the Base64 alphabet

The Base64 alphabet maps 0–63 to characters:

0–25: A–Z
26–51: a–z
52–61: 0–9
62: +
63: /

So our four values (19, 22, 5, 46) become: T, W, F, u

"Man" encodes to "TWFu"

Padding

Base64 works on 3-byte groups. If your input isn't divisible by 3:

1 extra byte → 2 Base64 characters + ==
2 extra bytes → 3 Base64 characters + =

Example: "Ma" (2 bytes) → "TWE="

Base64 Character Set

The standard Base64 alphabet:

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

With = used for padding at the end.

URL-Safe Base64

Standard Base64 uses + and /, which are special characters in URLs. URL-safe Base64 replaces them:

+ → -
/ → _

URL-safe Base64 is used in JWT tokens, OAuth flows, and anywhere encoded data appears in a URL.

Common Uses of Base64

1. Data URLs (Embedding Images in HTML/CSS)

Instead of linking to an image file, you can embed the image directly in HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQAABjE+ibYAAAAASUVORK5CYII=" alt="1x1 pixel" />

The base64, prefix tells the browser what follows is Base64-encoded binary. This eliminates an HTTP request for small assets but increases HTML size by ~33%.

2. HTTP Basic Authentication

HTTP Basic Auth sends credentials as username:password encoded in Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Decoding dXNlcm5hbWU6cGFzc3dvcmQ= gives username:password.

Important: This is encoding, not encryption. Base64 is trivially reversible. Always use HTTPS with Basic Auth — otherwise anyone intercepting the request can decode your credentials immediately.

3. JWT Tokens

JSON Web Tokens consist of three Base64URL-encoded parts separated by dots:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkFsaWNlIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Each part (header.payload.signature) is individually Base64URL encoded. You can decode the header and payload to read the token's contents. Use the JWT Decoder to inspect tokens visually.

4. Email Attachments (MIME)

Email protocols (SMTP) were designed for ASCII text. Binary attachments like PDFs or images get Base64-encoded inside MIME messages. When your email client shows you a PDF attachment, it decoded Base64 behind the scenes.

5. Storing Binary Data in JSON

JSON has no binary type. If you need to include binary data (an image, a PDF, a file) inside a JSON payload, Base64 encoding is the standard approach:

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMy...",
  "encoding": "base64"
}

6. Cryptographic Hashes and Keys

Public keys, certificates, and hashes are often represented as Base64 strings for readability and safe transmission. PEM-encoded certificates are Base64-wrapped binary DER data:

-----BEGIN CERTIFICATE-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA...
-----END CERTIFICATE-----

How to Encode and Decode Base64 Online

For quick encoding and decoding, use the Base64 Encoder/Decoder on DevPlaybook. Paste any text or binary string, encode or decode instantly, no installation required.

Base64 in Code

JavaScript

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

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

Caveat: btoa() and atob() only handle ASCII/Latin-1. For Unicode strings:

// Encode Unicode
const encoded = btoa(unescape(encodeURIComponent("Hello 🌍")));

// Decode Unicode
const decoded = decodeURIComponent(escape(atob(encoded)));

Or in Node.js (more reliable):

// Encode
Buffer.from("Hello, World!").toString("base64");
// Decode
Buffer.from("SGVsbG8sIFdvcmxkIQ==", "base64").toString("utf-8");

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!

# URL-safe variant
url_encoded = base64.urlsafe_b64encode(b"Hello, World!").decode("utf-8")

Bash/Shell

# Encode
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==

# Decode
echo "SGVsbG8sIFdvcmxkIQ==" | base64 --decode
# Hello, World!

Note: On macOS, the flag is -D instead of --decode.

Go

import "encoding/base64"

// Encode
encoded := base64.StdEncoding.EncodeToString([]byte("Hello, World!"))

// Decode
decoded, err := base64.StdEncoding.DecodeString("SGVsbG8sIFdvcmxkIQ==")

Common Mistakes and Pitfalls

Treating Base64 as Encryption

Base64 is encoding, not encryption. Anyone can decode it instantly. Never use Base64 to "protect" sensitive data — use proper encryption (AES, RSA) for that.

Ignoring Padding Issues

Some systems strip trailing = padding. If you're storing or transmitting Base64 without padding and then trying to decode it, you'll get errors. Always preserve padding or use a decoder that accepts unpadded input.

Using Standard Base64 in URLs

Standard Base64 contains + and /. In a URL:

+ is interpreted as a space
/ is a path separator

Always use URL-safe Base64 (- and _ variants) when encoding values that will appear in URLs.

Encoding Already-Encoded Data

If you Base64-encode a string that's already Base64-encoded, you get double-encoded output. When decoding, you need to decode twice. This usually happens by accident when working with nested APIs or proxies.

Whitespace in Base64 Strings

Some systems insert newlines every 76 characters in Base64 output (per MIME spec). If you're parsing Base64 that may have been generated by different tools, strip whitespace before decoding:

import re
clean = re.sub(r'\s+', '', base64_string)

Base64 vs. Hex Encoding

Both Base64 and hex (hexadecimal) are ways to represent binary data as text:

Property	Base64	Hex
Characters	64 (A-Z, a-z, 0-9, +, /)	16 (0-9, a-f)
Size overhead	~33%	~100%
Readability	Not human-readable	Slightly more readable for small data
Common use	Files, JWTs, data URLs	Hash digests, byte inspection

Base64 is more compact. Hex is often used for cryptographic hashes and when displaying raw bytes for debugging.

Base64 Size Calculation

A common question: how much does Base64 encoding increase file size?

Formula: encoded_size = ceil(original_bytes / 3) * 4

Or roughly: Base64 output is approximately 33% larger than the input.

Examples:

100 bytes → ~136 Base64 characters
1 KB (1024 bytes) → ~1.37 KB
1 MB → ~1.37 MB
10 MB → ~13.7 MB

For large files, this overhead is significant. Base64 is not suitable for transmitting large binary files in APIs — use multipart form data or direct file uploads instead.

Quick Reference

Task	Tool
Encode/decode text as Base64	Base64 Encoder/Decoder
Decode a JWT token	JWT Decoder
Encode an image as Base64 data URL	Image to Base64
Generate a hash	Hash Generator

Summary

Base64 encoding:

Converts binary data to a 64-character ASCII alphabet
Increases size by ~33%
Is encoding, not encryption — it's trivially reversible
Used in HTTP auth headers, JWT tokens, data URLs, email attachments, and JSON payloads
Has a URL-safe variant that replaces +// with -/_

When you encounter a string that looks like random ASCII with = at the end, it's almost certainly Base64. Decode it with the Base64 Decoder to see what's inside.

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

DEV Community