What is Base64 encoding? (with real-world examples)

If you have ever inspected an HTTP request, embedded an image directly in a CSS file, or decoded a JWT, you have seen Base64. It is one of those building blocks of modern software that seems mysterious until you understand it, at which point it becomes obvious why it exists. This article explains what Base64 is, what it is for, when to use it, when not to use it, and the surprisingly common mistakes people make with it.

The two-sentence summary

Base64 is a way to represent binary data using only 64 ASCII characters: A to Z, a to z, 0 to 9, plus, slash, and equals sign for padding. Its sole purpose is to let arbitrary bytes travel safely through systems that were designed for text only, like email, URLs, JSON, and source code.

Why Base64 exists

In the early days of computer networks, many systems could only handle 7-bit ASCII text. SMTP (the email protocol) is the classic example: it was designed for text messages, not for attachments. So when you wanted to send a binary file (a Word document, an image, a zipped folder) through email, the file first had to be turned into text that the email server would not corrupt. Base64 was the solution.

The same need came up in many other places: HTML attribute values, JSON strings, query parameters in URLs, configuration files, source code constants. Anywhere you need to fit binary data inside a structure designed for text, Base64 (or a similar encoding) is what you reach for.

How it works under the hood

The math is simple. Base64 takes 3 bytes of input (24 bits) and encodes them as 4 ASCII characters (each carrying 6 bits of information). Why 6? Because 2 to the power of 6 equals 64, and we have a 64-character alphabet to choose from.

Specifically, every Base64 character represents a 6-bit value. 24 bits of input divides cleanly into 4 chunks of 6 bits. Each chunk is looked up in the Base64 alphabet to produce the output. The alphabet looks like this:

• 0 to 25: capital A through Z
• 26 to 51: lowercase a through z
• 52 to 61: digits 0 through 9
• 62: plus sign
• 63: slash

Padding

What if your input is not a multiple of 3 bytes? Base64 pads the output with one or two equals signs to make the total length a multiple of 4. This way, decoders always know exactly how many bytes to extract.

The size cost

Base64 always produces output that is roughly 33 percent larger than the input, because you spend 4 characters (4 bytes in ASCII) to represent 3 bytes of original data. This overhead is the price of being safe to embed in text-only contexts.

Common uses

Data URIs in CSS and HTML

You can embed a small image directly in a stylesheet without a separate HTTP request:

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

This is great for tiny icons or backgrounds where the overhead of an HTTP request would be larger than the file itself. Avoid it for anything over a few kilobytes since the 33 percent size bloat plus the lack of caching outweighs the saved request.

Email attachments

Every email attachment you have ever sent or received was Base64-encoded inside the email body. The MIME standard that governs email attachments specifies Base64 as one of its encodings.

JWT tokens

JSON Web Tokens used in authentication consist of three parts separated by dots: header, payload, and signature. Each part is Base64URL-encoded (a URL-safe variant of Base64). When you log into a service and look at your auth token, you can decode the header and payload to see what they contain.

JSON binary fields

JSON has no native binary type. If you need to send a small binary blob inside a JSON payload (a thumbnail, a signature, encrypted data), encoding it as a Base64 string is the standard solution.

Storing files in databases

Some legacy systems store small binary files as Base64 text columns instead of using a proper BLOB type. This is wasteful in storage but simple to query. It is rarely a good idea but you will see it in older codebases.

Base64URL: the URL-safe variant

Standard Base64 uses plus and slash as part of its alphabet, which causes problems in URLs (slash is a path separator, plus sometimes means space). Base64URL is a small variant that replaces plus with hyphen, slash with underscore, and removes the equals sign padding. JWT tokens use this variant. When you see a long string of letters, digits, hyphens, and underscores with no padding, that is Base64URL.

Things people get wrong about Base64

Putting credentials in Base64

HTTP Basic Authentication sends usernames and passwords as Base64 over the network. This is fine over HTTPS (where the whole connection is encrypted) but catastrophic over plain HTTP. Base64 is not protecting anything, it is just a transport format.

Using Base64 to compress

Base64 always makes data 33 percent larger, never smaller. If size is your concern, compress first (gzip, brotli) and then Base64 if you also need text safety.

Inflating database tables

Storing image binaries as Base64 strings in a database makes rows 33 percent larger, breaks streaming, and makes queries slower. Use proper BLOB columns or store files in object storage and reference them by URL.

Mixing UTF-8 and bytes

Base64 operates on bytes, not text. If you want to encode text that includes characters outside ASCII (Hindi, Chinese, emoji), you first convert the text to UTF-8 bytes, then Base64-encode those bytes. Doing it directly without specifying an encoding works in JavaScript but breaks for non-Latin text.

Decoding Base64 manually (for fun)

Take the Base64 string SGVsbG8=. Each of the first four characters maps to a 6-bit value:

• S = 18 = 010010
• G = 6 = 000110
• V = 21 = 010101
• s = 44 = 101100

Concatenated: 010010 000110 010101 101100. Re-grouped into 8-bit bytes: 01001000 01100101 01101100. Those bytes in ASCII are H, e, l. The trailing equals sign is just padding to make the input length divisible by 4. The full string decodes to “Hello”.

Try it yourself

Encoding and decoding Base64 by hand is educational once. After that, use a tool. ToolHub Base64 Encoder runs entirely in your browser, handles UTF-8 properly, and works with any text including emoji and non-Latin scripts.

Summary

Base64 turns bytes into text using a 64-character alphabet. It is for transport safety, not security. Output is 33 percent larger than input. URL-safe variants exist for use in URLs. Email, JWTs, and data URIs all rely on it. Avoid it as a fake security layer or as a database storage strategy. Beyond that, it is one of those quiet, useful tools that holds up the modern web.