Shaishav Patel

Posted on Apr 16

What Is Base64 and When Should You Use It? (With Examples)

#javascript #security #tutorial #webdev

You've seen it in JWT tokens, Basic Auth headers, email attachments, and data URLs. It looks like random gibberish — SGVsbG8gV29ybGQ= — but it's not random at all.

Base64 is one of those encoding schemes developers encounter constantly but rarely stop to understand properly. Here's what it actually is, why it exists, and when to use it.

Quick reference: Base64 Encoder / Decoder — Free, No Upload

What Is Base64?

Base64 is an encoding scheme that converts binary data into a string of printable ASCII characters.

It uses 64 characters: A–Z, a–z, 0–9, +, and / (plus = for padding). Every 3 bytes of binary input become 4 Base64 characters. That's why Base64-encoded output is always about 33% larger than the original.

"Hello" → SGVsbG8=
"Hello World" → SGVsbG8gV29ybGQ=

The = at the end is padding — added to make the output length a multiple of 4.

Why Does Base64 Exist?

Binary data contains bytes in the range 0–255. Many systems — email protocols, HTTP headers, JSON, XML, URLs — were designed to handle text, not arbitrary binary. Sending raw binary through these channels causes corruption: null bytes get stripped, control characters break parsing, and non-ASCII bytes get mangled.

Base64 solves this by converting binary into a safe ASCII representation that any text-based system can transmit without modification.

When to Use Base64

1. Basic Authentication Headers

HTTP Basic Auth encodes credentials as username:password in Base64:

Authorization: Basic dXNlcjpwYXNzd29yZA==

Decode that and you get user:password. Base64 is not encryption — it's just encoding. Basic Auth requires HTTPS to be secure.

2. Decoding JWT Tokens

A JWT (JSON Web Token) has three parts separated by dots: header.payload.signature. The header and payload are Base64URL-encoded (a variant that uses - and _ instead of + and /).

Paste the middle section into a Base64 decoder and you get the raw JSON claims:

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

This is useful for debugging auth flows without a dedicated JWT tool.

3. Embedding Images in CSS or HTML

Instead of a separate HTTP request for a small icon or background, embed it directly as a data URL:

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

The browser decodes it inline. Useful for critical-path images where you want to eliminate a request, or for embedding icons in CSS without an external file.

4. Sending Binary Data in JSON

JSON is text-only. If your API needs to send or receive binary data — a file, an image, a PDF — inside a JSON payload, Base64 is the standard approach:

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQK..."
}

5. Email Attachments (MIME)

Email uses MIME encoding to attach files. Open a raw email source and you'll find file attachments encoded as Base64 blocks. This is how binary files travel through a text-based email protocol that's been around since the 1970s.

6. Encoding Query Parameters

Base64 is sometimes used to encode complex data for URL parameters, though URL encoding is more common for simple cases. Base64URL (the -/_ variant) is specifically designed for this.

Base64 vs Base64URL

Standard Base64 uses + and /, which have special meaning in URLs. Base64URL substitutes:

+ → -
/ → _
Strips trailing = padding

You'll see Base64URL in JWTs, OAuth tokens, and any context where the encoded string appears in a URL.

What Base64 Is NOT

Not encryption. Anyone can decode Base64 in one step. It provides zero security. Never use it to "hide" sensitive data.

Not compression. It makes output 33% larger than the input. It's purely for compatibility, not size reduction.

Not hashing. Base64 is fully reversible. Hashing is one-way. If you need to hash something, use SHA-256.

Encode and Decode in JavaScript

// Encode
btoa("Hello World")      // → "SGVsbG8gV29ybGQ="

// Decode
atob("SGVsbG8gV29ybGQ=") // → "Hello World"

btoa and atob are built into every browser and Node.js. For binary data (files, buffers), use Buffer in Node.js:

// Node.js — encode a buffer
Buffer.from(data).toString('base64')

// Node.js — decode back to buffer
Buffer.from(encoded, 'base64')

Quick Reference: Encode and Decode Online

Need to encode or decode a string right now — paste it in: Base64 Encoder / Decoder

Supports text input, file-to-Base64 conversion, and decoding Base64 back to a downloadable binary file. All processing runs in your browser — no data leaves your device.

Summary

Use case	Base64?
HTTP Basic Auth headers	Yes
JWT token inspection	Yes (decode the payload)
Embedding images in CSS/HTML	Yes
Binary data in JSON payloads	Yes
Email attachments (MIME)	Yes
Hiding sensitive data	No — use encryption
Reducing file size	No — use compression
One-way fingerprinting	No — use SHA-256

When you see a long string of letters, numbers, and = signs — it's probably Base64. Paste it in a decoder and find out.

DEV Community