Base64 Encoding Explained: When and Why to Use It
What Is Base64 Encoding?
Base64 is a method of converting binary data into a text string using only 64 ASCII characters: A-Z, a-z, 0-9, +, and / (plus = for padding). It lets you safely transmit binary data through systems that only handle text — like email, HTML, JSON, URLs, and HTTP headers.
If you have ever seen a long string of letters and numbers ending in one or two equals signs, that was almost certainly Base64-encoded data.
SGVsbG8sIFdvcmxkIQ==
That decodes to: Hello, World!
How Base64 Encoding Works
The encoding process follows these steps:
Step 1: Convert to Binary
Take the input data and represent it as a sequence of bytes (8-bit binary values).
For the string “Hi”:
H= 01001000i= 01101001
Step 2: Split Into 6-Bit Groups
Combine the binary and split it into groups of 6 bits:
01001000 01101001
becomes
010010 000110 1001xx
If the last group has fewer than 6 bits, pad with zeros.
Step 3: Map to Base64 Characters
Each 6-bit group maps to one of 64 characters in the Base64 alphabet:
| Value | Char | Value | Char | Value | Char | Value | Char |
|---|---|---|---|---|---|---|---|
| 0 | A | 16 | Q | 32 | g | 48 | w |
| 1 | B | 17 | R | 33 | h | 49 | x |
| … | … | … | … | … | … | … | … |
So 010010 (18) = S, 000110 (6) = G, 100100 (36) = k.
Step 4: Add Padding
Base64 works on 3-byte (24-bit) blocks. If the input length is not a multiple of 3, the output is padded with = characters:
- 1 remaining byte: two
=padding characters - 2 remaining bytes: one
=padding character - 0 remaining bytes: no padding
“Hi” is 2 bytes, so the output gets one =: SGk=
Base64 Encoding in Code
JavaScript
// Encode
const encoded = btoa("Hello, World!");
// "SGVsbG8sIFdvcmxkIQ=="
// Decode
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");
// "Hello, World!"
Note: btoa() and atob() work with ASCII strings. For Unicode text, encode to UTF-8 first:
// Encode Unicode
const encoded = btoa(new TextEncoder().encode("Hello 🌍")
.reduce((s, b) => s + String.fromCharCode(b), ""));
Python
import base64
# Encode
encoded = base64.b64encode(b"Hello, World!").decode("utf-8")
# "SGVsbG8sIFdvcmxkIQ=="
# Decode
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==").decode("utf-8")
# "Hello, World!"
Command Line
# Encode
echo -n "Hello, World!" | base64
# SGVsbG8sIFdvcmxkIQ==
# Decode
echo "SGVsbG8sIFdvcmxkIQ==" | base64 --decode
# Hello, World!
Or use the Base64 Encoder/Decoder for quick conversions without touching your terminal.
When to Use Base64 Encoding
Embedding Images in HTML/CSS
Data URIs let you embed small images directly in HTML or CSS, eliminating an HTTP request:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />
This is useful for small icons and logos (under 5-10KB). For larger images, a separate file with proper caching is more efficient.
Sending Binary Data in JSON
JSON does not support binary data. If you need to include a file, image, or binary payload in a JSON API request, Base64 is the standard approach:
{
"filename": "report.pdf",
"content": "JVBERi0xLjQKMSAwIG9iago..."
}
Email Attachments
SMTP (email protocol) was designed for 7-bit ASCII text. Email attachments are Base64-encoded so that binary files (images, PDFs, documents) can travel through the email system without corruption.
Basic Authentication Headers
HTTP Basic Authentication encodes credentials as Base64:
Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
This is username:password encoded in Base64. Important: this is encoding, not encryption. The credentials are trivially decodable. Always use Basic Auth over HTTPS.
Storing Binary Data in Text Fields
Sometimes you need to store binary data in a database column or config file that only supports text. Base64 provides a safe text representation.
When NOT to Use Base64
As Encryption or Security
Base64 is not encryption. It provides zero security. Anyone can decode a Base64 string instantly. Never use it to “hide” passwords, tokens, or sensitive data.
For Large Files
Base64 encoding increases data size by approximately 33%. A 1MB file becomes ~1.37MB when encoded. For large files, use proper binary transfer mechanisms (multipart form uploads, binary protocols) instead of Base64 encoding.
For URLs (Use Base64url Instead)
Standard Base64 uses + and / which have special meanings in URLs. If you need Base64 in a URL, use the URL-safe variant (Base64url) which replaces + with - and / with _:
Standard: SGVsbG8+V29ybGQ/
URL-safe: SGVsbG8-V29ybGQ_
Most languages provide a URL-safe Base64 function. In Python: base64.urlsafe_b64encode(). In JavaScript, you need to replace the characters manually or use a library.
For general URL encoding needs, see the URL Encoder.
Common Pitfalls
Newlines in Encoded Output
Some Base64 implementations insert newlines every 76 characters (per the MIME standard). This can break parsers that expect a single continuous string. Strip newlines if your consumer does not expect them.
Unicode Handling
btoa() in JavaScript throws an error on non-ASCII characters. Always convert Unicode strings to UTF-8 bytes before encoding.
Double Encoding
Encoding data that is already Base64-encoded produces valid but incorrect output. If you are debugging garbled data, check whether it was accidentally encoded twice.
Padding Stripping
Some systems strip the = padding characters. This usually works because the decoder can infer padding from the string length, but it is technically non-standard and can cause issues with strict parsers.
Base64 Variants
| Variant | Alphabet | Padding | Use Case |
|---|---|---|---|
| Standard (RFC 4648) | A-Z, a-z, 0-9, +, / | = | General purpose |
| URL-safe (RFC 4648) | A-Z, a-z, 0-9, -, _ | Optional | URLs, filenames |
| MIME (RFC 2045) | Same as standard | = |
Conclusion
Base64 encoding is a fundamental tool for bridging the gap between binary data and text-based systems. Use it for embedding data in JSON, HTML, and email. Avoid it for security, large files, and situations where a binary format would be more efficient.
For quick Base64 conversions, use the Base64 Encoder/Decoder — paste your data, click encode or decode, and copy the result. It runs entirely in your browser, so your data stays private.