What is Base64 Encoding? A Developer Guide

If you've worked with APIs, data URIs, or email attachments, you've encountered Base64 encoding. But what exactly is it, and why do we use it?

What is Base64?

Base64 is a way to represent binary data using only 64 printable ASCII characters: A-Z, a-z, 0-9, +, and /. The = character is used for padding.

Why is this useful? Many systems (email, URLs, JSON) can only handle text, not raw binary data. Base64 converts binary data into a text format that these systems can safely transmit.

How Base64 Works

Base64 converts every 3 bytes of input into 4 characters of output:

Take 3 bytes (24 bits)
Split into 4 groups of 6 bits each
Map each 6-bit value (0-63) to a Base64 character

Example: The text "Hi" becomes "SGk="

"H"   "i"
72    105    (ASCII values)
01001000 01101001 (binary, 16 bits)
010010 000110 1001XX (split into 6-bit groups, padded)
18     6      36     (decimal values)
S      G      k=     (Base64 characters, = is padding)

Common Uses for Base64

1. Data URIs

Embed small images directly in HTML or CSS without separate HTTP requests:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" />

This is a 1x1 red pixel. The entire image is embedded in the src attribute.

2. HTTP Basic Authentication

Username and password are encoded as Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
// Decodes to "username:password"

Note: Base64 is not encryption. Anyone can decode this. Always use HTTPS.

3. Email Attachments (MIME)

Email protocols only support 7-bit ASCII. Binary attachments are Base64-encoded:

Content-Type: application/pdf; name="document.pdf"
Content-Transfer-Encoding: base64

JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PAovVHlwZS...

4. JSON Payloads

JSON can't contain raw binary data. APIs often use Base64 for file uploads:

{
  "filename": "photo.jpg",
  "content": "iVBORw0KGgoAAAANSUhEUgAAA..."
}

5. JWTs (JSON Web Tokens)

JWTs use Base64URL encoding (a URL-safe variant) for the header and payload:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0.
Gfx6VO9tcxwk6xqx9yYzSfebfeakZp5JYIgP_edcw_A

Base64 vs Base64URL

Standard Base64 uses + and / which have special meanings in URLs. Base64URL replaces them:

+ becomes -
/ becomes _
Padding (=) is often omitted

Use Base64URL for anything that goes in a URL or filename.

The Size Increase

Base64 increases data size by approximately 33%. Every 3 bytes become 4 characters. A 1MB file becomes ~1.33MB when Base64-encoded.

This is why you shouldn't Base64-encode large files when binary transfer is available. Use it for small images, short strings, and situations where text-only transport is required.

Base64 in JavaScript

// Encoding
const encoded = btoa("Hello World");
// "SGVsbG8gV29ybGQ="

// Decoding
const decoded = atob("SGVsbG8gV29ybGQ=");
// "Hello World"

// For Unicode strings (btoa/atob only handle Latin1)
const encodeUnicode = (str) => btoa(encodeURIComponent(str));
const decodeUnicode = (str) => decodeURIComponent(atob(str));

Common Mistakes

Using Base64 for "security": Base64 is encoding, not encryption. It provides zero security.
Encoding large files: The 33% size overhead makes this wasteful when binary transfer is possible.
Double encoding: Encoding already-encoded data creates unnecessarily long strings.
Forgetting URL safety: Standard Base64 breaks in URLs. Use Base64URL instead.

Try It Yourself

Use our Base64 Encoder/Decoder to encode and decode strings instantly. It auto-detects whether input is encoded and handles both standard and URL-safe variants.