If you've ever embedded an image in a CSS file, read a JWT token, or sent a file via a REST API, you've used Base64. But what is it, why does it make data larger, and when should you use it?
The Core Problem Base64 Solves
Binary data contains every possible byte value (0–255). But many protocols — email (SMTP), HTML, XML, JSON, and older HTTP headers — were designed to carry text only. Some byte values in binary data get misinterpreted as control characters, line breaks, or encoding markers.
Base64 solves this by representing any binary data using only 64 safe characters: A–Z, a–z, 0–9, +, and /. Every system can transmit and store these without corruption.
How Base64 Works
Base64 takes 3 bytes of input and produces 4 characters of output. This is because:
- 3 bytes = 24 bits
- 24 bits split into 4 groups of 6 bits each
- Each 6-bit group maps to one of 64 characters (2⁶ = 64)
That 3→4 ratio is where the 33% size increase comes from. Every 3 bytes becomes 4 characters, so:
3 bytes input → 4 chars output
100 KB file → ~133 KB encoded
1 MB image → ~1.33 MB as Base64
The Padding Signs (= and ==)
If the input isn't a multiple of 3 bytes, Base64 adds padding:
- One
=means the last group had 2 bytes - Two
==means the last group had 1 byte
"hello" (5 bytes) → aGVsbG8= (one padding char)
"hi" (2 bytes) → aGk= (two padding chars? no, one)
"a" (1 byte) → YQ== (two padding chars)
Most decoders handle missing padding gracefully. But if you see a Incorrect padding error in Python, add == to the end before decoding.
Common Uses
1. Data URIs in HTML and CSS
Embed images directly in HTML without extra HTTP requests:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">
.icon {
background-image: url('data:image/svg+xml;base64,PHN2Zy...');
}
Good for small icons; avoid for large images (adds page weight and can't be cached separately).
2. JWT Tokens
JWT tokens are three Base64URL-encoded segments separated by dots:
eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMTIzIn0.SflKxwRJSM...
Decode the first two segments to read the header and payload — the last segment is a signature, not Base64-encoded content you should modify.
3. HTTP Basic Auth
Authorization: Basic dXNlcjpwYXNzd29yZA==
This is Base64(username:password). It's not encryption — anyone can decode it. Always use HTTPS.
4. Email Attachments (MIME)
Email protocols are text-only. MIME encodes binary attachments as Base64 and embeds them in the email body. This is why a 1 MB PDF attachment adds ~1.33 MB to the email size.
Base64 vs URL-Safe Base64
Standard Base64 uses + and /, which are reserved characters in URLs. URL-safe Base64 replaces them:
-
+→- -
/→_ - Padding
=is often omitted entirely
Use URL-safe Base64 when embedding encoded data in URL parameters. JWT tokens use URL-safe Base64.
Quick Reference by Language
JavaScript (browser)
// Encode
btoa("hello world") // "aGVsbG8gd29ybGQ="
// Decode
atob("aGVsbG8gd29ybGQ=") // "hello world"
// URL-safe (no built-in, add manually)
btoa(str).replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'')
Python
import base64
# Standard
base64.b64encode(b"hello world").decode() # "aGVsbG8gd29ybGQ="
base64.b64decode("aGVsbG8gd29ybGQ=") # b"hello world"
# URL-safe
base64.urlsafe_b64encode(b"hello world")
base64.urlsafe_b64decode("aGVsbG8gd29ybGQ=")
Java
import java.util.Base64;
import java.nio.charset.StandardCharsets;
// Encode
String encoded = Base64.getEncoder()
.encodeToString("hello".getBytes(StandardCharsets.UTF_8));
// Decode
byte[] decoded = Base64.getDecoder().decode(encoded);
String result = new String(decoded, StandardCharsets.UTF_8);
// URL-safe
Base64.getUrlEncoder().encodeToString(...)
Command line
# Encode
echo -n "hello" | base64 # aGVsbG8=
# Decode
echo "aGVsbG8=" | base64 -d # hello
# Encode a file
base64 image.png > image.txt
# Decode a file
base64 -d image.txt > image_decoded.png
What Base64 Is NOT
- Not compression — it makes data ~33% larger
- Not encryption — anyone can decode it
- Not hashing — it's reversible; SHA/MD5 are not
When NOT to Use Base64
Don't encode large binary files and embed them in JSON if you can serve them as file downloads. The size increase and the inability to cache encoded content separately makes Base64 a poor choice for images over 10–20 KB in production.
For quick encode/decode in the browser — including URL-safe mode and batch mode — try the Base64 Encoder & Decoder on SnappyTools. No signup, runs entirely in your browser, no data sent anywhere.
Top comments (0)