DeveloperApril 2026 · 6 min read

How to Encode and Decode Base64 (With Examples)

Base64 encodes binary data as ASCII text, making it safe to transmit through systems that only handle text — email, JSON, URLs, and HTML. It's not encryption (anyone can decode it) and it increases size by 33%, but it's essential for embedding images in CSS, sending file attachments, and working with APIs.

🔀

Try the Base64 Encoder

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01What Is Base64?02Base64 in JavaScript03Common Use Cases04When Not to Use Base64

⚡ Key Takeaways

Encode and decode Base64 strings in JavaScript, Python, and the command line.
What Is Base64?.
Covers base64 in javascript.
Covers common use cases.
When Not to Use Base64.

What Is Base64?

Base64 converts binary data into a string using 64 characters: A-Z, a-z, 0-9, +, and /. Every 3 bytes of input become 4 characters of output, with = padding at the end if needed. The name comes from the 64-character alphabet. Base64 is used because many protocols and formats (email, JSON, XML, CSS) can only transport text characters safely. Binary data like images, fonts, or encrypted payloads would be corrupted without encoding.

Base64 in JavaScript

Browser JavaScript uses btoa() and atob():

💡 Tip

Use 3+ color stops instead of 2 to avoid the muddy gray band that appears in the center of complementary-color gradients.

// Encode

const encoded = btoa('Hello World'); // 'SGVsbG8gV29ybGQ='

// Decode

const decoded = atob('SGVsbG8gV29ybGQ='); // 'Hello World'

For Unicode strings, encode to UTF-8 first:

const encoded = btoa(unescape(encodeURIComponent('Héllo')));

Node.js uses Buffer:

Buffer.from('Hello').toString('base64');

Buffer.from('SGVsbG8=', 'base64').toString();

Common Use Cases

Data URIs in CSS: embedding small images directly in stylesheets avoids an HTTP request. Format: url(data:image/png;base64,iVBOR...). JWT tokens: the header and payload of a JWT are Base64URL-encoded (a URL-safe variant using - and _ instead of + and /). Email attachments: MIME encoding uses Base64 to embed binary files in text-only email. API payloads: sending binary data (files, images) in JSON request bodies.

⚠ Warning

CSS gradients used as backgrounds cannot be animated with standard transitions. Use background-size animation or @property registered custom properties instead.

When Not to Use Base64

Base64 increases data size by 33%. Don't use it for large files — serve them as binary with proper Content-Type headers instead. Don't use it for encryption or security — Base64 is encoding, not encryption. Anyone can decode it. Don't embed large images as data URIs — the Base64 string can't be cached independently and bloats your CSS. For quick encoding/decoding, use the Base64 Encoder tool — paste any text or file and get instant results.

Frequently Asked Questions

What is Base64 encoding?+

Base64 converts binary data into ASCII text using a 64-character alphabet (A-Z, a-z, 0-9, +, /). It's used to safely transmit binary data through text-only channels like email, JSON, and URLs.

Is Base64 encryption?+

No. Base64 is encoding, not encryption. Anyone can decode a Base64 string — it provides no security. Use actual encryption (AES, RSA) for sensitive data.

Why does Base64 increase file size?+

Base64 converts every 3 bytes of input into 4 characters of output — a 33% size increase. This is the tradeoff for text-safe representation of binary data.

Try it yourself

Use the Base64 Encoder — free, no signup required.

⚡ Open Base64 Encoder

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading