The Developer's Guide to Base64 Encoding and Decoding
What is Base64 Encoding?
Base64 is a method of converting binary data into ASCII text. It uses 64 characters (A-Z, a-z, 0-9, +, /) to represent any binary data as plain text. This is essential when you need to transmit binary data through systems designed for text — like embedding images in HTML, sending attachments via email, or storing files in JSON.
How Base64 Works
Base64 takes 3 bytes of binary data (24 bits) and splits them into 4 groups of 6 bits. Each 6-bit value maps to one of the 64 characters:
- 0-25: A-Z
- 26-51: a-z
- 52-61: 0-9
- 62: +
- 63: /
If the input isn't a multiple of 3 bytes, padding characters (=) are added at the end.
Common Use Cases
1. Embedding Images in HTML/CSS
Instead of hosting an image file, you can Base64-encode it and embed it directly:
<img src="data:image/png;base64,iVBORw0KGgo..." />
This reduces HTTP requests but increases HTML size — use it for small icons and logos.
2. HTTP Basic Authentication
When you log into a website with Basic Auth, your browser encodes username:password as Base64:
Authorization: Basic YWRtaW46cGFzc3dvcmQ=
Important: Base64 is encoding, not encryption. Anyone can decode it. Always use HTTPS with Basic Auth.
3. Storing Binary Data in JSON
JSON doesn't support binary data directly. If you need to include an image, file, or certificate in a JSON payload, Base64-encode it first.
4. Data URIs
You can encode any file as a Base64 data URI for inline display:
data:application/pdf;base64,JVBERi0xLjQK...
Base64 Encode vs Decode
| Direction | Input | Output | Example Tool |
|---|---|---|---|
| Encode | Plain text | Base64 string | Base64 Encoder |
| Decode | Base64 string | Plain text | Base64 Decoder |
Unicode Considerations
Standard btoa() and atob() functions only work with ASCII. For Unicode text (including emojis and CJK characters), you need a Unicode-safe approach:
// Encode Unicode
function toBase64(str) {
return btoa(unescape(encodeURIComponent(str)));
}
// Decode Unicode
function fromBase64(b64) {
return decodeURIComponent(escape(atob(b64)));
}
Our free Base64 encoder/decoder handles Unicode correctly out of the box.
When NOT to Use Base64
- Large files — Base64 increases file size by approximately 33%. For large files, use direct binary transfer instead.
- Encryption — Base64 is NOT encryption. Use AES, RSA, or other cryptographic algorithms for security.
- URL parameters — For URL-safe encoding, use URL encoding instead of Base64 (or use Base64URL variant).
Try It Yourself
Need to encode or decode Base64? Use our free online Base64 tool — it's fast, private, and works entirely in your browser.