🔐Encoding & Escaping
Base64 Encode & Decode
Convert text and binary data to/from Base64 encoding
Explanation
Base64 encoding converts binary data into ASCII text format, commonly used for email attachments, data URLs, and API tokens.
Examples
Encode text
Input
Hello World
Output
SGVsbG8gV29ybGQ=
Decode Base64
Input
SGVsbG8gV29ybGQ=
Output
Hello World
Data URL
Input
image data
Output
data:image/png;base64,iVBORw0KG...
Code Examples
JavaScript
// Browser - Encode to Base64
const text = 'Hello World';
const encoded = btoa(text);
console.log(encoded); // 'SGVsbG8gV29ybGQ='
// Browser - Decode from Base64
const decoded = atob('SGVsbG8gV29ybGQ=');
console.log(decoded); // 'Hello World'
// Handle Unicode characters (btoa doesn't support Unicode)
function encodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
return String.fromCharCode(parseInt(p1, 16));
}));
}
function decodeUnicode(str) {
return decodeURIComponent(Array.prototype.map.call(atob(str), c => {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
}
// Modern approach with TextEncoder/TextDecoder
function encodeBase64(str) {
const bytes = new TextEncoder().encode(str);
const binString = String.fromCodePoint(...bytes);
return btoa(binString);
}
function decodeBase64(str) {
const binString = atob(str);
const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0));
return new TextDecoder().decode(bytes);
}
// File to Base64 (data URL)
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// Usage
const file = document.querySelector('input[type="file"]').files[0];
const dataUrl = await fileToBase64(file);
// Result: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... Python
import base64
# Encode to Base64
text = "Hello World"
encoded = base64.b64encode(text.encode('utf-8'))
print(encoded.decode('utf-8')) # b'SGVsbG8gV29ybGQ='
# Decode from Base64
decoded = base64.b64decode(b'SGVsbG8gV29ybGQ=')
print(decoded.decode('utf-8')) # 'Hello World'
# URL-safe Base64 (uses - and _ instead of + and /)
encoded_url_safe = base64.urlsafe_b64encode(text.encode('utf-8'))
decoded_url_safe = base64.urlsafe_b64decode(encoded_url_safe)
# File to Base64
with open('image.png', 'rb') as f:
encoded_file = base64.b64encode(f.read())
print(f"data:image/png;base64,{encoded_file.decode('utf-8')}")Try it Now
💡 Tips
- Base64 increases data size by ~33%
- Use btoa/atob for simple ASCII text in browser
- Use TextEncoder/TextDecoder for Unicode support
- URL-safe Base64 uses - and _ instead of + and /
- Remove padding (=) for some use cases
- Data URLs embed files directly in HTML/CSS
- Common in JWT tokens and API authentication
⚠️ Common Pitfalls
- btoa() fails on Unicode characters
- Base64 is encoding, not encryption (anyone can decode)
- Larger data size (33% bigger)
- Line breaks in Base64 strings can cause issues
- Padding (=) required for proper decoding
- Not suitable for passwords or secrets