๐ Contents
What Is Base64? The 30-Second Explanation
Base64 is a way to convert binary data (bytes) into text (ASCII characters). It takes any data โ an image, a PDF, a Unicode string, a cryptographic key โ and represents it using only 64 "safe" characters: A-Z, a-z, 0-9, +, and / (plus = for padding).
Why 64 characters? Because 2โถ = 64. Each Base64 character encodes exactly 6 bits of data. Three bytes (24 bits) become four Base64 characters. That's why Base64 output is always ~33% larger than the input.
The point is safety. Binary data can contain bytes that aren't valid in text-based protocols (null bytes, control characters, bytes above 127). Base64 maps everything into a universally safe character set that survives email, JSON, XML, URLs, and copy-paste intact.
How Base64 Encoding Actually Works
Let's encode the word "Man" step by step:
Step 1: Convert each character to its ASCII byte value M โ 77, a โ 97, n โ 110 Step 2: Write the 24-bit binary string (3 bytes ร 8 bits) 01001101 01100001 01101110 Step 3: Split into 6-bit groups (24 bits รท 6 = 4 groups) 010011 010110 000101 101110 Step 4: Convert each 6-bit group to decimal 010011 = 19, 010110 = 22, 000101 = 5, 101110 = 46 Step 5: Map each decimal to the Base64 alphabet Index: 0=A, 1=B, ... 25=Z, 26=a ... 51=z, 52=0 ... 61=9, 62=+, 63=/ 19=T, 22=W, 5=F, 46=u Result: "Man" โ "TWFu"
When the input isn't a multiple of 3 bytes, padding kicks in. One extra byte โ two Base64 chars + "==". Two extra bytes โ three Base64 chars + "=". The padding tells the decoder how many bytes to discard.
| Input | Binary (grouped) | Base64 Output |
|---|---|---|
| "M" (1 byte) | 010011 01[0000 000000] | TQ== |
| "Ma" (2 bytes) | 010011 010110 0001[00 000000] | TWE= |
| "Man" (3 bytes) | 010011 010110 000101 101110 | TWFu |
That's the entire algorithm. 6-bit groups, lookup table, padding for non-multiples-of-3. Simple enough to implement in 20 lines of code โ and widely implemented in every language's standard library.
When to Use Base64 (And When NOT To)
โ Good uses for Base64
- Embedding binary in text protocols โ Email attachments (MIME), JSON Web Tokens, XML payloads. Anywhere the transport expects text but you have bytes.
- Data URIs โ Embedding small images directly in HTML/CSS:
<img src="data:image/png;base64,iVBOR...">. Avoids a separate HTTP request for tiny assets. - API authentication tokens โ HTTP Basic Auth encodes
username:passwordas Base64. Note: this is NOT encryption, just encoding. - Short binary strings in URLs โ Base64URL variant replaces + with - and / with _, and drops = padding. Safe for URL query parameters.
- Storing binary in JSON โ JSON can't hold raw bytes. Base64-encode, store as string, decode on the other end.
โ Bad uses for Base64
- Encryption โ Base64 is encoding, not encryption. Zero security. Anyone can decode it. "Base64 encrypt" is a red flag phrase.
- Large files โ Encoding a 10MB file as Base64 produces a ~13.3MB text string. That 33% overhead adds up. Use binary transfer for large payloads.
- Database storage โ Storing images as Base64 in a database column is common but usually wrong. 33% larger, can't be queried, can't be displayed without decoding. Store binary blobs or use object storage.
- Compression โ Base64 makes data bigger, not smaller. If you're trying to reduce size, compress first (gzip/brotli), then Base64-encode the compressed output.
4 Places You Encounter Base64 Every Day
1. Email Attachments (MIME)
Every email attachment you've ever sent or received was Base64-encoded. SMTP was designed in 1982 for 7-bit ASCII text. Base64 converts your PDF, image, or ZIP into safe 7-bit characters that survive any email server in the world.
2. JSON Web Tokens (JWTs)
A JWT looks like eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dozjgNGl1HaS3d4-ZEJVhM6Q0m0sRgFPah28vY7Fgzg. The three dot-separated sections are Base64URL-encoded JSON (header, payload, signature). Our JWT Decoder decodes these sections so you can inspect what's inside.
3. Data URIs in CSS and HTML
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);
This embeds an SVG directly in CSS. No separate file, no HTTP request. Great for small icons and logos. Terrible for photos (huge base64 strings, defeats caching). For images, use our Image to Base64 tool.
4. HTTP Basic Authentication
Browser sends Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=. That string decodes to username:password. Again: NOT encrypted. Anyone on the network can decode it. Only use Basic Auth over HTTPS.
How to Encode/Decode Base64 Instantly
You don't need to write code for one-off Base64 tasks:
- Base64 Encoder/Decoder โ Paste text and encode/decode instantly. Handles standard Base64 and Base64URL. No account, no upload, runs in your browser.
- Command line:
echo -n "hello" | base64(Linux/macOS) or[Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))(PowerShell). - Browser console:
btoa("hello")for encoding,atob("aGVsbG8=")for decoding.
For images specifically, use our Image to Base64 tool to convert any image to a data URI you can paste directly into HTML or CSS.