The Complete Guide to Base64 Encoding

Base64 is one of those encoding schemes you encounter constantly in web development — in data URIs, HTTP headers, email attachments, and API authentication — yet few developers fully understand how it works or when to use it appropriately. This guide covers everything from the mathematics of Base64 to practical browser APIs.

How Base64 Works

Base64 converts binary data into a string of 64 printable ASCII characters: A–Z, a–z, 0–9, plus (+), and forward slash (/). The equals sign (=) is used for padding.

The process works in groups of 3 bytes (24 bits). Each group of 24 bits is split into four 6-bit chunks. Each 6-bit chunk maps to one of the 64 characters in the Base64 alphabet. This is why Base64 always increases data size by exactly 33%: every 3 bytes become 4 characters.

"Hi" → [72, 105] → Binary → SGk=
"Man" → [77, 97, 110] → Binary → TWFu

When Should You Use Base64?

1. Data URIs (Inline Images)

You can embed small images directly in HTML or CSS using Base64 data URIs, eliminating an HTTP request:

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

This is beneficial for small images (icons, spacers) that are critical for first render. For large images, the 33% size overhead and lack of browser caching make direct file references preferable.

2. HTTP Basic Authentication

The HTTP Basic Auth scheme encodes credentials as Base64 in the Authorization header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Important: Base64 is not encryption. Anyone who intercepts this header can instantly decode the credentials. Always use HTTPS with Basic Auth.

3. Sending Binary Data in JSON/XML

JSON and XML are text formats — they can't directly contain binary data. If you need to include file contents, image bytes, or binary blobs in a JSON payload, Base64 encoding allows you to represent binary as a text string that JSON can safely carry.

4. Email Attachments (MIME)

Email protocols (SMTP) are text-based. All email attachments — PDFs, images, documents — are Base64-encoded inside the MIME multipart message body.

Base64 in the Browser

Modern browsers provide native Base64 functions:

// Encode
const encoded = btoa("Hello, World!");
// → "SGVsbG8sIFdvcmxkIQ=="

// Decode
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
// → "Hello, World!"

Note: btoa() and atob() only work with binary strings. For Unicode text, you need to encode to UTF-8 first using TextEncoder.

→ Encode and decode Base64 instantly — right in your browser

Base64 Variants

Standard Base64 uses + and /, which are special characters in URLs. For URL-safe Base64 (used in JWT tokens and URL parameters), these are replaced with - and _:

• Standard Base64: A–Z, a–z, 0–9, +, /, = (padding)
• URL-safe Base64: A–Z, a–z, 0–9, -, _, no padding

Performance Considerations

Base64 adds 33% to your data size. For a 1MB image, that's 1.33MB. This matters when:

• Embedding images in CSS — The increased CSS file size delays rendering. Only inline images smaller than ~10KB.
• API payloads — Large Base64 payloads increase transfer time and server memory. Consider multipart form data or file upload endpoints instead.
• JWT tokens — JWTs use URL-safe Base64. Avoid putting large amounts of data in JWTs — they're sent with every request.

Base64 Is Encoding, Not Encryption

This cannot be overstated: Base64 provides zero security. It is trivially reversible. Never use Base64 to "hide" passwords, API keys, or sensitive data — it provides no confidentiality. Use proper encryption (AES, RSA) for sensitive data, and HTTPS for transport security.