What Is Base64? How Base64 Encoding Works and When to Use It

Base64 is a way of writing any binary data, such as an image, a PDF or an encryption key, using only 64 ordinary text characters: A–Z, a–z, 0–9, + and /. It exists so binary data can pass safely through systems designed for text, like email, JSON and URLs. It makes data about a third bigger and provides no security at all.

If you've seen a long string ending in = or == inside an email source, an API response or a CSS file, you've almost certainly met Base64. This guide explains what is happening under the hood, where Base64 is genuinely useful, where it causes problems, and the mistakes that most often catch out small business websites.

You can try every example below in Make It Flow's free Base64 encoder and decoder, which runs in your browser.

What is Base64 encoding for?

Computers store everything as bytes, and a byte can hold any of 256 values. Plenty of older protocols and formats were built on the assumption that they would only ever carry printable text. Email is the classic example. Some byte values have special meanings (line endings, control characters, the end of a string), and if raw binary data passes through, it can be mangled or cut short.

Base64 solves this by mapping binary data onto a small, safe alphabet that survives almost any text channel. The standard is defined in RFC 4648, which covers Base64, Base64url, Base32 and Base16 (hex).

Common places you'll find it:

• Email attachments. MIME encodes attachments as Base64 so a PDF or image can travel inside a text message.
• Data URIs. Small images or fonts embedded directly in HTML or CSS.
• APIs and JSON. JSON has no binary type, so files and keys are often sent as Base64 strings.
• JSON Web Tokens. Each part of a JWT is Base64url-encoded (see our guide to what a JWT is).
• HTTP Basic authentication. The username:password pair is Base64-encoded in the Authorization header. That is exactly why Basic auth must only ever run over HTTPS.
• DKIM records. The public key in a DKIM DNS record is Base64. Our guide to what DKIM is shows one.

How Base64 works, step by step

The idea is simple. Base64 takes your data 3 bytes (24 bits) at a time and splits those 24 bits into four 6-bit groups. Six bits can represent 64 values (2⁶ = 64), and each value maps to one character in the alphabet.

Here's the word Hi! worked through:

So Hi! becomes SGkh. Decoding does the same thing in reverse.

The alphabet

RFC 4648 defines the standard alphabet in this order:

What the = padding means

Data doesn't always divide neatly into 3-byte chunks. When the last chunk has only 1 or 2 bytes, the encoder pads the output with = so its length is always a multiple of four:

• 1 leftover byte gives 2 characters plus ==
• 2 leftover bytes give 3 characters plus =
• No leftover gives no padding

So Hi (2 bytes) encodes to SGk=, and H encodes to SA==. Some systems, including JWTs, drop the padding because the decoder can work it out from the length.

The size overhead: why Base64 makes files bigger

Because every 3 bytes become 4 characters, Base64 output is about 33% larger than the input (4 ÷ 3 ≈ 1.33). Some implementations, such as MIME email, also insert a line break every 76 characters, which adds a little more.

That overhead matters more than people expect:

If you're sending files through an API, that extra third is bandwidth you pay for on every request. For web pages, it's extra bytes the browser must download and parse before it can render. Keeping page weight down matters for speed and Core Web Vitals.

Base64url: the URL-safe variant

Standard Base64 uses + and /, and both have special meanings in URLs. / separates path segments, and + is often read as a space in query strings. = is also reserved in query strings.

RFC 4648 section 5 defines Base64url to fix this:

Use Base64url whenever the result will go into a URL, a file name or a cookie, or anywhere / and + might be misread. JWTs, many OAuth flows and WebAuthn (passkeys) all use Base64url.

A common bug: data encoded with Base64url and then decoded with a standard decoder (or the other way round) fails or silently corrupts. If decoding fails on a string containing - or _, that's the likely cause. The alternative, percent-encoding a standard Base64 string, works but is ugly. Our URL encoder shows what percent-encoding does to it.

Data URIs: embedding files in HTML and CSS

A data URI puts a whole file inside your HTML or CSS instead of linking to it. MDN documents the syntax as:

data:[<media-type>][;base64],<data>

For example, a tiny SVG or PNG icon in CSS:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

When data URIs help

• Very small images (a few hundred bytes) where a separate HTTP request costs more than the overhead.
• Self-contained HTML emails or single-file reports.
• Placeholder images while the real one loads.

When they hurt

