Short title

Base64 Encoder & Decoder (URL-Safe)

Encode and decode Base64 strings or binary files instantly. Supports URL-safe base64url, UTF-8 unicode, MIME line wrapping, Data URLs, and live error repair.

Select preset
Pipeline title
Lbl triad #1 / 7Badge rfc ok
Raw byte octetsA (0x41)01000001l (0x6C)01101100a (0x61)01100001010000 • 010110 • 110001 • 100001Base64 sextets[010000]#16Q[010110]#22W[110001]#49x[100001]#33h
Input title
Lbl one click data url:
Stat input size19 Unit chars
Stat output size28 Unit bytes
Stat expansion+47.4%
Stat modeMode encode short
Stat variantVariant standard short
Stat purityStatus ok
Technical Reference & Architecture Guide

Base64 Encoder & Decoder (URL-Safe) Guide

Encode and decode Base64 strings or binary files instantly. Supports URL-safe base64url, UTF-8 unicode, MIME line wrapping, Data URLs, and live error repair.

Base64 Encoder & Decoder (URL-Safe) Guide — Client-Side In-Memory Architecture & Data Flow
Base64 Encoder & Decoder (URL-Safe) Guide — Client-Side In-Memory Architecture & Data Flow

Key Parameters & Controls

Base64 Alphabet TableCharacterSet

64-character mapping table assigned to 6-bit values from 0 to 63. Standard RFC 4648 uses [A-Za-z0-9+/], while URL-safe replaces + and / with - and _.

Default: RFC 4648 Standard
Padding Character (=)String

Suffix character added when the input binary stream is not a multiple of 24 bits. Adds == for 1 remainder byte, or = for 2 remainder bytes. Omitted in base64url.

Default: Enabled (=)
Line Wrapping LimitInteger / Preset

Column count after which a CRLF or LF line break is inserted. MIME uses 76 characters per line, PEM uses 64 characters, and modern web APIs typically use None.

Default: None (Continuous)
Text Character EncodingEnum

Byte serialization standard for plain text. UTF-8 handles all global Unicode characters and emojis. ISO-8859-1 (Latin-1) and ASCII restrict to single-byte ranges.

Default: UTF-8
Data URL SchemeString Format

MIME-prefixed URI format (data:[<mediatype>][;base64],<data>) allowing images, fonts, audio, and documents to be embedded directly into HTML and CSS files.

Default: Auto-Detect

Pro Tips & Best Practices

Bypass the JavaScript btoa() Unicode Exception

The standard browser window.btoa() function throws an InvalidCharacterError when encountering any character outside the Latin-1 range (code point > 255). To safely encode modern UTF-8 text containing emojis or non-English scripts, convert the string into a Uint8Array using new TextEncoder().encode(str) before mapping the byte stream to Base64.

Prevent Broken URL Query Strings with Base64url

Standard Base64 contains the plus (+) and slash (/) characters. When passed in HTTP URL query parameters, web servers often decode + into a blank space, corrupting the payload. Always use the URL-safe Base64url specification (RFC 4648 §5) which substitutes + with - and / with _, and strips trailing = padding.

Evaluate the 33% Data URI Bandwidth Overhead

Embedding assets as Data URLs eliminates HTTP roundtrips, but Base64 expands binary file size by exactly 33.33% (4 characters for every 3 bytes) and prevents separate browser caching. Reserve inline Data URLs for tiny icons and critical SVGs under 4KB; keep larger media as external HTTP/2 or HTTP/3 cached resources.

Automate Padding Calculation for Truncated Base64

If an API or log truncates trailing equals signs, determine the required padding using modulo arithmetic: calculate remainder = stringLength % 4. If remainder is 2, append ==. If remainder is 3, append =. If remainder is 1, the string is malformed because 6 bits cannot represent a complete 8-bit octet.

Common Gotchas & Troubleshooting

⚠️The string to be decoded is not correctly encoded (DOMException / Atob Error)

The input string contains characters outside the Base64 alphabet (such as spaces, line breaks, or URL percent-encoded characters like %2B). Enable the Auto-Clean switch to strip whitespace and normalize hyphens/underscores, or verify whether the data was encoded with URL-safe base64url.

⚠️Decoded text displays mojibake garbage characters (e.g. é, ü, or replacement characters )

This is caused by an encoding mismatch. The original text was converted from UTF-8 multi-byte bytes, but the decoder is reading them as ISO-8859-1 (Latin-1), or vice versa. Change the Text Character Encoding selector from Latin-1/ASCII to UTF-8 to restore the proper multi-byte character reconstruction.

⚠️Invalid Base64 length error: string length modulo 4 equals 1

Base64 groups 6 bits into characters; an encoded length with a remainder of 1 mod 4 means there are only 6 bits available, which is insufficient to reconstruct even a single 8-bit byte. This proves the string was cut off during network transmission or copy-pasting. Retrieve the complete payload from the source.

Frequently Asked Questions

How does Base64 encoding calculate the 33% size increase?▼

Base64 encoding converts every 3 bytes (24 bits) of binary input into 4 ASCII characters (each representing 6 bits). Because each output character is stored as an 8-bit ASCII byte in memory and over HTTP, 24 bits of input become 32 bits of output. This produces a constant mathematical ratio of 4/3, resulting in exactly a 33.33% increase in data size before line breaks and padding.

How does Base64url differ from standard Base64 encoding?▼

Standard Base64 (RFC 4648 §4) uses + and / as its 62nd and 63rd characters and uses = for padding. In URL query strings and filenames, + is interpreted as a space and / acts as a path delimiter. Base64url (RFC 4648 §5) replaces + with hyphen (-) and / with underscore (_), and typically omits the trailing = padding characters to ensure safe URL and filename transmission without URL-encoding.

Why does JavaScript btoa throw an InvalidCharacterError on Unicode characters?▼

The native browser btoa() function was created for binary strings where each character code point must fit in a single 8-bit byte (0 to 255). Modern Unicode characters (such as emojis, accented letters, or Asian scripts) require 2 to 4 bytes in UTF-8. Passing a code point higher than 255 violates btoa specifications. Modern applications must first serialize the string to UTF-8 bytes using TextEncoder before Base64 conversion.

How do you convert a Base64 string into a clickable HTML Data URL image?▼

To display a Base64 image in HTML or CSS without an external file, prepend the appropriate media type prefix and base64 marker: data:image/[format];base64,[data]. For example, a PNG image uses data:image/png;base64,iVBORw0KGgo... You can paste this entire string directly into the src attribute of an HTML <img> tag or inside a CSS background-image: url(...) property.

When should Base64 padding (=) be omitted in web tokens and APIs?▼

Base64 padding using the equals sign (=) should be omitted when generating JSON Web Tokens (JWTs), OAuth access tokens, and URL slugs governed by the RFC 7515 (JWS) and RFC 4648 §5 specifications. Because the length of the string is known by the parser, the missing bits can be mathematically calculated (string.length % 4), making padding redundant and saving URL space.

Related Tools & Utilities

All Tools →