What is Base64 Encoding? How it Works and Why We Use It

If you have ever looked at the source code of an email, inspected a JSON Web Token (JWT), or looked at an HTML file where an image was embedded directly into the code instead of linked via a URL, you have likely seen a massive block of text that looks like this:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=

This random-looking string of letters, numbers, and equals signs is not encrypted data, nor is it corrupted text. It is Base64 Encoding.

Base64 is an incredibly common mechanism used in computer science to translate binary data (like images, audio files, or compiled programs) into a safe, plain-text format. But why do we need to do this? Why can't computers just send files directly to each other without translating them into text first?

In this comprehensive guide, we will break down exactly what Base64 encoding is, the historical reasons why it was invented, the underlying mathematics of how it converts data, its most common modern use cases, and the critical difference between encoding and encryption.

Why Do We Need Base64? The History

To understand Base64, you have to understand the early days of the internet and email.

Computers communicate using binary (1s and 0s). An image of a cat is just a massive sequence of binary data. However, early network protocols, specifically SMTP (Simple Mail Transfer Protocol) which is still used to route emails today, were originally designed only to handle plain text.

Specifically, they were designed to handle 7-bit ASCII characters. The 7-bit ASCII table only contains 128 characters: the English alphabet (A-Z, a-z), numbers (0-9), punctuation marks, and a few control characters like "carriage return" or "line feed."

If you try to send raw binary data (like a JPEG image) through an old, text-based system like SMTP, the system will misinterpret the binary 1s and 0s as random ASCII control characters. It might interpret a part of your image as a "Delete" command, or an "End of File" command, instantly corrupting the transfer.

The Solution: Engineers needed a way to represent 8-bit binary data using only the safe, printable 7-bit ASCII characters. Thus, Base64 was born. It takes any binary file and translates it entirely into safe text characters that will never break a text-based protocol.

How Does Base64 Actually Work?

The name "Base64" gives away how it works. Just as our standard counting system is Base-10 (using digits 0-9), and binary is Base-2 (using 0 and 1), Base64 uses a 64-character alphabet to represent data.

The Base64 alphabet consists of:

• Uppercase letters: A to Z (26 characters)
• Lowercase letters: a to z (26 characters)
• Numbers: 0 to 9 (10 characters)
• Symbols: + and / (2 characters) (Total = 64 characters)

The Translation Process

At the computer level, data is grouped into 8-bit Bytes. Because Base64 uses 64 characters, and 2 to the power of 6 is 64 ($2^6 = 64$), each Base64 character represents exactly 6 bits of data.

To convert binary to Base64, the computer does the following:

1. It takes the binary data in chunks of 24 bits (which is exactly three 8-bit bytes).
2. It slices those 24 bits into four smaller chunks of 6 bits each.
3. It translates each 6-bit chunk into its corresponding Base64 character from the 64-character alphabet.

In short: Every 3 bytes of raw data are converted into 4 characters of Base64 text.

What is the Equals Sign (=)?

If you have seen Base64 strings, you have likely noticed they often end with one or two equals signs (like dGVzdA==). This is called Padding. Because the conversion process requires taking data in 3-byte (24-bit) chunks, what happens if the original file size is not perfectly divisible by 3? If there is only 1 byte left over, the algorithm adds two = signs at the end to "pad" the block. If there are 2 bytes left over, it adds one =. This padding tells the decoding software exactly how to reconstruct the final bytes.

Common Modern Use Cases

While Base64 was originally designed for email attachments (MIME), it is heavily used across the modern web stack today.

1. Data URIs in HTML/CSS

Instead of forcing a web browser to make a separate HTTP request to download a small image icon, developers can encode the image into Base64 and embed it directly into the HTML or CSS file.

<!-- Example of a Base64 embedded image -->
<img src="data:image/png;base64,iVBORw0KGgoAAA..." alt="Icon">

This saves network requests, which can speed up page load times for very small graphics, though it should be avoided for large photographs.

2. JSON Web Tokens (JWT)

If you build modern web applications, you likely use JWTs for user authentication. A JWT consists of three parts (Header, Payload, Signature) separated by dots. The Header and the Payload are entirely Base64 encoded. This ensures that complex JSON objects can be safely passed back and forth in HTTP headers without breaking the HTTP protocol.

3. Email Attachments (MIME)

As mentioned, this is the original use case. When you attach a PDF or a photo to an email, your email client automatically encodes that file into Base64, embeds the massive text block into the email body, and the recipient's email client decodes it back into a file.

4. Basic HTTP Authentication

When a browser prompts you for a username and password via a built-in browser popup, it sends those credentials to the server using a header like Authorization: Basic dXNlcjpwYXNz. The string dXNlcjpwYXNz is just the text user:pass encoded in Base64.

Warning: Base64 is NOT Encryption!

This is the single most common, and dangerous, misconception among junior developers. Base64 provides absolutely zero security.

It is Encoding, not Encryption. Encoding changes the format of data for safe transportation. Encryption scrambles data using a mathematical key so that unauthorized people cannot read it.

Anyone who intercepts a Base64 string can decode it instantly without a password or a key. You should never use Base64 to "hide" passwords, API keys, or sensitive user data. If you decode the Basic Auth string dXNlcjpwYXNz, you instantly get the plain text username and password.

The Disadvantages of Base64

While incredibly useful, Base64 has two major drawbacks:

1. Size Overhead: Because it turns every 3 bytes into 4 characters, Base64 encoding increases file size by exactly 33%. If you have a 3MB image and convert it to Base64 to put in an HTML file, the HTML file will grow by 4MB. This is why you should never embed large files as Data URIs.
2. Processing Cost: It takes CPU power for a client (like a web browser) to decode the massive Base64 string back into a binary image before rendering it.

Conclusion

Base64 is the unsung hero of the internet. It acts as the universal translator between complex binary files and text-only communication protocols. While it makes files slightly larger and provides no security, its ability to safely package images, documents, and tokens into simple ASCII text ensures that the modern web—and your daily emails—continue to function smoothly.

If you ever need to quickly encode a string of text, or decode a Base64 string to see what it contains, you can use the free Base64 Encode/Decode tool available on this website!