What is Base64?

Base64 turns any data, such as an image or a file, into plain text made of 64 safe characters, so it can travel through email, URLs and JSON and come back unchanged.

Published by ThatToolSite

Paste text or Base64 into Base64 encode and decode, or drop in an image or file to get its Base64 or a data URI. It runs in your browser, so nothing you paste is sent anywhere.

Encode or decode Base64

What is Base64? The short answer

Base64 is a way of writing any data, such as an image, a PDF or text in any language, using only 64 safe characters: A to Z, a to z, 0 to 9, plus + and /. It is defined in RFC 4648, the internet standard for it.

It exists because many systems were built to carry plain text and can damage raw binary data. Email, URLs, JSON and HTTP headers all handle letters and digits reliably. Base64 lets you send a file through them and get the exact same bytes back at the other end.

“Hi!” in Base64 is SGkh

How Base64 encoding works

Computers store data as bytes of 8 bits. Base64 takes 3 bytes at a time (24 bits) and splits them into 4 groups of 6 bits. Six bits can hold a number from 0 to 63, and each number maps to one character:

ValuesCharacters
0 to 25A to Z
26 to 51a to z
52 to 610 to 9
62+
63/

Encoding “Hi!” step by step:

StepResult
CharactersH, i, !
Bytes72, 105, 33
In binary01001000 01101001 00100001
Regrouped in sixes010010 000110 100100 100001
As numbers18, 6, 36, 33
As charactersS, G, k, h

Decoding runs the same steps backwards, which is why Base64 always gives back exactly what went in.

What the = signs at the end mean

When the data isn’t a multiple of 3 bytes, the last group is short. Base64 fills the gap with = as padding, so the output is always a multiple of 4 characters:

InputBytesBase64
f1Zg==
fo2Zm8=
foo3Zm9v
foob4Zm9vYg==
foobar6Zm9vYmFy

These are the test values from RFC 4648 itself. Two = signs mean the last group held one byte, one = means two bytes, none means three.

How much bigger Base64 makes a file

Every 3 bytes become 4 characters, so Base64 is about a third larger than the original:

Base64 size ≈ original size × 4 ÷ 3

OriginalAs Base64
30 KB iconabout 40 KB
300 KB photoabout 400 KB
3 MB PDFabout 4 MB

Email adds a little more, because MIME, the email format, breaks Base64 into lines of at most 76 characters. That is one reason a 20 MB attachment can push an email over a 25 MB limit.

Where you see Base64

  • Email attachments. Files attached to emails travel as Base64 inside the message.
  • Data URIs. A small image can be written straight into HTML or CSS as data:image/png;base64,... instead of a separate file.
  • JSON APIs. JSON has no binary type, so files and images are often sent as Base64 strings.
  • Login headers. HTTP Basic authentication sends “username:password” in Base64.
  • JSON Web Tokens. The three parts of a JWT are base64url-encoded; the JWT decoder reads them.

Base64url, the URL-safe version

The + and / characters have special meanings in URLs and file names. RFC 4648 defines a second alphabet, base64url, that swaps them out:

Base64Base64url
Value 62+- (minus)
Value 63/_ (underscore)
Padding=Often left off

If a decoder rejects a string full of - and _, it is probably base64url. Swap them back to + and /, add = until the length is a multiple of 4, and it decodes.

When to put an image in Base64

A data URI puts the whole image inside the HTML or CSS:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">

It suits some jobs and not others:

  • Good for small icons, an email signature logo, or a single HTML file that has to work offline with no separate image files.
  • Bad for photos and large images. They become a third bigger, can’t be cached separately from the page, and make the HTML slow to load and hard to edit.

The Base64 tool turns an image into a ready-made data URI. If the image is large, make it smaller first with compress image.

Base64, hex and Base32 compared

RFC 4648 defines three related encodings. They all turn bytes into text; they differ in size and alphabet:

EncodingCharacters usedSize versus the original“Hi!” becomes
Base16 (hex)0 to 9, A to F2 times486921
Base32A to Z, 2 to 71.6 timesJBUSC===
Base64A to Z, a to z, 0 to 9, + and /1.33 timesSGkh

Hex is easiest to read byte by byte, which is why hashes and colours use it. Base32 avoids lowercase letters and look-alike digits, so it suits codes people type by hand. Base64 is the most compact of the three, which is why it is the usual choice for files.

Base64 isn’t encryption

Anyone can decode Base64; there is no key. A password or API key “hidden” in Base64 is as readable as plain text to anyone who sees it. HTTP Basic authentication is only safe over HTTPS for this reason, and a JWT’s contents can be read by anyone who has the token.

Use Base64 to carry data safely through text-only systems. Use real encryption to keep it secret.

Encoding and decoding Base64

In a terminal on Mac or Linux:

echo -n 'Hi!' | base64        # SGkh
echo 'SGkh' | base64 --decode  # Hi!

In JavaScript, for plain English text:

btoa("Hi!")   // "SGkh"
atob("SGkh")  // "Hi!"

In Python, which works on bytes:

import base64
base64.b64encode(b"Hi!")          # b'SGkh'
base64.b64decode("SGkh")          # b'Hi!'
base64.urlsafe_b64encode(b"Hi?")  # base64url, with - and _

btoa only accepts characters that fit in one byte, so it throws an error on text like “café” or “नमस्ते”. Turn the text into UTF-8 bytes first with TextEncoder, or use a tool that does it for you. The Base64 tool handles any language.

Why Base64 won’t decode

  • It’s base64url. Contains - or _ instead of + or /.
  • Missing padding. The length isn’t a multiple of 4. Add = signs.
  • Extra text at the start. A data URI begins with data:...;base64,; remove everything up to and including the comma.
  • Line breaks or spaces from an email or a copied block. Most decoders ignore them; strict ones don’t.
  • Accents and other scripts come out garbled. The bytes decoded correctly but are being read with the wrong character set. Text encoded from UTF-8 has to be read back as UTF-8; a decoder that assumes one byte per character turns “café” into “café”.
  • It decodes to nonsense. The result is a file, not text. Save it with the right extension, such as .png or .pdf, instead of reading it as text.

Sources