Base64 Encoding: What It Is, When to Use It, and When Not To

Base64 encoding converts binary data into a string of ASCII characters. It's everywhere in web development — but also frequently misused. Here's a practical guide.

What Base64 Actually Does

Base64 represents binary data using only 64 safe ASCII characters: A-Z, a-z, 0-9, +, /. Every 3 bytes of input become 4 characters of output. That's a 33% size increase — a real cost you should justify before encoding.

The output of encoding hello looks like this:

Input:  h    e    l    l    o
ASCII:  104  101  108  108  111
Base64: aGVsbG8=

The = padding means the input wasn't divisible by 3.

When to Use Base64

Embedding images in HTML or CSS:

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

Small icons and favicons are good candidates. A 2 KB icon becomes ~2.7 KB as Base64, but you save an HTTP request.

JWT (JSON Web Tokens):
JWTs use Base64URL (a variant that replaces + with - and / with _ for URL safety). The header and payload are Base64URL-encoded JSON objects. Not encrypted — just encoded.

HTTP Basic Authentication:

Authorization: Basic dXNlcjpwYXNz

That's user:pass encoded as Base64. Not secure without HTTPS — it's trivially decoded.

Email attachments (MIME encoding):
Email protocols are text-based. File attachments are Base64-encoded so binary content can travel as text through mail servers.

API payloads:
When an API needs to accept binary data (images, PDFs) in a JSON body, Base64 is the standard format.

When NOT to Use Base64

Don't use Base64 for security or encryption. It's not encryption — anyone can decode it. atob('aGVsbG8=') returns hello in one line of JavaScript.

Don't Base64 encode large files in HTML. A 100 KB image becomes 137 KB as Base64 and increases HTML parse time. Use external image files for anything larger than ~5 KB.

Don't use it to "hide" sensitive values. API keys, passwords, or tokens encoded as Base64 are still plaintext. Use real encryption or environment variables.

Base64 Size Overhead Reference

Original	Encoded	Increase
1 KB	~1.37 KB	+37%
10 KB	~13.7 KB	+37%
100 KB	~137 KB	+37%
1 MB	~1.37 MB	+37%

The increase is always ~37% regardless of file type.

Quick Code Examples

JavaScript (browser):

btoa('hello')        // encode: "aGVsbG8="
atob('aGVsbG8=')     // decode: "hello"

JavaScript (Node.js):

Buffer.from('hello').toString('base64')         // encode
Buffer.from('aGVsbG8=', 'base64').toString()    // decode

Python:

import base64
base64.b64encode(b'hello')        # encode: b'aGVsbG8='
base64.b64decode('aGVsbG8=')      # decode: b'hello'

Linux terminal:

echo -n "hello" | base64          # encode
echo "aGVsbG8=" | base64 -d       # decode

Quick Encoding Without Code

For one-off encoding and decoding — pasting a JWT payload, encoding a test image, or checking what a Base64 string contains — a browser-based Base64 encoder/decoder is the fastest path. Paste in, click the button, done. Nothing leaves your browser.