How Base64 Encoding Works
Understanding Base64 through interactive visualization and step-by-step examples
Interactive Base64 Encoder
Why 64 Characters?
Base64 uses exactly 64 characters because 6 bits can represent 2⁶ = 64 different values (0-63).
A-Z: Values 0-25 (26 chars)
a-z: Values 26-51 (26 chars)
0-9: Values 52-61 (10 chars)
+: Value 62 (1 char)
/: Value 63 (1 char)
Total: 64 characters
Why the Size Increase?
Base64 increases data size by ~33% because it converts 3 bytes (24 bits) into 4 characters.
Original: 3 bytes = 24 bits
Base64: 4 characters = 4 × 6 bits = 24 bits
Storage: 4 characters = 4 × 8 bits = 32 bits
Efficiency: 24/32 = 75% (25% overhead)
Common Examples
Simple Text
Original:
"Hello"
Base64:
SGVsbG8=
Binary Data (Image Header)
JPEG Header Bytes:
FF D8 FF E0
Base64:
/9j/4A==
This is why your JPEG Base64 starts with "/9j/"!
Data URI Format
Complete Data URI:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...
This format tells the browser: "This is a JPEG image encoded in Base64"
The Mathematics Behind Base64
2⁸
Bytes
Each byte can hold 256 different values (0-255)
2⁶
Base64
Each Base64 character represents 64 different values (0-63)
24÷6
Conversion
24 bits (3 bytes) divided into 4 groups of 6 bits each