Home / Blog / What is Base64 Encoding

What is Base64 Encoding? A Developer's Guide

Base64 is one of the most common encoding schemes on the web, and also one of the most misunderstood. Every developer has copy-pasted a cryptic string of letters and numbers into a decoder — but few know how the encoding actually works, or why it exists in the first place.

This guide breaks down what Base64 is, how it works under the hood, and where you'll encounter it in real systems. We'll also cover the URL-safe variant, base64url, and a free online Base64 encoder/decoder you can use right now.

First: Base64 Is Encoding, Not Encryption

Let's clear up the most common misconception right away. Base64 is not a security mechanism. It is a binary-to-text encoding — a way to represent arbitrary bytes (including images, files, and non-ASCII characters) using only printable ASCII text. Anyone can decode Base64 in seconds, so never use it to "hide" passwords or secrets.

If you need actual security, reach for a proper cryptographic primitive: AES for symmetric encryption, RSA or Ed25519 for asymmetric, and SHA-256 or Argon2 for hashing.

How Base64 Works

Base64 takes three bytes (24 bits) at a time and splits them into four 6-bit chunks. Each 6-bit value is used as an index into a 64-character alphabet, producing four printable ASCII characters.

The Base64 Index Table

The standard alphabet is defined in RFC 4648:

Index  Char     Index  Char     Index  Char     Index  Char
  0    A        16    Q        32    g        48    w
  1    B        17    R        33    h        49    x
  2    C        18    S        34    i        50    y
  3    D        19    T        35    j        51    z
  4    E        20    U        36    k        52    0
  5    F        21    V        37    l        53    1
  6    G        22    W        38    m        54    2
  7    H        23    X        39    n        55    3
  8    I        24    Y        40    o        56    4
  9    J        25    Z        41    p        57    5
 10    K        26    a        42    q        58    6
 11    L        27    b        43    r        59    7
 12    M        28    c        44    s        60    8
 13    N        29    d        45    t        61    9
 14    O        30    e        46    u        62    +
 15    P        31    f        47    v        63    /

A Worked Example

Let's encode the string "Hello":

  1. ASCII bytes: H=72, e=101, l=108, l=108, o=111
  2. First three bytes: 72, 101, 108 → binary 01001000 01100101 01101100
  3. Split into 6-bit groups: 010010 000110 010101 101100
  4. Decimal values: 18, 6, 21, 44
  5. Look up in table: S, G, V, s
  6. Repeat for remaining bytes. Final result: SGVsbG8=

The trailing = is padding — it signals that the input length wasn't a multiple of 3 bytes. Decoders strip it back out.

# Try it in your terminal
$ echo -n "Hello" | base64
SGVsbG8=

$ echo -n "SGVsbG8=" | base64 -d
Hello

3 Real-World Use Cases

1. MIME Email Attachments

SMTP was designed for 7-bit ASCII text. To send binary attachments (PDFs, images, executables), the MIME standard wraps them in Base64. When you receive a multipart email, the attachment chunks are Base64-encoded segments with headers like Content-Transfer-Encoding: base64.

2. Data URIs in HTML and CSS

You can embed small images directly in your stylesheet to reduce HTTP requests:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=");
}

Best for icons and small UI assets. For anything larger, regular file references are smaller and cacheable.

3. JSON Web Tokens (JWT)

JWTs use Base64URL (a URL-safe variant) for the header and payload sections of the token. The signature itself is the only part that's actually secured using HMAC or RSA.

Base64 vs Base64URL

Standard Base64 uses + and /, but those characters have special meaning in URLs and filenames. Base64URL swaps them for - and _, and omits the = padding entirely:

Standard:  SGVsbG8+IA==
Base64URL: SGVsbG8-IA

You'll encounter base64url in JWTs, OAuth tokens, AWS signatures, and any system that needs to safely transport binary data through URL paths or HTTP headers.

Encode or decode Base64 instantly — text, files, and base64url all supported, with 100% browser-side processing.

Open Base64 Tool →

How to Use the Online Base64 Tool

  1. Open devstoolbox.net/en/tools/base64.html.
  2. Paste text into the input box, or drag a file in.
  3. Click Encode to Base64 or Decode from Base64.
  4. Toggle the URL-safe option to switch to base64url.
  5. Copy or download the result.

Frequently Asked Questions

Why does Base64 make data larger?

Because every 3 bytes of input become 4 bytes of output, Base64 inflates the payload by roughly 33%. It's a trade-off: you gain text-safety and transport compatibility at the cost of size. That's fine for email and small tokens — but it's why you don't Base64-encode entire video files.

Is Base64 the same as encryption?

No. Encoding is a reversible, public transformation — the algorithm is open and well-known. Encryption requires a secret key and is designed to be computationally infeasible to reverse without it. Never treat Base64 as a security boundary.

Can Base64 encode non-ASCII text?

Yes. Modern implementations operate on raw bytes, so any Unicode string works. The text is implicitly converted to UTF-8 bytes before encoding. To decode back, you reverse the process: bytes → UTF-8 string.

What's the difference between Base64 and Base32?

Base32 uses a 32-character alphabet (typically A-Z 2-7) and groups of 5 bits. It's less space-efficient (about 60% overhead vs Base64's 33%) but easier for humans to read and copy, and it survives case-insensitive transcription. You'll see it in TOTP secrets and some legacy DNS records.

Conclusion

Base64 is a workhorse encoding scheme you'll meet constantly — in email, JWTs, data URIs, and a hundred other places. Once you understand the 3-bytes-to-4-chars principle and the difference between standard and URL-safe variants, the cryptic strings stop feeling arbitrary and start making sense.

Next time you need to debug a JWT, decode a MIME attachment, or embed a tiny icon in CSS, fire up the DevToolbox Base64 tool and skip the manual calculations.

Related Articles