What is Base64 Encoding? A Complete Guide

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string format. It works by translating every three bytes of binary data into four ASCII characters from a specific 64-character alphabet. This makes it possible to safely transmit binary data through text-based channels such as email, HTML, or JSON.

The name “Base64” comes from the fact that it uses a base of 64 characters: the uppercase letters A–Z, lowercase letters a–z, digits 0–9, and the symbols + and /. The = character is used for padding when the input length is not a multiple of three bytes.

How Base64 Encoding Works

Let’s walk through a simple example. Encoding the string "Cat":

1. Convert each character to its ASCII value: C = 67, a = 97, t = 116
2. Convert to binary: 01000011 01100001 01110100
3. Split into 6-bit groups: 010000 110110 000101 110100
4. Map each 6-bit group to the Base64 alphabet: Q2F0

So "Cat" encodes to "Q2F0" in Base64.

// Encoding in JavaScript
const encoded = btoa('Cat');
console.log(encoded); // "Q2F0"

// Decoding
const decoded = atob('Q2F0');
console.log(decoded); // "Cat"

You can try this yourself with the Base64 encoder/decoder tool on CodeKit.

Common Use Cases

Base64 encoding is used in many everyday scenarios:

• Data URLs: Embedding small images or fonts directly in CSS or HTML using data:image/png;base64,...
• Email attachments: MIME encoding uses Base64 to attach binary files to email messages
• API payloads: Transmitting binary data (like images or files) in JSON requests
• Authentication: HTTP Basic Auth sends username:password as a Base64-encoded header
• JWT tokens: JSON Web Tokens use Base64URL to encode the header and payload sections

Base64 is NOT Encryption

One of the most common misconceptions is treating Base64 as a form of encryption or security. Base64 is encoding, not encryption. It provides absolutely no data protection—anyone can decode a Base64 string with a single line of code.

// "Encrypting" with Base64 is NOT secure!
const "secret" = btoa('my-password');
console.log("secret"); // "bXktcGFzc3dvcmQ="
// Anyone can decode this:
console.log(atob("bXktcGFzc3dvcmQ=")); // "my-password"

If you need to protect data, use proper encryption algorithms like AES, or use hashing for passwords. For hashing, check out the hash generator tool.

Base64URL: The Web-Safe Variant

Standard Base64 uses + and / characters, which are problematic in URLs and filenames. Base64URL is a variant designed for web use:

• Replaces + with - (hyphen)
• Replaces / with _ (underscore)
• Removes = padding (or replaces it)

// Converting standard Base64 to Base64URL
function toBase64URL(base64) {
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

// JavaScript's built-in Base64URL support (modern browsers)
const encoded = btoa('Hello, World!')
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=+$/, '');

console.log(encoded); // "SGVsbG8sIFdvcmxkIQ"

Base64URL is the standard encoding used in JWT tokens, OAuth2, and many other web protocols.

Performance Considerations

Base64 encoding increases data size by approximately 33%. A 3-byte input becomes 4 bytes of output. This overhead is acceptable for small payloads but can be significant for large files. Consider these trade-offs:

• Small icons and images: Data URLs with Base64 can reduce HTTP requests
• Large files: Base64 encoding bloats file size; prefer direct file uploads
• Network transmission: The 33% overhead adds up over many requests

Quick Reference Table

Input Size	Base64 Output Size	Overhead
1 byte	4 bytes	300%
3 bytes	4 bytes	33%
100 bytes	136 bytes	36%
1 KB	1.37 KB	37%

Conclusion

Base64 is a fundamental encoding scheme that every developer should understand. It’s essential for transmitting binary data through text-based systems, but remember—it’s never a substitute for encryption. Use it for encoding, use proper cryptography for security.

Ready to encode or decode some data? Try the Base64 tool on CodeKit—it runs entirely in your browser with no data sent to any server.