Base64 Encoder Decoder Online Free

What Is Base64?

Base64 is an encoding scheme that represents binary data as a sequence of printable ASCII characters. It uses 64 characters — A–Z, a–z, 0–9, +, and / — plus = as padding. Because these characters are safe to use in URLs, email headers, JSON strings, and HTML attributes, Base64 is the standard way to embed binary data in text-based contexts.

Base64 is not a modern invention — it was defined in the early days of MIME email standards (RFC 2045, published in 1996) to allow binary attachments in email systems that were designed to carry only 7-bit ASCII text. The same problem — transmitting binary data over text-based channels — persists in web development today, which is why Base64 remains a daily tool for developers.

How Base64 Encoding Works

The encoding algorithm works at the byte level: it takes 3 bytes (24 bits) of input and maps them to 4 Base64 characters (each representing 6 bits). This is why Base64 always increases the size of data by approximately 33% — 3 bytes become 4 characters, which is 4/3 the original size.

Step-by-step encoding example

Take the word "Man" in ASCII: M = 77 (01001101), a = 97 (01100001), n = 110 (01101110). Concatenated into 24 bits: 010011010110000101101110. Split into four 6-bit groups: 010011 (19), 010110 (22), 000101 (5), 101110 (46). These map to Base64 characters: T, W, F, u. So "Man" encodes to "TWFu".

When the input length is not a multiple of 3, the encoding pads with =characters. One remaining byte produces two Base64 characters plus ==; two remaining bytes produce three Base64 characters plus one =.

Size expansion

Every 3 bytes of input becomes 4 characters of output. A 100-byte file becomes 136 Base64 characters. A 1 MB image becomes approximately 1.37 MB as Base64. This size overhead is the main reason Base64 is used only when required by a text-based transport layer, not as a general storage format.

How to Encode and Decode

1. Open the Base64 Encoder / Decoder.
2. Select Encode or Decode mode.
3. Type or paste your input text.
4. The result appears instantly below.
5. Click Copy to copy the output.

Common Uses of Base64

HTTP Basic Authentication

The most common developer use of this tool is working with HTTP Basic Authentication. When an API or service uses Basic Auth, the credentials are sent in the Authorization header as:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

The value after Basic is the Base64 encoding of username:password (the literal colon is included). To construct this header manually: paste yourusername:yourpassword into the encoder and copy the result into your API client or curl command.

To debug a Basic Auth header you have received: paste the Base64 value into the decoder to reveal the credentials. This is useful when investigating authentication failures in API integrations.

JWT Tokens and Base64

JSON Web Tokens (JWT) consist of three Base64url-encoded segments separated by dots: header.payload.signature. Each segment is independently decodable. To inspect what a JWT contains, split on the dots and decode each segment separately.

What each segment contains

For JWT-specific decoding (which handles the Base64url variant and padding differences automatically), use the JWT Decoder instead. The standard Base64 decoder may fail on JWT segments due to the - and _ characters used in Base64url.

Data URIs: Embedding Files in HTML and CSS

A data URI embeds a file directly into HTML or CSS using the format:

data:[media type];base64,[base64-encoded-data]

For example, a small PNG icon can be embedded in an <img> tag or used as a CSS background-image value without a separate HTTP request. This eliminates a round-trip to the server for the resource but increases the HTML/CSS file size because Base64 is 33% larger than the binary original and prevents browser caching of the embedded resource.

Data URIs are most useful for small, inlined assets: a loading spinner, a simple icon, a custom cursor, or a single-pixel tracking image. For larger images or assets used on multiple pages, a separate file with a cacheable URL is more efficient.

Base64 and Unicode Text

Base64 was designed for binary data, not text. When encoding Unicode text (non-ASCII characters like accented letters, Arabic, or Chinese), you need to convert the text to bytes first. The standard approach is UTF-8 encoding followed by Base64 encoding. The tool handles this automatically — paste any Unicode text and it will be correctly encoded.

When decoding, the tool assumes UTF-8 encoding and converts the bytes back to a Unicode string. If the original data was not UTF-8 (for example, it was encoded in Latin-1 or UTF-16), the decoded output may appear garbled. This is a common source of confusion when working with legacy systems or email content from older mail clients.

The JavaScript atob/btoa trap

JavaScript's built-in btoa() and atob() functions work only on strings containing Latin-1 characters (code points 0–255). Passing a string with emoji or multi-byte characters throws a InvalidCharacterError. The correct approach is to encode to UTF-8 bytes first:

