WebTool

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

  1. 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.
  2. + 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