Base64Encoder & Decoder

Instantly encode/decode Base64 strings and files. Free, client-side, and no-login required.

Quick Answer

Read Full Explanation

Base64 converts binary data into ASCII strings to safely transport it over text-only protocols.

Short Answer

Base64 is an encoding method mapping binary data to 64 text characters. It ensures binary data like images or documents can be embedded in text-only formats such as HTML or JSON. It is encoding, not encryption, meaning anyone can decode it back to its original state.

Detailed Explanation

Base64 takes binary data and encodes it as ASCII characters, using a 64-symbol alphabet defined by RFC 4648. It's widely used for embedding images in HTML/CSS via Data URIs, sending email attachments (MIME), and encoding HTTP Basic Auth credentials or JSON Web Tokens (JWT). This conversion process guarantees data integrity across varied systems but increases the payload size by approximately 33%.

Comprehensive Overview

Because Base64 translates 3 bytes of binary data into 4 bytes of text, it generally increases the overall size of the data or image by approximately 33%. This tool automatically handles UTF-8 characters and allows you to generate URL-safe variants where standard characters like '+' and '/' are replaced with '-' and '_'. As a developer, you can securely perform this encoding locally in the browser with 100% privacy because no data is sent to external servers.

Client-Side Processing No Uploads Required Data URI Support Free Tool

URL-SafeReplaces + and /

Real-time

Text Input

Base64 Output

Convert Text to Base64 Decode Base64 Online Image to Base64 URL-Safe Base64 Data URI Generator Decode JWT Payload Base64 to Image

Alphabet64 Symbols

Size Overhead~33% Larger

Padding Character'='

Is it Encryption?No, Encoding

URL-Safe Variant'-' and '_'

StandardizedYes (RFC 4648)

What Is Base64 Encoding?

Definition

Base64 is a binary-to-text encoding scheme that converts binary data into ASCII characters. It uses a 64-character alphabet to ensure binary data safely survives transit over networks.

Why Developers Use It

It allows embedding of images in HTML/CSS, sending binary attachments via email (MIME), and passing complex JSON payloads securely within APIs without corrupting non-printable characters.

"Unixly"

Raw String Input

Base64 Conversion

Bits grouped & mapped

VW5peGx5

Safe ASCII Output

Key Facts

Standardized via IETF RFC 4648
Increases data size by ~33%
Fast client-side rendering
Not a security or encryption tool

How Base64 Works (Step-by-Step)

The encoding process defined by RFC 4648 translates data seamlessly in four steps:

Obtain binary stream: Convert the text (via UTF-8) or file into a raw stream of binary data.
Split into chunks: Divide the binary stream into 6-bit chunks. If leftover bits exist (<6), pad them with zeros.
Map to Alphabet: Map each 6-bit chunk (which holds a value from 0-63) to the corresponding ASCII character in the Base64 alphabet table (A-Z, a-z, 0-9, +, /).
Add Padding: Since Base64 processes data in 24-bit (3-byte) groups, if the input data doesn't perfectly divide by 3, the output is padded with one or two equals signs (=`) to indicate missing bytes.

Base64 vs Hex vs Encryption

Base64 Encoding

Data Transport

Safe for text channels

Easily reversed, adds 33%

Hex Encoding

Binary Inspection

Human debugging friendly

Adds 100% size overhead (2x)

Encryption (AES)

Data Security

Requires secret key

Complex, not for formatting

Security Note: Base64 is merely data obfuscation. It does not provide any security or confidentiality. Never use it to "hide" passwords or sensitive keys.

Data URIs & Embedding Images

Converting images to Base64 allows you to construct a Data URI. This eliminates the need for external HTTP requests by embedding the image directly into HTML or CSS code. This is incredibly useful for small icons, logos, and critical rendering path assets.

/* CSS Example */

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

Accessibility Tip: Always include descriptive alt text when embedding images via Base64 in HTML to ensure screen readers can understand the visual context.

Standard vs URL-Safe Base64

Variant	Characters Replaced	Padding	Primary Use
Standard Base64	`+` and `/`	Required (`=`)	JSON payloads, Email (MIME), Data URIs
Base64URL (URL-Safe)	Replaced by `-` and `_`	Often Omitted	JWT Tokens, URL Query Parameters, OAuth

Common Mistakes to Avoid

Treating Base64 as Encryption

Reason: Base64 provides no security payload hiding. Anyone with a decoder can read the data.

Solution: Use AES or RSA for encryption, then optionally encode to Base64 for transport.

Ignoring URL-Safe Characters

Reason: Standard Base64 contains '+' which URLs parse as spaces, corrupting the payload.

Solution: Toggle the URL-Safe option when transmitting strings via GET query params.

Missing Padding Error

Reason: Base64 strings must be a multiple of 4 in length. Dropping the '=' padding breaks decoders.

Solution: Ensure you copy the entire string including the equals signs at the end.

Encoding Huge Files

Reason: Base64 inflates file sizes by 33%. Encoding a 50MB file yields ~66MB of text, causing UI lag.

Solution: Avoid Base64 for large files. Rely on standard multipart/form-data HTTP uploads.

Developer Code Examples

// Web API Methods

const encoded = btoa("Hello World!");
const decoded = atob("SGVsbG8gV29ybGQh");
console.log(encoded); // "SGVsbG8gV29ybGQh"

Best Practices Checklist

Only encode binary data passing through text channels.

Use URL-safe variant (- and _) for query parameters.

