# Data URI Parser

> Split a data: URI into its MIME type, encoding and payload, and decode the payload.

- Page: https://decoder.tools/data-uri-parser
- Category: Web, API & Tokens
- Status: live, runs in the browser
- Last reviewed: 2026-10-23

A data URI parser takes a `data:` URL apart: the MIME type, the optional `;base64` flag and the payload after the comma. It then decodes the payload, showing text directly and binary as hex.

## Example

```text Input
data:text/plain;charset=utf-8;base64,SGVsbG8sIHdvcmxkIQ==
```

```text Output
Hello, world!
```

The parser also reports **MIME type: text/plain**, **Encoding: base64** and **Payload size: 13 bytes**.

## How data URIs work

A data URI (RFC 2397) embeds a whole file inside a URL, so an image, font or script can be included without a separate request. The format is:

```text
data:[<mediatype>][;base64],<data>
```

- **Media type**, such as `image/png` or `text/html;charset=utf-8`. If it's missing, the default is `text/plain;charset=US-ASCII`.
- **`;base64`** means the data is Base64. Without it, the data is percent-encoded text, as in `data:,Hello%2C%20world`.
- **Data** is everything after the first comma.

Data URIs show up in CSS (`background-image: url(data:image/svg+xml,…)`), in HTML `<img src>`, in email signatures, in JSON API responses and in canvas exports (`canvas.toDataURL()`). They're also a known phishing trick, since a whole fake page can be packed into one `data:text/html` link.

## How to use the data URI parser

1. Paste the full URI, starting with `data:`.
2. Read the MIME type, the encoding and the payload size.
3. Text types (`text/*`, JSON, XML, SVG, JavaScript) are shown as text. Other types show the first bytes in hex, so you can check the file signature: `89 50 4e 47` is PNG and `ff d8 ff` is JPEG.

## Decode a data URI in code

```js JavaScript (Node.js 18+)
const res = await fetch("data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==");
console.log(res.headers.get("content-type"), await res.text()); // text/plain Hello, world!
```

```python Python
import base64

uri = "data:text/plain;charset=utf-8;base64,SGVsbG8sIHdvcmxkIQ=="
header, data = uri.split(",", 1)
print(header[5:], base64.b64decode(data).decode())
```

## Data URIs at a glance

| | |
|---|---|
| Specification | RFC 2397, WHATWG Fetch "data: URL processing" |
| Format | `data:[mediatype][;base64],data` |
| Default type | `text/plain;charset=US-ASCII` |
| Size cost | About +33% when Base64-encoded |

## FAQ

### Why does my data URI show hex instead of the image?

This tool shows binary payloads as hex bytes so you can check the format and size. To view an image, paste the data URI into your browser's address bar or use it as an `<img src>`.

### Is there a size limit for data URIs?

The spec has none, but browsers do. Chrome and Firefox accept very large data URIs (many megabytes), but long URIs slow down parsing. They're best for small assets under a few kilobytes.

### Why do browsers block top-level data: URLs?

To stop phishing. Chrome, Firefox and Safari no longer let a page navigate the top-level window to a `data:text/html` URL, because attackers used them to show fake login pages with no real domain in the address bar.