How Base64 Encoding Works: Why Does the Output Grow by 33%?
WebTool Team · Published 2026-09-04 · Base64 / Encoding / Frontend
Base64 encodes arbitrary binary data into 64 printable ASCII characters: every 3 bytes (24 bits) are split into four 6-bit groups, each mapped to one character — so the encoded output is always 1/3 larger. For quick encode/decode work, try our Base64 tool, which handles non-ASCII text and the Base64URL variant.
Where the 64 characters come from
A-Z (26) + a-z (26) + 0-9 (10) + + / (2) = 64 characters — exactly what 6 bits can represent. There's also a padding character, =, which is not part of the encoding alphabet.
The encoding process (using "Man" as an example)
| Step | Content |
|---|---|
| Raw bytes | M(77) a(97) n(110) |
| Binary | 01001101 01100001 01101110 |
| Split into 6-bit groups | 010011 010110 000101 101110 |
| Decimal | 19 22 5 46 |
| Table lookup | T W F u |
When the input isn't a multiple of 3 bytes, = pads the output: one leftover byte gets ==, two leftover bytes get =.
Two frequent pitfalls
- Mojibake with non-ASCII text: Base64 encodes bytes, not characters. Convert the string to bytes with UTF-8 first, then encode — and decode back as UTF-8. This is why calling
btoa("中文")directly in JavaScript throws an error. +and/in URLs: both characters have special meanings in URLs, so contexts like JWT use the Base64URL variant —+→-,/→_, with trailing=stripped.
Common misconceptions
- Base64 is not encryption: anyone can decode it. Never use it to "protect" sensitive information.
- The size cost: embedding images as Base64 makes them 33% larger and prevents the browser from caching them separately — serve large images as standalone files instead.
Last updated: 2026-09-04