Complete Guide to Base64 Encoding and Decoding
Base64 encoding is one of the most widely used data encoding techniques in web development, API design, and systems programming. If you have ever looked at an email source, inspected a JWT token, or embedded an image in CSS, you have already encountered Base64 data without necessarily knowing what it was. Understanding when and why to use it will save you hours of debugging and help you build more reliable integrations.
What Is Base64 Encoding?
Base64 is a binary-to-text encoding scheme defined in RFC 4648. It converts any sequence of binary bytes into a string made up of only 64 printable ASCII characters, specifically the uppercase and lowercase Latin alphabet, the digits 0 through 9, and two additional symbols. The name Base64 comes from the fact that each encoded character represents exactly 6 bits of the original data, and 2 to the power of 6 equals 64.
The encoding works by taking 3 bytes of binary input at a time (24 bits total) and splitting them into four groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet. This is why Base64 output is always exactly one third longer than the original input three bytes become four characters.
When the input length is not divisible by three, the encoder adds one or two equals sign (=) padding characters at the end to make the total output length a multiple of four. This padding is required by the standard but can be omitted in URL-safe variants.
The Base64 Character Alphabet
Standard Base64 and URL-safe Base64 share the same 62 alphanumeric characters. They differ only in the two symbols used for positions 62 and 63 in the alphabet table.
| Character Range | Index Values |
|---|---|
| A to Z | 0 to 25 |
| a to z | 26 to 51 |
| 0 to 9 | 52 to 61 |
| + or - | 62 (standard uses +, URL-safe uses -) |
| / or _ | 63 (standard uses /, URL-safe uses _) |
| = | Padding only, not a data character |
Standard Base64 vs URL-Safe Base64
The standard Base64 alphabet includes the + and / characters. Both of these have reserved meanings in URL syntax. The plus sign represents a space in form-encoded query strings, and the forward slash is a path separator. If you place standard Base64 output directly into a URL without encoding it, the browser or server will misinterpret the + and / characters and corrupt the data.
URL-safe Base64, defined in RFC 4648 Section 5, solves this by replacing + with a hyphen and / with an underscore. Both characters are safe to include in URLs without percent-encoding. URL-safe Base64 is also used in JSON Web Tokens (JWT), OAuth 2.0 code challenge parameters, and many modern API authentication schemes.
Use Standard Base64 when
- Embedding images or files in HTML or CSS
- Encoding email attachments with MIME
- Storing binary data in JSON fields
- Any context where + and / will not be misread
Use URL-Safe Base64 when
- Including Base64 in URL query parameters
- Creating or verifying JWT tokens
- OAuth 2.0 PKCE code challenge values
- HTTP headers and cookie values
How to Embed Images as Base64 Data URIs
A data URI is a URL scheme that lets you embed file content directly inline in an HTML or CSS document. Instead of referencing an external image file, you encode the image to Base64 and include the result as the src attribute value. This eliminates one HTTP request per image, which can improve perceived performance on pages with many small icons or logos.
The format of a Base64 image data URI is:
Upload any image in the tool above and the full data URI is generated automatically. You can copy it and paste it directly into your HTML or CSS. The live preview confirms the image encoded and decodes correctly before you use it in production.
Base64 in JSON Web Tokens (JWT)
A JWT consists of three parts separated by dots. The header, the payload, and the signature. Both the header and payload are JSON objects encoded as URL-safe Base64 strings with the padding equals signs removed. This is why you can decode the first two parts of any JWT without a secret key they are just Base64, not encryption.
Here is what a typical JWT looks like when split into its three parts:
Red = header (Base64 encoded JSON). Yellow = payload (Base64 encoded JSON). Green = HMAC signature.
Paste the red or yellow section into the Decode tab above with URL-safe mode enabled to read the JSON claims directly. Never trust the payload as proof of authentication always verify the signature on your server.
Common Use Cases for Base64 Encoding
- Embedding images directly in HTML or CSS as data URIs to eliminate extra HTTP requests
- Encoding API credentials for HTTP Basic Authentication headers in the format username:password
- Storing binary file contents inside JSON payloads where only text values are accepted
- Encoding email attachments when sending files through SMTP or MIME-based email systems
- Creating and validating JWT tokens where the header and payload sections are Base64 encoded
- Encoding query parameters that contain special characters before adding them to a URL string
- Transmitting binary data through WebSockets or REST APIs that only accept UTF-8 text
- Obfuscating configuration values in environment files or client-side JavaScript bundles
Tools That Pair Well with Base64 Encoding
Base64 is rarely used in isolation. Here are a few Uitly tools that fit naturally into workflows where Base64 encoding is involved.
- Encode a URL before embedding it in a Base64 payload using the URL Shortener. Shorter URLs produce smaller Base64 strings, which reduces payload size in APIs and data URIs.
- Generate a QR code from any URL before encoding it. QR codes use their own binary encoding internally, but you can Base64-encode the resulting image to embed it directly in an HTML email without an external image host.
- Strip tracking parameters from a URL using the URL Cleaner before encoding it in a JWT claim or API payload. Clean URLs produce shorter Base64 output and avoid leaking analytics parameters in your tokens.
- Add UTM campaign parameters to destination URLs using the UTM Builder and then encode the result as URL-safe Base64 for safe inclusion in redirect links and deep link parameters.
Your Data Never Leaves Your Browser
Uitly Base64 encoder uses two native browser APIs for all conversions. Text encoding and decoding use the JavaScript btoa and atob functions, which are built into every modern browser. File and image encoding uses the FileReader API, which reads file contents directly from your local device memory.
Neither of these operations requires a network request. Uitly has no server that receives your input, no database that stores your encoded strings, and no analytics that tracks what you encode. The tool is fully functional even if you disconnect from the internet after the page loads.
Frequently Asked Questions
Start Encoding and Decoding Base64 for Free
Uitly Base64 encoder is built for developers, designers, and anyone who works with APIs, emails, or web assets. Encode text, files, and images instantly with full URL-safe support and a live preview. No account needed, nothing stored on our servers, and no limits on how much you encode.