What is Base64, and when should you use it?

By Uxair Ijaz · 2026-10-22 · 2 min read

Base64 is a way to write any bytes (an image, a PDF, a key) using only 64 safe text characters: A–Z, a–z, 0–9, + and /, with = for padding. It exists because many systems were built to carry text, not raw binary: email bodies, JSON, URLs, HTML attributes.

Hello  →  SGVsbG8=

How it works

Base64 takes the input 3 bytes at a time (24 bits) and splits them into four 6-bit groups. Each 6-bit number (0–63) maps to one character of the alphabet.

When the input is not a multiple of three bytes, the output is padded with one or two = signs.

It is bigger, not safer

• Size: every 3 bytes become 4 characters, so Base64 is about 33% larger than the original.
• Not encryption: anyone can decode it instantly. Use it to transport data, never to hide it. For secrets, see hashing vs encryption.

Base64URL

The standard alphabet uses + and /, which have special meanings in URLs. Base64URL swaps them for - and _ and usually drops the = padding. JWTs use it, which is why every token looks like three Base64 strings joined by dots. The Base64 tool has a URL-safe switch.

Data URLs: images inside your code

A data URL puts a whole file into a single string:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

You can use it anywhere a URL goes: an <img src>, a CSS background-image, or a Markdown image.

Good uses

• Small icons and logos (a few KB) in emails or single-file HTML pages.
• Embedding an image in JSON for an API that only accepts text.
• Avoiding one extra request for a tiny image.

Bad uses

• Large photos: they grow by a third and cannot be cached on their own.
• Images that change often or appear on many pages.

Try it

• Image to Base64: drop an image and copy it as a data URL, raw Base64, CSS, HTML or Markdown.
• Base64 to Image: paste a Base64 string to see the picture and download it.
• Base64: encode and decode text and any file.