Base64 Encoder/Decoder — How Data Encoding Works

What Is Base64

Base64 is an encoding scheme that represents binary data as ASCII characters. It is used to safely transmit images, files, and binary data through text-based systems such as email, JSON, and HTML.

It uses 64 ASCII characters (A-Z, a-z, 0-9, +, /) to represent any binary data.

Base64 Encoder / Decoder

Image to Base64

Binary to Text Serialization

Convert images to Base64 strings to embed them directly in your code.

🧬

Select Image

Data URI

Raw Base64

How Base64 Encoding Works

Three bytes (24 bits) of binary data are split into four 6-bit groups.

Input: "Man"
ASCII: 77 97 110
Binary: 01001101 01100001 01101110

Split into 6-bit groups: 010011 010110 000101 101110
Base64 indices: 19 22 5 46
Base64 characters: T W F u
Result: "TWFu"

Base64 encoding increases the original data size by roughly 33% (3 bytes → 4 characters).

Common Use Cases

1. Embedding Images Directly in HTML/CSS

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

.icon {
  background-image: url("data:image/svg+xml;base64,...");
}

Useful for embedding small icons without making a separate file request.

2. Email Attachments (MIME)

The email protocol (SMTP) can only transmit text. Attachments are Base64-encoded into text before being sent.

3. JWT (JSON Web Token)

A JWT’s header and payload are encoded as Base64Url — a variant of Base64 that replaces + with - and / with _.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0...

4. API Authentication (Basic Auth)

HTTP Basic authentication encodes username:password in Base64.

Authorization: Basic dXNlcjpwYXNz

5. Data URLs

Represents file contents in URL format.

data:text/plain;base64,SGVsbG8gV29ybGQ=

Base64 vs. URL Encoding

Item	Base64	URL Encoding (% encoding)
Purpose	Binary → text conversion	Handling special URL characters
Output	A-Z, a-z, 0-9, +, /	%XX format
Size increase	33%	Up to 300%
Primary use	Email, JWT, images	URL parameters

Common Mistakes

Base64 ≠ encryption: Anyone can decode Base64. It is not a security measure.
Padding =: The = at the end of a Base64 string is a padding character that aligns data that is not a multiple of 3. Removing it may cause decoding to fail.
Base64Url: When using Base64 in URLs, you must use the Base64Url variant — replace + with - and / with _.

Image to Base64

Oiyo