Always encode text to UTF-8 bytes before Base64 conversion.

Keep Base64 files small (avoid massive DOM sizes in HTML).

Don't rely on Base64 for data security or privacy.

Implement proper padding validation in strict backend APIs.

Real World Use Cases

JSON APIs

Data URIs

JWT Tokens

MIME Email

K8s Secrets

Basic Auth

URL Params

App Configs

Browser & Platform Support

Chrome

Firefox

Safari

Edge

Node.js

Python

Java

Our Base64 utility operates natively on the client device, leveraging the browser's optimized HTML5 FileReader and atob/btoa APIs for immediate performance.

Troubleshooting Errors

Problem: Invalid string length

Cause: String is not padded to a multiple of 4 bytes.

Solution: Add '=' signs to the end of the string until the length divides evenly by 4.

Problem: Unreadable characters (Garbage output)

Cause: Attempting to decode a binary file (image, zip) as raw text.

Solution: Use the 'Images' tab instead to decode directly into an image preview.

Problem: Cannot decode URL parameter

Cause: The string contains URL-safe characters (- and _) that a standard decoder rejects.

Solution: Toggle 'URL-Safe' mode on to correctly decode Base64URL parameters.

Problem: Emoji/Unicode corruption

Cause: Platform failed to encode text to UTF-8 before Base64.

Solution: Our tool automatically handles UTF-8 correctly, but your backend parser might need a UTF-8 decoder step first.

Glossary

Base64

A group of binary-to-text encoding schemes representing binary data in an ASCII string format.

ASCII

A character encoding standard that assigns unique numerical values to English characters.

Data URI

A scheme that allows creators to include data in-line in web pages as if they were external resources.

MIME

Multipurpose Internet Mail Extensions. A standard that extends email formatting to support attachments using Base64.

RFC 4648

The official IETF specification defining the Base64, Base32, and Base16 data encodings.

Payload

The actual data being transmitted over a network or within a token, often Base64 encoded.

Base64 Examples & Best Practices

Learn how to encode and decode Base64 strings in your applications.

JavaScript Encoding

Encode a string to Base64 in the browser.

const encoded = btoa('Hello World');

JavaScript Decoding

Decode a Base64 string in the browser.

const decoded = atob('SGVsbG8gV29ybGQ=');

Best Practices

Base64 is encoding, not encryption. Do not use it to protect sensitive secrets.

Be aware of URL-safe Base64 variants when passing strings in query parameters.

Remember that Base64 encoding increases the data size by approximately 33%.

Base64 Encoding Explained

A complete guide on how Base64 works under the hood.

Learn How Base64 Works

Frequently Asked Questions

General

What is Base64 encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into an ASCII string using a 64-character alphabet (A–Z, a–z, 0–9, +, /). It is primarily used to safely transport binary data over text-only protocols like HTML, JSON, or email.

Is Base64 encryption?

No. Base64 is strictly a data encoding method, not encryption. It does not use a secret key and anyone can decode it. You should never use Base64 alone to protect sensitive data like passwords.

Why does Base64 output seem longer?

Because Base64 translates 3 bytes of binary data into 4 bytes of text, it generally increases the overall size of the data or image by approximately 33%. This overhead is the trade-off for text-safe compatibility.

What is Base64URL (URL-safe Base64)?

Standard Base64 uses the '+' and '/' characters, which can break URLs. Base64URL replaces these with '-' and '_' respectively, and often omits '=' padding, making the string safe to pass in URL query parameters and JWT tokens.

Tools & Usage

Can I convert images to Base64?

Yes. Our tool fully supports converting images to Base64. You can encode PNG, JPG, JPEG, GIF, WEBP, and SVG formats instantly, generating ready-to-use Data URIs.

Can I convert a Base64 string back into an image?

Yes, you can paste a Base64 Data URI or raw Base64 string into our 'Decode Base64 Images' tab, and it will automatically generate a downloadable image preview.

Is my data uploaded to a server?

No. All encoding and decoding occurs locally in your browser. Your files and text never leave your device, ensuring complete privacy.

What is the maximum supported file size?

The tool supports encoding and decoding files up to 10 MB in size to guarantee rapid, lag-free performance entirely within the browser.

Developers

What is a Data URI?

A Data URI allows you to include small files inline within documents instead of linking to external resources. For images, a Data URI looks like 'data:image/png;base64,...', saving extra HTTP requests.

Can I embed Base64 images directly in HTML or CSS?

Absolutely. In HTML, you can use an image tag: <img src="data:image/png;base64,..." alt="Preview">. In CSS, you can set a background: background-image: url('data:image/png;base64,...');

How is Base64 used in JSON Web Tokens (JWT)?

The header and payload sections of a JWT are both URL-safe Base64 encoded strings, allowing complex JSON data and signatures to be easily passed in HTTP headers.

Troubleshooting

Why am I getting an 'Invalid string length' error?

Standard Base64 strings must have a length that is a multiple of 4. If characters are missing, or if the '=' padding was incorrectly removed, decoding will fail. Ensure you copy the entire string.

My decoded text looks like garbled characters. Why?

Base64 only decodes exactly what was encoded. If the original data was a binary file (like an image or PDF) or was not encoded using UTF-8, decoding it as text will result in unreadable characters.

References & Specifications

RFC 4648 (Base64 Encoding) MDN Web Docs: Base64 W3C Data URI Scheme OWASP Security Guidelines