Base64 Encoder/Decoder
Encode text to Base64 or decode Base64 back to text. Supports UTF-8 characters.
// Encodeconst encoded = btoa('Hello, World!');// Decodeconst decoded = atob(encoded);// For UTF-8 stringsconst encodeUtf8 = (str) =>btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,(_, p1) => String.fromCharCode('0x' + p1)));
You May Also Like
What is Base64?
Base64 is an encoding scheme that converts binary data into a text format using 64 printable ASCII characters.
Why is this useful? Many systems (email, URLs, JSON) can only handle text. Base64 lets you embed binary data (images, files) as text.
The 64 characters used: A-Z, a-z, 0-9, +, / (and = for padding)
How Base64 Works
Base64 takes 3 bytes (24 bits) and converts them to 4 characters (6 bits each):
Original: "Hi"
Binary: 01001000 01101001
Base64: SGk=
Size Impact: Base64 increases size by ~33% (3 bytes โ 4 characters)
The = padding at the end indicates the original data wasn't a multiple of 3 bytes.
Common Use Cases
๐ง Email Attachments MIME encoding uses Base64 to embed files in emails.
๐ผ๏ธ Data URLs Embed images directly in HTML/CSS:
data:image/png;base64,iVBORw0KGgo...
๐ Basic Authentication HTTP Basic Auth encodes credentials as Base64:
Authorization: Basic dXNlcjpwYXNz
๐ JSON Payloads Store binary data in JSON fields.
Base64 is encoding, not encryption! Anyone can decode it. Never use Base64 alone for sensitive data.
Base64 Variants
| Variant | Characters | Use Case |
|---|---|---|
| Standard | +, / | Email, most applications |
| URL-safe | -, _ | URLs, filenames |
URL-safe Base64 replaces + with - and / with _ to avoid URL encoding issues.
Base64 Tips
1. Mind the Size Increase Don't Base64 encode large files for web transfer โ use proper file uploads.
2. Decode with Care Invalid Base64 strings will fail to decode. Always handle errors.
3. UTF-8 First When encoding text, convert to UTF-8 first to handle special characters correctly.