What Is Base64? How It Works, Its Uses, URL-Safe Encoding, and Size Growth

If you do web development, you run into the word "Base64" all the time, whether embedding images directly in HTML and CSS or looking at API tokens. Many people understand it vaguely as "the thing that turns stuff into a string." This article explains what Base64 really is, how it works, where it is used in practice, and the caveats that are easy to overlook.

What Is Base64

Base64 is a scheme for converting binary data, such as images, audio, or executables, into text made up of only letters, digits, and a couple of symbols. The "64" in the name comes from the 64 characters used for the conversion: A-Z (26), a-z (26), 0-9 (10), and the symbols "+" and "/". The "=" sign is also used as padding to adjust the length of the data.

The key point is that Base64 is not encryption. Unlike encryption, which makes data unreadable without a key, Base64 is just a "conversion rule" that anyone can reverse. It does nothing to keep contents secret, so it is wrong to think a password or personal data is "safe because it is in Base64."

So why convert to text at all? Because much of the world's infrastructure was built "assuming text." Email, URLs, and JSON were originally designed to carry characters, and pushing raw binary like an image through them can corrupt the data or trigger misbehavior from special control characters. Base64 keeps any data within a safe range of characters, so binary can travel even through text-only channels. To try the conversion yourself, you can encode and decode strings with the Base64 Encoder/Decoder.

How It Works: 3 Bytes into 4 Characters

The heart of Base64 is a simple rule: it converts 3 bytes of data into 4 characters. Let us walk through it.

1. Split the original data into groups of 3 bytes (= 24 bits).
2. Re-divide those 24 bits into four blocks of 6 bits each (6 x 4 = 24).
3. Six bits can represent 64 values (0-63). Map each block onto the 64-character table, turning one block into one character.

The result is that 3 bytes (8 bits x 3) become 4 characters (6 bits x 4). A byte is 8 bits, but Base64 deliberately works in 6-bit units. Since the least common multiple of 8 and 6 is 24, every 3 bytes fits neatly into exactly 4 characters.

Handling remainders and padding

The original data is not always a multiple of 3 bytes. When 1 or 2 leftover bytes remain, the missing bits are filled with zeros for conversion, and "=" is appended to balance the character count. If 1 byte remains you get "==", and if 2 bytes remain you get "=" at the end. When you see "=" at the end of a Base64 string, that is this padding.

Example: "ABC" (3 bytes) becomes "QUJD" (4 characters, no padding)

As you can see, the rule itself is very simple. Because the conversion is just a mechanical substitution, decoding it back is just as easy.

Main Uses: data URIs, Email, API Tokens

Base64 is unglamorous, but it works hard behind the scenes of the web we use every day. Here are three representative uses.

data URIs (embedding images in HTML/CSS)

There is a technique for writing small icon images directly into HTML or CSS instead of loading them as external files. This is the data URI. You embed the image as a Base64 string, like "data:image/png;base64,iVBORw0K...". This reduces the number of requests needed to fetch images, helping pages render faster. To convert an image into this form, the Image to Base64 converter turns a dragged-and-dropped image straight into a data URI string.

Email attachments

The email system (MIME) was originally built to send text. So image and PDF attachments are internally converted to Base64 when sent and carried along inside the message body as text. They are restored to the original files on the receiving side, so we never notice, but Base64 is at work behind every attachment. When you want to Base64-encode an arbitrary file and inspect its contents, the File to Base64 converter is handy.

API tokens and credentials

Base64 shows up constantly in the world of web APIs too. In HTTP Basic authentication, for example, "username:password" is Base64-encoded and placed in a header. JWTs (JSON Web Tokens) also express each part of the token in Base64 (more precisely, the URL-safe variant described below). But as noted, Base64 is not encryption, so this is only about "carrying it safely as text"; secrecy is provided by other mechanisms such as HTTPS.

What Is URL-Safe Base64

Standard Base64 includes the symbols "+" and "/". The trouble is that both characters have special meaning inside a URL. The "/" is a path separator, and "+" can be interpreted as a space, so including them as-is in a URL can cause malfunctions.

That is why URL-safe Base64 was devised. The rule is simple: replace the two problematic characters with different ones.

With these substitutions, the data can be safely embedded in URL query parameters, parts of a path, or JWT tokens. The underlying data is the same as standard Base64; only the characters used differ, which is all you really need to remember.

Why the Size Grows About 1.33x

An important property of Base64 is that the encoded data is larger than the original. It grows by roughly 4/3 (about 1.33x, +about 33%). The reason is clear from how it works: the original 3 bytes (24 bits of information) are expressed in 4 characters (4 bytes, 32 bits of space), so 3 bytes swell to 4 bytes.

3 bytes become 4 characters (4 bytes): 4 / 3 is about 1.33x

For example, embedding a 100 KB image as Base64 makes it about 133 KB as a string. Add padding and line breaks and it can grow a little more. Embedding images as data URIs reduces request counts, but the HTML or CSS file itself gets larger, which is the trade-off. This property is exactly why embedding is worthwhile for small images, while large images are better kept as ordinary external files.

Things to Watch Out For

Finally, here are the points to keep in mind when working with Base64.

• It is not encryption: anyone can easily reverse it. To protect sensitive information, always pair it with encryption, HTTPS, or another real safeguard.
• The size grows: it expands by about 1.33x, so it is poorly suited to embedding large files. Use it where it fits the purpose.
• Do not mix up standard and URL-safe variants: mixing "+/" and "-_" prevents correct decoding. Check which one the receiver expects.
• Mind line breaks: some schemes (such as for email) insert a line break every so many characters. Depending on the parser, you may need to strip those breaks.
• Use browser-only tools for sensitive data: if you convert files containing personal data, choose tools that never send data externally.

Base64 is a foundational technology that, despite having little to memorize, quietly works everywhere on the web. Grasp just three points, "binary becomes text," "3 bytes become 4 characters," and "it is not encryption," and the workings of data URIs and API tokens fall into place naturally. Start by converting a string or file of your own with the Base64 Encoder/Decoder and watch how it behaves.