Base64 is one of those technologies that's everywhere once you know where to look — embedded images in emails, JWT tokens, data URIs in CSS, API authentication headers, and database binary storage. Yet most developers use it without fully understanding how it works.
This guide explains Base64 from the ground up: what it is, how it works, when to use it, and common pitfalls to avoid.
What Is Base64?
Base64 is a binary-to-text encoding scheme that represents binary data using only 64 printable ASCII characters: A-Z, a-z, 0-9, +, and /, with = used for padding.
Its primary purpose is to safely transmit binary data through channels designed for text — like email (SMTP), JSON APIs, HTML attributes, and URLs.
How Base64 Works
The encoding process is straightforward:
1. Take 3 bytes (24 bits) of input. For example, the text "Man" has byte values 77, 97, 110.
2. Split into 4 groups of 6 bits. 24 bits ÷ 6 = 4 groups. Each 6-bit group can represent values 0–63.
3. Map each 6-bit value to a character using the Base64 alphabet. "Man" becomes "TWFu".
4. Pad with = if needed. If the input isn't a multiple of 3 bytes, padding characters are added to make the output a multiple of 4 characters.
You can see this in action instantly with our Base64 Encoder — type text and watch the encoded output update in real time.
The 33% Size Overhead
Because every 3 bytes become 4 characters, Base64 encoding always produces output that's approximately 33% larger than the input. Our Base64 Encoder shows the exact overhead percentage for your specific input.
This overhead matters when embedding large files. A 100KB image becomes ~133KB when Base64-encoded. For small assets (icons under 2KB), the overhead is negligible compared to the saved HTTP request.
Common Use Cases
Data URIs in CSS and HTML
Instead of a separate HTTP request, small images can be embedded directly:
<img src="data:image/png;base64,iVBORw0KGgo..." />
Best for icons under 2KB — above that, the size overhead outweighs the saved request.
Email Attachments (MIME)
SMTP was designed for 7-bit ASCII text. Binary attachments (images, PDFs) are Base64-encoded and wrapped at 76 characters per line. Our Base64 Encoder's Line Wrap option produces MIME-compliant output.
JWT Tokens
JSON Web Tokens use Base64url encoding (URL-safe variant) for the header and payload segments. The URL-safe variant replaces + with - and / with _, and omits padding — exactly what our Base64 Encoder's URL-Safe mode produces.
API Authentication
HTTP Basic Authentication Base64-encodes the username:password combination. Note: this is encoding, not encryption — Base64 is trivially reversible, so always use HTTPS.
Binary Data in JSON
JSON doesn't natively support binary data. When APIs need to transmit files, images, or other binary content within JSON, Base64 encoding is the standard approach.
URL-Safe Base64
Standard Base64 uses + and / which have special meaning in URLs. URL-safe Base64 (also called Base64url, defined in RFC 4648) replaces these:
+ → -
/ → _
Padding (=) is typically omitted.
This variant is essential for JWT tokens, URL parameters, filenames, and any context where standard Base64 characters would cause issues. Toggle the URL-Safe option in our Base64 Encoder to see the difference.
Base64 in JavaScript
JavaScript provides built-in functions:
btoa(string) — Encodes a string to Base64.
atob(string) — Decodes Base64 to a string.
Important caveat: btoa() only handles Latin-1 characters. For Unicode text (emoji, non-Latin scripts), you need to encode to UTF-8 first — which is exactly what our Base64 Encoder handles automatically.
File to Base64
Converting files to Base64 is common for embedding in JSON payloads or storing in databases. The FileReader API's readAsDataURL() method produces a data URI with Base64 content.
Our Base64 Encoder includes a File mode — drop any file and get its Base64 representation instantly, complete with the data URI prefix.
Common Pitfalls
Base64 is NOT encryption. It's trivially reversible. Never use it to "hide" sensitive data.
Whitespace in encoded strings: MIME-wrapped Base64 contains newlines that must be stripped before decoding. Our decoder handles this automatically.
Size overhead in databases: Storing binary data as Base64 in text columns uses 33% more space than binary columns. Use binary/blob columns when possible.
Performance: For large files, Base64 encoding and the resulting string manipulation can be memory-intensive. Consider streaming approaches for files over 10MB.
Conclusion
Base64 is a simple but essential encoding that bridges the gap between binary data and text-based systems. Understanding when and how to use it — and its limitations — makes you a more effective developer. Try encoding and decoding with our Base64 Encoder to see these concepts in action.