🧪 Dev

Data URI Parser

Break a data: URI into mediatype, parameters, base64 flag and payload. Shows decoded byte size of the content.

data: URI

Data URI: the file that travels inside the address

A data URI carries the content in the address itself rather than pointing at where to fetch it. The form comes from RFC 2397 and has four parts: the data scheme, the media type, the base64 marker when present, and after the comma the content. Paste a value and the page separates all of it, reports the real size in bytes and shows the content when it is text.

One detail that yields real savings: base64 is not compulsory. Without it the content goes percent-encoded, and for a payload heavy in ASCII — an SVG, say — that usually comes out smaller, because base64 inflates everything by a third while percent-encoding only pays for the characters that need escaping. For binary images the arithmetic reverses and base64 wins.

The limitation to keep in mind is caching. Since the bytes are part of the document, they come down again on every load, with no cache entry of their own — a good deal when each request cost a connection, and a bad one once HTTP/2 started multiplexing. On top of that, navigating to a data URI in the address bar has been blocked in browsers since 2017, because it was a phishing vector.

Frequently asked questions

What is the default media type?

When the field is omitted, the standard says to assume text/plain with charset US-ASCII. That means a typeless data URI carrying UTF-8 can be misread, so it is worth always declaring the charset for text content beyond ASCII.

Is there a size limit?

The standard sets none, but every browser has its own, and context changes the limit: an image attribute, a stylesheet and the address bar do not behave alike. As a rule of thumb, a data URI pays off up to a few kilobytes — beyond that, serving the file and letting the cache work is better in almost every scenario.

Do I need to allow data: in the security policy?

You do, and it is the commonest oversight: the content policy blocks data URIs by default in the directives that matter. For inline images you must allow data: in img-src. Avoid allowing it in script-src, because then the policy stops protecting against script injection.

Related Tools

📋

Content-Type Parser

Decompose a Content-Type header into mediatype, charset, boundary and other parameters. Useful when debugging APIs and uploads.

📦

multipart/form-data Parser

Paste a multipart/form-data body with its boundary and inspect each part (Content-Disposition, filename, Content-Type, size).

🍪

HTTP Cookie Parser

Paste a Set-Cookie header and inspect name, value, Domain, Path, Expires, Max-Age, HttpOnly, Secure and SameSite separately. Browser-only.

🔑

Authorization Header Parser

Identify the scheme (Basic, Bearer, Digest) of an Authorization header and extract the payload, decoding Basic from base64.

🔍

Pix Decoder

Decode Brazilian Pix BR Code (text starting with 0002...) extracting key, amount, beneficiary, city and identifier.

🔑

Basic Auth Generator

Generate the HTTP `Authorization: Basic <base64>` header from username and password. Useful to test APIs with basic auth via curl, Postman or fetch. Everything in your browser.