decoder.tools

Data URI Parser

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

Web, API & TokensFree
INPUT
OUTPUT

The result appears here as you type.

Decoding runs in your browser. What you paste is not sent to a server.

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

Input
data:text/plain;charset=utf-8;base64,SGVsbG8sIHdvcmxkIQ==
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:

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

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
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

SpecificationRFC 2397, WHATWG Fetch "data: URL processing"
Formatdata:[mediatype][;base64],data
Default typetext/plain;charset=US-ASCII
Size costAbout +33% when Base64-encoded

Frequently asked questions

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.

Last reviewed · found a mistake? contact@decoder.tools · view as markdown