DEV Community

arenasbob2024-cell
arenasbob2024-cell

Posted on • Originally published at viadreams.cc

Base64 Encoding Explained: When, Why, and How to Use It

#beginners #security #tutorial #webdev

Base64 is one of those things every developer uses but few truly understand. Let's fix that.

What Is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data using 64 ASCII characters (A-Z, a-z, 0-9, +, /). It's not encryption. It's not compression. It's just a way to represent binary data as text.

Why Does Base64 Exist?

Many systems were designed to handle text, not binary data. Email (SMTP), JSON, XML, HTML attributes, and URLs all expect text. Base64 bridges this gap.

Common Use Cases

1. Data URIs in HTML/CSS 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..." alt="icon">
Enter fullscreen mode Exit fullscreen mode 
.icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);
}
Enter fullscreen mode Exit fullscreen mode

When to use: Small icons (< 2KB) where reducing HTTP requests matters.
When NOT to use: Large images. Base64 increases size by ~33%.

2. JWT Tokens

JWTs use Base64URL encoding (replacing +/ with -_) for the header and payload:

eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYWxpY2UifQ.signature
Enter fullscreen mode Exit fullscreen mode

3. API Authentication

Basic Auth sends credentials as Base64:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
Enter fullscreen mode Exit fullscreen mode

Important: This is NOT secure on its own. Always use HTTPS.

4. Embedding Binary in JSON 

{
  "file": "SGVsbG8gV29ybGQ=",
  "filename": "hello.txt",
  "contentType": "text/plain"
}
Enter fullscreen mode Exit fullscreen mode

Encoding in Different Languages

JavaScript (Browser):

btoa('Hello World')     // "SGVsbG8gV29ybGQ="
atob('SGVsbG8gV29ybGQ=') // "Hello World"
Enter fullscreen mode Exit fullscreen mode

Node.js:

Buffer.from('Hello World').toString('base64')
Buffer.from('SGVsbG8gV29ybGQ=', 'base64').toString('utf8')
Enter fullscreen mode Exit fullscreen mode

Python:

import base64
base64.b64encode(b'Hello World').decode()
base64.b64decode('SGVsbG8gV29ybGQ=').decode()
Enter fullscreen mode Exit fullscreen mode

Bash:

echo -n 'Hello World' | base64
echo 'SGVsbG8gV29ybGQ=' | base64 -d
Enter fullscreen mode Exit fullscreen mode

The 33% Size Overhead

Base64 encodes 3 bytes into 4 characters. This means every Base64-encoded payload is ~33% larger than the original binary. For a 1MB image, that's 1.33MB of Base64 text.

Implication: Don't Base64-encode large files in API responses. Use multipart uploads or file URLs instead.

Base64URL vs Base64

Standard Base64 uses + and /, which are special characters in URLs. Base64URL replaces them:

Standard URL-safe
+ -
/ _
= (padding) omitted

Quick Online Tool

Need to encode/decode Base64 quickly? Try DevToolBox Base64 Encoder - works entirely in your browser with support for text, files, and images.

More developer tools:

Top comments (0)