• No separate caching. The image is cached only as part of the HTML or CSS file. Change one line of CSS and visitors download every embedded image again.
• Bigger, blocking CSS. CSS is render-blocking, so embedding images in it delays the first paint.
• 33% heavier. A properly compressed WebP or AVIF file served normally is usually the better choice. Our guide to WebP and AVIF explains why.

For SVG specifically, you often don't need Base64 at all. URL-encoded SVG text is usually smaller than its Base64 version.

Base64 is not encryption

This is the single most important thing to understand. Base64 is an encoding, which is a reversible change of format with no key and no secret. Anyone can decode it in a second, with no special tools.

Base64 is often misused as if it were protection:

• API keys "hidden" in front-end JavaScript as Base64 strings
• Passwords stored Base64-encoded in a database or config file
• Personal data Base64-encoded in URLs or cookies, on the assumption nobody will read it
• Malware in hacked WordPress sites hidden inside base64_decode() calls, which is a well-known warning sign (see signs your website was hacked)

If something needs to stay secret, encrypt it properly, or don't send it to the browser at all. Passwords should be hashed with a dedicated password-hashing algorithm, never encoded. Our hash generator shows how hashing differs: the output can't be turned back into the input.

Under data protection laws such as the GDPR and UK GDPR, personal data that is merely Base64-encoded is still readable personal data. It gives you none of the protection that encryption does.

How to encode and decode Base64

In the browser

Paste text or drop a file into our Base64 encoder. It works locally, so nothing is uploaded.

On the command line

# macOS / Linux
echo -n 'Hello' | base64          # SGVsbG8=
echo 'SGVsbG8=' | base64 --decode # Hello

The -n matters. Without it, echo adds a newline and you encode Hello\n instead, which gives a different result. This trips up a lot of people setting Basic auth headers.

In JavaScript

btoa('Hello');      // "SGVsbG8="
atob('SGVsbG8=');   // "Hello"

btoa() only handles characters in the Latin-1 range. For text with emoji or non-Latin characters, convert it to UTF-8 bytes first (for example with TextEncoder), then encode the bytes.

In PHP and Python

base64_encode('Hello');   // SGVsbG8=

import base64
base64.b64encode(b'Hello')         # b'SGVsbG8='
base64.urlsafe_b64encode(b'Hi?>')  # Base64url

Common Base64 problems and fixes

1. "Invalid character" errors. Check for spaces, line breaks or a mix of Base64 and Base64url characters.
2. Wrong length. Valid padded Base64 has a length that is a multiple of four. If padding was stripped, add = until it is.
3. Garbled accented characters. The text was encoded in one character set and decoded in another. Use UTF-8 on both sides.
4. An extra character at the end. You encoded a trailing newline. Use echo -n or trim the input.
5. Huge JSON payloads. If you're Base64-encoding large files into JSON, consider a multipart upload or a direct file URL instead.

FAQ

What is Base64 used for?

Base64 is used to carry binary data through systems built for text. Typical examples are email attachments, images embedded in HTML or CSS as data URIs, files and keys sent in JSON APIs, JSON Web Tokens and HTTP Basic authentication headers. It keeps the data intact, but it doesn't make it secret or smaller.

Is Base64 encryption?

No. Base64 is an encoding with no key or secret, so anyone can decode it instantly. It offers no confidentiality. If you need to protect data, use real encryption such as AES, delivered over TLS, and hash passwords with a proper password-hashing algorithm rather than encoding them.

Why does Base64 end with = or ==?

The equals signs are padding. Base64 works in 3-byte blocks, and when the final block has only one or two bytes, the encoder adds == or = so the output length is a multiple of four. Some formats, including JWTs and much Base64url, leave the padding out because decoders can infer it.

How much bigger does Base64 make a file?

About 33% bigger, because every 3 bytes of input become 4 characters of output. Line breaks added by some encoders, such as MIME email, add slightly more. A 300 KB image becomes roughly 400 KB once Base64-encoded, which is why large files are best sent as normal binary downloads.

What is the difference between Base64 and Base64url?

Base64url, defined in RFC 4648 section 5, replaces + with - and / with _, and usually drops the = padding. That makes the output safe to use in URLs, file names and cookies without further escaping. JWTs, OAuth and passkeys use Base64url. Decoding one with the other's decoder causes errors.

Should I use Base64 images on my website?

Only for very small images, such as tiny icons or placeholders. Base64 images are a third larger, can't be cached separately, and bloat render-blocking CSS. For most images, a compressed WebP or AVIF file served normally with good cache headers loads faster. Our free image compressor can help.