EXPLAINER · 6 min read

BASE64 ENCODING EXPLAINED

What it is, how it works under the hood, and when you'd actually need it in real projects.

By Jobin Blancaflor·March 5, 2026·6 min read

TL;DR: Base64 converts binary data into a safe 64-character ASCII string. Use it for embedding images in HTML/CSS, passing binary data through JSON, and encoding credentials in HTTP headers. Try our free Base64 encoder/decoder — no upload, no account.

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using only 64 printable ASCII characters: A–Z, a–z, 0–9, plus + and /, with = used for padding. The name comes directly from the size of this character set.

The core problem Base64 solves is transmission safety. Many older systems and protocols — email (SMTP), XML, JSON, HTTP headers, URLs — were designed to handle text, not raw binary. If you tried to pass a raw PNG file through an email system designed for ASCII text, the binary bytes would get corrupted. Base64 sidesteps this by converting every 3 bytes of binary data into 4 printable characters.

This is a trade-off: Base64-encoded data is approximately 33% larger than the original. But it's perfectly safe to pass through any text-based system.

How Base64 Works Under the Hood

The algorithm works in three-byte chunks:

  1. Take 3 bytes of input (24 bits total)
  2. Split those 24 bits into four 6-bit groups
  3. Map each 6-bit value (0–63) to a character in the Base64 alphabet
  4. If the input isn't divisible by 3, pad the output with = characters

For example, the text Man encodes as TWFu:

M = 77  = 01001101
a = 97  = 01100001
n = 110 = 01101110

Combined: 010011010110000101101110
Split into 6-bit groups: 010011 | 010110 | 000101 | 101110
Decimal:                     19      22       5      46
Base64 alphabet:              T       W       F       u

When Should You Actually Use Base64?

Embedding Images in HTML and CSS

Instead of referencing an external image file, you can embed it directly as a data URL:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

This eliminates an HTTP request, which can be valuable for small icons and critical above-the-fold images. The rule of thumb: use inline Base64 for images under 1–2KB; use external files for anything larger (the size overhead and inability to cache become drawbacks).

Passing Binary Data in JSON or XML

JSON has no binary type. If your API needs to transfer file data, thumbnails, or cryptographic keys inside a JSON payload, Base64 is the standard approach. For example, the Google Cloud Vision API accepts images as Base64-encoded strings in the request body.

HTTP Basic Authentication

The HTTP Basic Auth header encodes credentials as Base64: Authorization: Basic dXNlcjpwYXNzd29yZA== which is just user:password encoded. Note that Base64 is not encryption — it provides no security by itself. HTTPS is what makes Basic Auth safe.

Email Attachments (MIME)

Email attachments are Base64-encoded within the MIME message body. This is transparent to users but explains why email file sizes are roughly 33% larger than the original attachment.

Base64 vs Hex Encoding

Hex encoding is another common binary-to-text scheme that uses 0–9 and a–f. Compared to Base64:

  • Size: Hex uses 2 characters per byte (100% overhead); Base64 uses ~1.33 characters per byte (33% overhead). Base64 is more compact.
  • Readability: Hex is easier to read and manually interpret. SHA-256 hashes, colour codes, and memory addresses are typically hex.
  • Use cases: Hex for checksums, hashes, cryptographic outputs, memory dumps. Base64 for file transfer, auth headers, data URLs.

URL-Safe Base64

Standard Base64 uses + and /, which have special meanings in URLs. URL-safe Base64 (RFC 4648) replaces these with - and _, and omits padding. This variant is used in JWT tokens, OAuth parameters, and anywhere Base64 data appears in URLs.

If you decode a JWT and see characters like - and _, that's URL-safe Base64, not standard Base64.

Common Mistakes

  • Treating Base64 as encryption. It's not. Anyone can decode it instantly. Never use it to "hide" sensitive data.
  • Double-encoding. Encoding an already-Base64-encoded string gives garbled output. Decode first, then re-encode if needed.
  • Ignoring padding. Missing = padding causes decoding failures in strict parsers. Some implementations are lenient; others aren't.
  • Encoding large files. The 33% size overhead and inability to stream make Base64 a poor choice for large files. Use multipart form upload instead.

How to Use Armytool's Base64 Tool

Our Base64 encoder/decoder handles both text and files, entirely in your browser:

  1. Open armytool.site and select Base64 Encode/Decode under Encode tools
  2. For text: type or paste your input, choose Encode or Decode, copy the result
  3. For files: switch to file mode, drop any file, and get a data URL or raw Base64 string
  4. For images: the output includes the full data:image/...;base64, prefix ready to paste into HTML or CSS

Nothing leaves your browser. The encoding runs using the browser's built-in btoa()/atob() functions and FileReader API.

TRY BASE64 ENCODER

Encode text, files, and images instantly. 100% local — nothing uploaded.

Open Base64 Tool →

RELATED ARTICLES