Base64 Encoding & Decoding — The Complete Guide

June 2026 · 5 min read

What Is Base64 Encoding?

Base64 is a way to represent binary data (images, files, audio) as plain text using only 64 printable ASCII characters: A-Z, a-z, 0-9, plus (+) and slash (/). It's not encryption or compression — it's an encoding scheme that makes binary data safe for transmission through text-based systems.

Think of it like translating a song into sheet music. The music (binary data) becomes text (Base64) that can be written down, emailed, or embedded anywhere text can go — and then played back (decoded) perfectly on the other end.

When to Use Base64 Encoding

1. Data URIs for Images

Embed small images directly in HTML or CSS using data URIs. This eliminates a separate HTTP request, which can speed up page loading for icons and tiny graphics. The format looks like:

<img src="data:image/png;base64,iVBORw0K..."/ >

Important: Base64 increases file size by ~33%, so only use it for images under ~5KB. For larger images, regular file serving with HTTP/2 multiplexing is more efficient.

2. API Authentication

HTTP Basic Authentication encodes username:password as Base64. Many REST APIs use Base64-encoded credentials in the Authorization header. While it looks scrambled, remember: Base64 is not encryption — always use HTTPS with Basic Auth.

3. Email Attachments (MIME)

Email was designed for text, not binary files. MIME (Multipurpose Internet Mail Extensions) uses Base64 to encode file attachments so they can travel through email servers safely. Every email attachment you've ever sent or received was Base64-encoded at some point.

4. JSON Web Tokens (JWT)

JWTs use Base64URL encoding (a URL-safe variant of Base64) for their header, payload, and signature sections. If you've ever decoded a JWT on jwt.io, you were decoding Base64.

5. Storing Binary in Text-Based Systems

Need to store an image in a JSON field? A PDF in a database text column? Base64-encode it first. Many systems that only accept text (like localStorage in browsers) work with Base64-encoded binary data.

Common Mistakes to Avoid

• Using Base64 for large files.A 10MB image becomes ~13.3MB in Base64. That's 33% more data for no benefit. Use it for small payloads only.
• Thinking it's encryption.Base64 provides zero security. Anyone can decode it instantly. Never use Base64 to "protect" sensitive data.
• Forgetting the data prefix. When embedding images as data URIs, include the MIME type: data:image/png;base64,... not just the Base64 string.
• Mixing up Base64 and Base64URL.URLs can't contain + or / characters. Use Base64URL (which replaces them with - and _) for URL-safe contexts.

How to Encode and Decode Base64

1. To encode: Paste your text or upload a file into our Base64 tool. The encoded output appears instantly — copy it for use in your HTML, CSS, API request, or email.
2. To decode:Paste a Base64 string into the tool. If it started as text, you'll see the original text. If it started as a file, you can download the decoded binary.
3. Image to Base64: Use our dedicated Image to Base64 converter for generating data URIs from image files. Perfect for embedding icons and small graphics directly in your code.

Quick Reference