Binary data or complex text payloads must often be represented as standard ASCII strings to be transmitted through text-only channels like JSON or CSS.
Example Broken Input: An API token or a small icon's binary data that needs to be embedded directly as a string.
Why it happens: Transmitting raw binary or non-standard text through HTTP headers or style sheets can cause data corruption or security filtering issues.
Solution (Use Tool): The Base64 Workshop provides a secure, local-first environment to encode or decode strings. It handles standard padding requirements instantly on your own CPU.
Advanced Notes: Use this for masking configuration secrets or generating CSS Data URIs for icons to optimize page load times by reducing HTTP requests.
How to convert Base64 online
- Type or paste your raw text or Base64 string into the input area.
- Select whether you want to Encode or Decode the string using the toggle switch.
- The converted output appears instantly.
- Click 'Copy' to copy the encoded or decoded string to your clipboard.
Examples
Base64 Encoding ToolQmFzZTY0IEVuY29kaW5nIFRvb2w=SGVsbG8gV29ybGQhHello World! (Decoded)Base64 Variants: Standard, URL-Safe, and MIME
Base64 is not a single encoding but a family of variants that differ in their character sets and formatting rules. Standard Base64, defined in RFC 4648, uses an alphabet of A-Z, a-z, 0-9, plus (+), and slash (/), with equals (=) for padding. This works well for embedding data in XML, JSON, and most text formats.
URL-safe Base64 replaces + with - and / with _ because the standard characters have special meaning in URLs and filenames. Without this substitution, a Base64 string in a URL query parameter would need percent-encoding on top of the Base64 encoding, increasing size and complexity. JWT tokens use URL-safe Base64 without padding for this reason.
MIME Base64, used in email attachments and defined in RFC 2045, inserts a line break every 76 characters. This accommodates older email systems that cannot handle long lines. If you decode MIME Base64 with a parser that does not expect line breaks, it will fail or produce corrupted output.
Choosing the wrong variant causes subtle bugs. A JWT decoded with a standard Base64 decoder may fail on tokens containing - or _ characters. An email attachment encoded without line breaks may be rejected by mail servers. Always match the Base64 variant to your specific use case.
Data URIs and Inline Resources
The data: URI scheme allows embedding file content directly into HTML, CSS, and JavaScript using Base64 encoding. Instead of referencing an external image file, you can encode the image bytes as Base64 and include them inline: data:image/png;base64,iVBORw0KGgo... The browser decodes the Base64 string and renders the image without making a separate HTTP request.
This technique eliminates network round trips for small resources. A 2 KB icon encoded as Base64 adds roughly 2.7 KB to the HTML document (Base64 increases size by approximately 33%) but saves a DNS lookup, TCP connection, and HTTP request that could take 50 to 200 milliseconds on mobile networks.
Data URIs are commonly used for small images in CSS (icons, backgrounds, sprites), SVG graphics embedded in HTML, font subsets for critical text rendering, and small JavaScript or CSS snippets loaded inline for performance. However, Base64-encoded resources cannot be cached independently by the browser. If the same icon appears on every page, an external file cached once is more efficient than embedding the same Base64 string in every HTML response.
The break-even point depends on file size and caching strategy. Resources under 4 KB generally benefit from inlining. Larger files should remain as separate cached assets.