Base64 Encoding Explained: What It Is, How It Works, and When to Use It

If you've ever peeked inside a JWT token, embedded an image in CSS, or read an email's raw source, you've seen Base64. It's one of the most widely used encoding schemes in software — yet many developers treat it as a black box. This guide breaks it all down.

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It converts every 3 bytes of input into 4 characters of output, using the characters A–Z, a–z, 0–9, +, and /, with = for padding.

The key insight: Base64 is not encryption. It doesn't protect data — it makes binary data safe to transport through text-only channels like email, JSON, URLs, and HTTP headers.

How the Algorithm Works

The encoding process follows three steps:

1. Convert input to binary — Each byte of input becomes 8 bits. The string Hi becomes 01001000 01101001.
2. Split into 6-bit groups — The binary stream is divided into chunks of 6 bits: 010010 000110 1001. If the last group has fewer than 6 bits, it's padded with zeros.
3. Map to Base64 characters — Each 6-bit value (0–63) maps to a character in the Base64 alphabet. The values 18, 6, 36 map to S, G, k.

Input:    H        i
ASCII:    72       105
Binary:   01001000 01101001
6-bit:    010010   000110   1001(00)
Base64:   S        G        k=

The = at the end is padding. Since 2 bytes of input produce only 3 Base64 characters, one = is appended to reach a multiple of 4. One input byte results in two = signs; two input bytes result in one.

Size Overhead

Base64 encoding always increases size by approximately 33%. Every 3 input bytes become 4 output characters. A 1 MB file becomes ~1.33 MB when Base64-encoded. Keep this in mind when embedding large files.

Real-World Use Cases

1. Data URIs in HTML/CSS

Small images can be embedded directly in stylesheets or HTML, eliminating an HTTP request:

background-image: url(data:image/png;base64,iVBORw0KGgo...);

2. Email Attachments (MIME)

Email was designed for 7-bit ASCII text. Binary attachments — images, PDFs, zip files — are Base64-encoded so they survive transmission through SMTP servers that only handle text.

3. JSON Web Tokens (JWT)

JWTs use Base64url encoding (a URL-safe variant that replaces + with - and / with _) for the header and payload segments. This makes the token safe to pass in URLs and HTTP headers.

4. API Payloads

When an API needs to include binary data (file uploads, cryptographic signatures) in a JSON body, Base64 is the standard encoding. The Authorization: Basic header also uses Base64 to encode username:password.

5. Storing Binary in Text Formats

Configuration files (YAML, XML, JSON), database text columns, and environment variables sometimes need to hold binary data — certificates, keys, small images. Base64 makes this possible.

Base64 vs Base64url

Standard Base64 uses + and /, which are special characters in URLs. Base64url replaces them:

Standard:  +  /  =
Base64url: -  _  (padding optional)

Use Base64url whenever the encoded string will appear in URLs, filenames, or JWT tokens.

Common Pitfalls

• Treating Base64 as encryption — Anyone can decode it instantly. Never use Base64 to "hide" passwords, API keys, or secrets.
• Double encoding — Encoding an already-encoded string produces a completely different (and longer) result. Always track whether your data is raw or encoded.
• Newline characters — Some implementations insert line breaks every 76 characters (per the MIME standard). Strip them if they cause parsing issues.
• Character encoding confusion — Base64 encodes bytes, not characters. Make sure you know whether the input is UTF-8, ASCII, or another encoding before decoding.

Try It Yourself

Use the Base64 Encode & Decode tool to experiment with encoding and decoding right in your browser — no data is sent to any server.