# From image to Base64 and JWT to JSON: 6 conversions in browser

> 6 online encoders and decoders free: Base64 (RFC 4648), URL (RFC 3986), HTML entities, JWT decode, Unicode escape, image to Data URI.

Free in-browser tool (no upload): https://www.mauriziofonte.it/tools/encoder-decoder-online

Six encoders/decoders in one page: **Base64** (RFC 4648), **URL encoding** (RFC 3986), **HTML entities**, **Unicode escape**, **JWT decode** (claim reading, no signature verify), **image to Data URI**. Fully: input never leaves the browser, images never go up to a server.

## How to use the encoder/decoder

1. **Pick the tab** - Each tab is an independent function: Base64, URL, HTML entities, Unicode, JWT, Image to Data URI. Tab-specific options (URL-safe, named/numeric entities) appear inside the relevant tab.
2. **Paste the input or drop a file** - For text tabs, paste into the input area. For image-to-data-uri, drop an image (PNG, JPEG, GIF, WebP, SVG) onto the dropzone or use the file picker.
3. **Encode or decode** - The first five tabs work both ways. The image tab is one-way (binary file to text Data URI). To recover the file from a Data URI, just paste it in the browser address bar.
4. **Copy or swap** - The Copy button pushes the result to your clipboard. The Swap I/O button moves the output back to the input area, useful for repeated encoding/decoding (e.g. Base64 of Base64, common in nested payloads).

## Six tools in one tab

**Daily operations in one place.** Base64 decode, URL encoding, HTML escape, JSON escape, UTF-8 conversion and Data URI inspection are operations every developer does multiple times a day. Having them all already loaded in the same tab eliminates the switch between tools and the first-load overhead of opening a different web page each time.

**Image-to-Data-URI directly in the browser.** Many similar web tools upload the file to a server, convert it there, return the Data URI: the sensitive image (product screenshot, unreleased logo, personal picture) transits through a third-party backend. Here the file is read via `FileReader.readAsDataURL()` directly in the browser, with no external transfer. The 10 MB limit prevents tab freezes on accidental drops of huge files; on modern machines you could technically push to 50-100 MB.

**JWT decode in read mode.** The tool decodes header and payload (Base64URL, JSON claims) but **does not verify the signature**: verification would require the backend's HMAC secret or RSA/ECDSA public key, which have no business transiting through a generic utility. For HS256 signature verification in WebCrypto and the dedicated claim explainer, see the [JWT decoder](/tools/jwt-decoder); for the full security audit (alg=none, weak HS256, missing claims, oversized lifetime, kid injection) the dedicated tool is the [JWT security audit](/tools/jwt-security-audit).

## Glossary

- **Base64**: Binary-to-text encoding using a 64-character alphabet (A-Z, a-z, 0-9, +, /). RFC 4648. Overhead ratio: 33% (3 input bytes -> 4 output chars).
- **Base64URL**: URL-safe variant of Base64 (RFC 4648 §5): + replaced by -, / replaced by _, padding = optional. Used in JWTs and many API tokens.
- **URL encoding**: Conversion of non-ASCII and reserved characters into %HH sequences (RFC 3986). Subcategories: encodeURI (preserves URL syntax characters), encodeURIComponent (also encodes : / ? # &).
- **HTML entities**: Textual representation of Unicode characters in HTML: named (`é`) or numeric (`é`, `é`). HTML5 defines ~2200 named entities in the WHATWG spec.
- **Data URI**: URI that embeds the data directly inside the scheme (RFC 2397): `data:[mime];base64,[payload]`. Replaces a separate fetch for the file, handy for small assets (icons, font subsets, badges). Practical limit: 32 KB on Internet Explorer, 256 KB on Chrome/Firefox.
- **JWT**: JSON Web Token (RFC 7519): three Base64URL segments separated by dots. Header: algorithm + type. Payload: claims (iss, sub, exp, iat...). Signature: HMAC or RSA/ECDSA. Decoding the non-signature parts is trivial and does not imply authenticity.

## Frequently asked questions

### Are the images I convert to Data URI uploaded to a server?

No. The browser reads the file with `FileReader.readAsDataURL()`, obtains the Data URI string in memory and renders it directly; no transfer to the server takes place during the operation.

### Does the JWT decoder verify the signature?

No, deliberately. Verification requires the key (HMAC secret or RSA/ECDSA public key) which has no business in a generic web tool. Signature verification is something done in the consumer application, not in a generic decoder. For full security audits we have a dedicated tool on the roadmap (*JWT Security Audit*).

### Is there a max size for text input?

Not enforced by the tool. The limit is the tab memory. For Base64 of binary files (e.g. PDFs) we recommend pasting at most a few MB to keep the UI snappy. For larger files, a shell command is more efficient: `base64 -w 0 file.pdf` on Linux/macOS, `certutil -encode file.pdf out.txt` on Windows.

### Why does HTML entity decoding not recognize some named entities?

HTML5 defines ~2200 named entities. The native browser (via DOM parsing) supports them all, but we use a manual map to avoid the side effects of DOM parsing. The supported entities cover 99% of cases (Latin Extended, math symbols, typographic symbols, arrows). For full coverage: paste the text into HTML, set it as `innerHTML` on a node and read its `textContent` in DevTools.

### Practical difference between encodeURI and encodeURIComponent?

`encodeURI` preserves URL syntax characters (`: / ? # & = +`). Use it when you already have a formed URL and just need to make literal parameters safe. `encodeURIComponent` also encodes those characters. Use it for a single query string value (e.g. `q=all&ok` becomes `q=all%26ok`).

### Can I use this tool for production credentials or secrets?

For generating/decoding test tokens or secrets locally: yes, it is private by design. For rotating production credentials: the right flow is a secret manager (Vault, AWS Secrets Manager, Doppler). A web tool leaves no trace, but if you paste a prod secret in the field, it will not come back. Operator's discretion.

### Does it work on Safari iOS?

Yes. All the APIs used (FileReader, atob, btoa, TextEncoder, encodeURI/encodeURIComponent) are supported on Safari iOS 11+. Drag-and-drop on iOS works from the photo picker, not the file system as on desktop. Tapping the dropzone opens the native picker.

### Is there an API endpoint to call these functions from a script?

No, and we will not add one: everything is by design. For scripting: in Node.js/PHP use the native APIs (`Buffer.from(s, 'base64')`, `base64_encode()`). It is three lines, no reason to wrap them in an HTTP API.

---
Tool by Maurizio Fonte, senior backend engineer. All tools: https://www.mauriziofonte.it/tools/