Encodeur/Décodeur Base64

You're trying to embed a small icon directly into your HTML email template. You've got the PNG file, you paste the binary data into your code, and... your email client shows a broken image. Or worse, the entire template corrupts.

That's the world without Base64 encoding—the universal translator between binary data and text-based systems.

Base64 is everywhere: email attachments, JWT tokens, Kubernetes secrets, Data URIs, and HTTP Basic Auth headers. If you've ever wondered what those long strings of letters and numbers mean, or need to encode/decode one, you're in the right place.

This tool handles both directions instantly, with full support for URL-safe encoding and file uploads.

What is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 printable ASCII characters. It takes data that might contain unprintable bytes (like image files) and converts it into text that won't get corrupted during transmission.

The alphabet consists of:

• A-Z (26 characters)
• a-z (26 characters)
• 0-9 (10 characters)
• + and / (2 symbols, or - and _ in URL-safe mode)

This ensures your data survives transport through systems (like SMTP email or JSON APIs) that only handle text.

Why We Need Base64

Here are the specific problems Base64 solves:

1. Binary in Text Protocols: JSON and XML are text formats. You can't put raw image bytes inside a JSON string—they'd break the parser. Base64 converts those bytes into valid text.

2. Email Reliability: SMTP was designed for 7-bit ASCII text. Sending 8-bit binary attachments (photos, PDFs) would cause corruption. Base64 ensures attachments arrive intact.

3. HTTP Authentication: The Authorization: Basic header requires credentials to be encoded to handle special characters in passwords.

4. Embedding Assets: Data URIs let you inline small images or fonts directly into HTML/CSS, saving HTTP requests. Base64 makes this possible.

5. URL Safety: Standard Base64 uses + and /, which have special meaning in URLs. Base64Url mode replaces them with - and _ for safe transmission.

How to Use the Base64 Tool

1. Select Mode: Choose "Encode" to convert text or files to Base64, or "Decode" to convert Base64 back to readable data
2. Input Data:
   • Text: Type or paste strings directly
   • Files: Upload images or documents to generate Base64 strings
3. Format Options: Enable "URL Safe" mode if you're putting the output in a URL
4. Get Results: The tool processes instantly
5. Copy: Click the copy button and paste wherever needed

Real-World Use Cases

1. Debugging "401 Unauthorized" Errors

Context: You're integrating with an API that uses Basic Auth, but requests keep failing.
Problem: You suspect the Authorization header is malformed.
Solution: Paste the header value (after "Basic ") into the Decoder.
Outcome: You see api_key:secret_value in plain text and discover an accidental trailing space in your credentials.

2. Embedding Low-Res Placeholders (LCP Optimization)

Context: You're optimizing a Next.js app for Core Web Vitals.
Problem: Large hero images cause layout shift (CLS) as they load.
Solution: Take a tiny 20px version of your image, encode it to Base64, inline it as a placeholder.
Outcome: The placeholder loads instantly with the HTML, eliminating layout shift.

3. Inspecting Kubernetes Secrets

Context: You're debugging a K8s connection issue.
Problem: Running kubectl get secret db-creds -o yaml returns opaque Base64 strings.
Solution: Decode the host value to verify it's pointing to the right environment.
Outcome: You discover it's pointing to db-prod.internal instead of db-staging.internal.

4. Analyzing JWT Payloads

Context: A user claims they can't access a paid feature.
Problem: You need to verify the claims inside their session token.
Solution: JWT tokens are three Base64Url-encoded sections separated by dots. Decode the middle section (payload).
Outcome: You see {"role": "user"} instead of {"role": "admin"}—the subscription upgrade failed.

5. Transferring Fonts in HTML Emails

Context: You need a custom font in a standalone email template.
Problem: Email clients often block external font downloads.
Solution: Encode the .woff2 font file to Base64 and use @font-face { src: url('data:font/woff2;base64,...') }.
Outcome: The custom typography renders correctly without external requests.

6. Passing State via URL

Context: You're building a "share configuration" feature for a chart widget.
Problem: The config JSON is complex, and URL-encoding it creates an ugly mess that hits character limits.
Solution: JSON.stringify, Base64 encode, pass as ?config=eyJ0....
Outcome: The URL is shorter, cleaner, and won't break on special characters.

7. Recovering Email Attachments

Context: You're analyzing raw email logs (EML files).
Problem: An attachment was flagged as suspicious, and you need to inspect it safely.
Solution: Find the MIME boundary, copy the Base64 block, decode it back to a file.
Outcome: You extract the file for sandboxed analysis.

Common Mistakes and How to Avoid Them

Privacy and Data Handling

This Base64 Encoder/Decoder processes everything locally in your browser. Your files, text, and encoded data never leave your device.

There's no server-side processing, no file uploads to external servers, no logging, and no data retention. This is critical when working with sensitive content like API credentials, authentication tokens, or personal data. Your information stays completely private.

Conclusion

Base64 encoding is one of those utilities you don't think about until you need it—and then you really need it. From debugging authentication headers to embedding images in emails, it's a fundamental tool for web development.

Use this encoder whenever you need to convert binary to text or decode those mysterious strings in your logs. It's faster than writing code, handles files directly, and processes everything privately in your browser.