Base64 Explained: What It Is and When to Use It

Base64 is a way to write any data, even binary data like an image, using only 64 safe characters: the letters A-Z and a-z, the digits 0-9, and + and /. That makes it safe to put inside text formats that can't carry raw bytes.

How it works

Base64 takes the input three bytes (24 bits) at a time and splits them into four groups of six bits. Each group of six bits becomes one character from the 64-character alphabet. If the input doesn't divide evenly by three, the output is padded with = signs.

Text:    Hello
Base64:  SGVsbG8=

Because four characters carry three bytes, Base64 is about 33% larger than the original.

Where you will see it

• Data URIs: small images placed straight into HTML or CSS, like data:image/png;base64,iVBOR....
• Email: attachments are Base64-encoded so they can travel through text-only systems.
• JSON Web Tokens: the header and payload of a JWT are Base64URL-encoded JSON.
• HTTP Basic authentication: the Authorization header carries username:password in Base64.
• APIs and config files: binary values such as keys and certificates.

Base64 isn't encryption

Anyone can decode Base64 in a second, so it protects nothing. Never use it to hide passwords or secrets. It only changes how data is written.

URL-safe Base64

The characters + and / have special meaning in web addresses. The URL-safe variant, called Base64URL, replaces them with - and _ and usually drops the = padding. JWTs use this form.

Text with accents and emoji

Base64 works on bytes, not letters. Text must first be converted to bytes, normally with UTF-8, which is why é becomes two bytes and an emoji becomes four. Tools that skip this step fail on non-English text. The Base64 Encoder handles it for you.

When not to use it

Embedding a large image as Base64 makes your page bigger and stops the browser from caching the image separately. Use data URIs only for small icons, ideally under about 10 KB.