btoa(unescape(encodeURIComponent(str))) — or in modern environments:btoa(String.fromCharCode(...new TextEncoder().encode(str)))

This tool handles the UTF-8 conversion correctly internally, so you can safely encode Unicode strings without encountering the btoa() limitation.

Base64 vs URL-Safe Base64

Standard Base64 uses + and / as the 62nd and 63rd characters. These have special meanings in URLs (+ means space in query strings; / is a path separator), so a variant called Base64url substitutes - for + and _ for /, and omits trailing padding. JWTs use Base64url encoding for their header and payload segments.

When you receive a Base64 string from a URL parameter or a JWT, it is likely Base64url. Standard decoders will fail on the - and _ characters. The tool handles the common variants, but if you encounter a decoding error, try replacing - → + and _ → / before decoding.

PEM Files and Certificates

PEM (Privacy Enhanced Mail) is the format used for SSL/TLS certificates, private keys, and public keys. A PEM file looks like:

-----BEGIN CERTIFICATE-----
MIIBIjANBgkqhkiG9w0B...
-----END CERTIFICATE-----

The content between the header and footer is Base64-encoded DER (Distinguished Encoding Rules) format binary data. You can paste the Base64 content (without headers/footers) into the decoder to see the raw bytes, but the result is binary data and will appear as garbled characters in a text display. For inspecting certificate contents, use a dedicated tool like the SSL Checker which parses the certificate structure properly.

Base64 Is Not Encryption

Base64 is an encoding, not encryption. Encoded data can be decoded by anyone — there is no key or secret involved. Do not use Base64 to protect sensitive data. It is safe to use for embedding binary data in text formats, but it provides no confidentiality. For actual encryption, use standard cryptographic algorithms applied at the application level.

This distinction matters in security contexts. A common mistake is seeing Base64-encoded data in a network request or config file and assuming it is encrypted. Decoding it takes one second with any Base64 tool. If the data contains credentials or secrets, they are effectively plaintext — Base64 is just a transport wrapper.

Common Developer Scenarios

Debugging API authentication

Paste a Basic header value to reveal the username:password pair. Useful when testing an API you did not write and the credentials are not documented.

Inspecting environment variables

Service credentials, private keys, and certificates stored in environment variables (e.g., for CI/CD or Docker deployments) are frequently Base64-encoded to avoid escaping issues. Decode the value to view the original key material for debugging.

Generating test tokens

When writing unit tests for JWT validation, you may need to construct test tokens manually. Encode the header JSON and payload JSON to Base64url individually, join with dots, and append a fake signature to create a test token structure without going through an auth server.

Embedding icons in CSS without HTTP requests

Encode a small SVG or PNG icon to Base64 and use it as a data URI in your CSS for properties like background-image or content in pseudo-elements. This eliminates the separate image request for small decorative elements.

Base64 vs Hex Encoding

Hex encoding (Base16) is the other common way to represent binary data as text — each byte is written as two hexadecimal digits (0–9, a–f). Hex is more verbose (2 chars per byte, 100% size increase vs 33% for Base64) but easier to read and debug. Hash outputs (MD5, SHA-256), colour codes, and MAC addresses are conventionally displayed in hex. Use the Hash Generator for hex hashes. Base64 is preferred when compactness matters — API tokens, file embedding, MIME email.

Common Questions

Why does my decoded Base64 show garbled characters?

The most common cause is a character encoding mismatch. The decoded bytes may be UTF-16 or Latin-1 encoded, while the tool assumes UTF-8. Another cause is that the data is not text at all — it is binary data (an image, a key file, a compiled binary) that cannot be displayed as readable text regardless of encoding.

Why does Base64 end in = or ==?

Padding characters (=) make the output length a multiple of 4, which is required by the Base64 standard. One = means the input had one extra byte after the last complete 3-byte group; == means two extra bytes. Some implementations omit padding — this is valid in Base64url but technically non-standard in regular Base64.

Is there a size limit?

The tool runs in your browser with no server-side processing, so the practical limit is your browser's memory. For text strings up to several megabytes, performance is instant. For very large Base64 strings (encoding large files), use a command-line tool (base64 on macOS/Linux, certutil -encode on Windows) which is more memory-efficient for large binary files.

Can I use this to encode images?

This tool encodes text strings to Base64, not binary files. To convert an image to a Base64 data URI for embedding in HTML or CSS, you need a tool that accepts binary file input. The image can be read in JavaScript using a FileReader with readAsDataURL(), which returns the Base64-encoded data URI directly.