Why it matters
Base64 turns any data into plain text, which is how images get embedded in CSS, how email attachments travel and how many APIs pass tokens. The browser's built-in btoa() breaks on any character outside Latin-1, including £ and emoji.
This encoder handles UTF-8 properly, supports the URL-safe variant used by JWTs, and makes data URIs from files with the right type, plus a warning when a file is too big to be worth inlining.
How it works
- InputText or a small file
- In your browserUTF-8 bytes encoded, or decoded back
- OutputBase64, a data URI and ready CSS or HTML
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Icon | SVG | URL-encoded URI | Base64 URI |
|---|---|---|---|
| json.svg | 481 | 548 | 670 |
| regex.svg | 534 | 607 | 738 |
| hash.svg | 422 | 489 | 590 |
| time.svg | 515 | 588 | 714 |
| uuid.svg | 545 | 618 | 754 |
How to use it
- For text, type in either box: the other updates.
- Tick URL-safe if the result goes in a URL or token.
- For a file, open the File tab and choose it.
- Copy or download the result.
FAQ
Is Base64 encryption?
No. Anyone can decode it. It's a way of writing data as text, not a way of hiding it.
When should I use a data URI?
For tiny assets, such as small icons under about 4 KB, to save a request. Larger files are better as normal files the browser can cache.
Why is Base64 bigger?
It uses 4 characters for every 3 bytes, so it's about 33% larger than the original.
Is my file uploaded?
No. It's read in your browser.
