Base64 Encoder/Decoder
Encode and decode text, files, and images to/from Base64 format
Drop file here or click to browse
Maximum file size: 10MB
Drop image here or click to browse
Supported: JPG, PNG, GIF, WebP, SVG
100% Secure
All processing happens locally in your browser
Lightning Fast
Instant encoding and decoding
Multiple Options
URL safe, line breaks, Data URI support
The Complete Guide to Base64 Encoding
What is Base64?
Okay, so what in the world is Base64 encoding? Ever tried to send a picture in an email and wondered how that actually works? Or seen a super long, crazy-looking string of text in a bit of code and thought, "what is that?". Chances are, you were lookin at Base64. In simple terms, Base64 is like a universal translator. It takes any kind of data you can think of—an image, a PDF, a zip file, whatever—and turns it into a plain text string. It's designed to carry data that's normally stored in a binary (computer-only) format across systems that only really trust plain old text.
How Base64 Works
This part sounds like scary computer science, but its actually not that bad. It's like a secret code with a simple rulebook. Base64 encoding works by grabbing your data in little groups of three bytes. A byte is just a group of 8 bits (1s and 0s). So it takes three of these, making a 24-bit chunk. Then, it does something clever. It takes that 24-bit chunk and chops it up into four smaller, 6-bit chunks. Each of those 6-bit chunks represents a number from 0 to 63. And each of those numbers matches up with a character from the special "Base64 Alphabet". It's just a simple lookup table. So, 3 bytes of your original file become 4 safe text characters.
Let's see it in action with the word "Hi!":
Text: "Hi!"
ASCII Numbers: 72 105 33
Binary (3 bytes of 8 bits): 01001000 01101001 00100001
Squished together (24 bits): 010010000110100100100001
Chopped into 4 groups of 6 bits: 010010 000110 100100 100001
The number for each group: 18 6 36 33
Look up in the table below...
Base64 Result: "SGkh"
The Base64 Alphabet
So what's this magic alphabet? It's just a set of 64 characters that are known to be safe. They exist in almost every character set and won't get messed up when being sent across different systems. It's made of the uppercase letters A-Z, the lowercase letters a-z, the numbers 0-9, and two special characters, '+' and '/'.
| Value | Char | Value | Char | Value | Char | Value | Char |
|---|---|---|---|---|---|---|---|
| 0 | A | 16 | Q | 32 | g | 48 | w |
| 1 | B | 17 | R | 33 | h | 49 | x |
| ... | ... | ... | ... | ... | ... | 62 | + |
| 15 | P | 31 | f | 47 | v | 63 | / |
URL Safe Base64: Ever notice how '+' and '/' can be weird in URLs? The '+' can turn into a space, and the '/' is used for paths. It's a problem. So, clever people made a "URL Safe" version of Base64. It just replaces '+' with '-' (a hyphen) and '/' with '_' (an underscore). This makes the encoded string totally safe to use in URLs and filenames without any extra encoding.
Common Use Cases
1. Email Attachments (MIME)
This is the original, classic use case. The first email systems were designed for plain text only. You couldn't send a picture of your cat. The MIME standard was invented to fix this, and it uses Base64 to turn your cat picture into a long block of text that the email server can handle. When it gets to the other side, the email client decodes it back into a picture.
2. Data URIs
This is a really cool one for web developers. Instead of linking to a small image, you can embed the image's data directly into your HTML or CSS. It saves the browser from having to make a whole separate request to the server just to get a tiny icon. The downside is it makes your HTML file bigger, so you only want to do it for small images.
<img src="data:image/png;base64,iVBORw0KGgo..." />
3. API Communication
Sometimes you need to send a file, like a profile picture, inside a JSON payload. You can't just stuff a binary file into a JSON string, it'll break. So what do you do? You Base64 encode the file, turning it into a safe string, and then put that string into your JSON. The server gets the JSON, pulls out the string, and decodes it back into the original file. Problem solved.
4. Basic Authentication
This is a simple way to protect a webpage with a password. The browser takes your username and password, joins them with a colon like "username:password", and then Base64 encodes that string. It is NOT secure because anyone can easily decode it, but it's a simple way to stop casual snooping.
Authorization: Basic dXNlcjpwYXNz
Padding in Base64
What happens if your input data isn't a perfect multiple of 3 bytes? Base64 is very neat and tidy, it needs its output to always be a multiple of 4 characters. If the original data is a little short, it adds padding characters (=) to the end to make up the difference. It's like a drill sergeant making sure all the soldiers are in perfect rows of four. The padding tells the decoder exactly when the original data stopped.
- If input length mod 3 = 1: Add "=="
- If input length mod 3 = 2: Add "="
- If input length mod 3 = 0: No padding needed
Performance Considerations
Size Increase
Base64 encoding increases data size by approximately 33% (4 characters for every 3 bytes). This is important when considering bandwidth and storage.
Security Note
Warning: Base64 is NOT encryption! It's simply a different representation of data. Never use Base64 alone for securing sensitive information.
Best Practices
- Line Breaks: Add line breaks every 76 characters for MIME compliance
- Character Set: Always specify character encoding (usually UTF-8) before encoding text
- Validation: Validate Base64 strings before decoding to avoid errors
- Memory Usage: Be mindful of memory when encoding large files in browsers
Browser Support
Modern browsers provide native Base64 support through:
// Encoding
btoa('Hello World') // "SGVsbG8gV29ybGQ="
// Decoding
atob('SGVsbG8gV29ybGQ=') // "Hello World"