If you've ever embedded an image in a CSS file, read a JWT token, or sent a file via a REST API, you've used Base64. But what is it, why does it make data larger, and when should you use it?
The Core Problem Base64 Solves
Binary data contains every possible byte value (0–255). But many protocols — email (SMTP), HTML, XML, JSON, and older HTTP headers — were designed to carry text only. Some byte values in binary data get misinterpreted as control characters, line breaks, or encoding markers.
Base64 solves this by representing any binary data using only 64 safe characters: A–Z, a–z, 0–9, +, and /.
How Base64 Works
Base64 takes 3 bytes of input and produces 4 characters of output:
- 3 bytes = 24 bits
- 24 bits split into 4 groups of 6 bits each
- Each 6-bit group maps to one of 64 characters (2⁶ = 64)
That 3→4 ratio is where the 33% size increase comes from:
``
3 bytes input → 4 chars output
100 KB file → ~133 KB encoded
1 MB image → ~1.33 MB as Base64
`
Common Uses
1. Data URIs in HTML and CSS
<code>html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">
</code>
<code>css
<p>.icon {</p>
<p>background-image: url('data:image/svg+xml;base64,PHN2Zy...');</p>
<p>}</p>
</code>
2. JWT Tokens
JWT tokens are three Base64URL-encoded segments separated by dots. Decode the first two to read the header and payload.
3. HTTP Basic Auth
<code>
<p>Authorization: Basic dXNlcjpwYXNzd29yZA==</p>
</code>
This is Base64(username:password). Not encryption — anyone can decode it. Always use HTTPS.
Quick Reference by Language
JavaScript (browser)
<code>javascript
<p>btoa("hello world") // encode</p>
<p>atob("aGVsbG8gd29ybGQ=") // decode</p>
</code>
Python
<code>python
<p>import base64</p>
<p>base64.b64encode(b"hello world").decode()</p>
<p>base64.b64decode("aGVsbG8gd29ybGQ=")</p>
</code>
Java
<code>java
<p>import java.util.Base64;</p>
<p>String encoded = Base64.getEncoder().encodeToString("hello".getBytes());</p>
<p>byte[] decoded = Base64.getDecoder().decode(encoded);</p>
</code>
Command line
<code>bash
<p>echo -n "hello" | base64 # encode</p>
<p>echo "aGVsbG8=" | base64 -d # decode</p>
</code>`
What Base64 Is NOT
- Not compression — it makes data ~33% larger
- Not encryption — anyone can decode it
- Not hashing — it's fully reversible
For quick encode/decode in the browser — including URL-safe mode and batch processing — try the Base64 Encoder & Decoder on SnappyTools. No signup, runs entirely in your browser.
Originally published at https://snappytools.app/base64-encoder-decoder/