Data URI Generator

How to create a data URI

1. Choose a mode. From text (the default) encodes what you type or paste. From file takes a dropped, pasted or picked file of any type. Parse goes the other way and takes a URI apart.
2. In From text, set MIME type (for example text/css or application/json), a Charset and the Encoding: Base64 or URL-encoded. In From file, the MIME type is filled in from the file and can be edited.
3. Pick the Output format: Data URI, CSS url(), HTML <a> with a download name, or Markdown. HTML <img> appears for images and @font-face for fonts.
4. Press Copy output. Download file saves the payload itself, and Save as .txt stores the output text.

Under the buttons, Payload is the size of the data, URI length the size of the result, and Overhead the difference in percent.

The data URI syntax

A data URI packs a whole file into a URL:

data:[<media type>][;charset=<charset>][;base64],<data>

A few examples:

The comma is mandatory, even when the data is empty: data:, is a valid, empty URI.

Base64 or URL-encoded

Both encodings produce a valid URI; they differ in size and readability.

Plain ASCII text is shorter URL-encoded, and you can still read it in the source. Every non-ASCII byte costs three characters (é is %C3%A9), so text in other scripts quickly favours Base64. For images, fonts, PDFs and other binary files, use Base64; the generator warns if you pick URL encoding for binary data.

The URL encoding here is conservative: letters, digits and - . _ ~ ! $ * + , ; = : @ / ? stay as they are, everything else is escaped, including #, %, quotes, parentheses and spaces. A raw # would end the URI, because browsers read it as the start of a fragment. For SVG there is a third, shorter option on SVG to Data URI.

Where data URIs work

• Images in <img src>, CSS background-image, <link rel="icon"> and the poster of a video.
• Fonts in @font-face src, handy for one small icon font. The generator builds the rule for you when the MIME type is a font.
• Downloads through <a href="data:..." download="report.csv">, for files generated in a page without a server.
• Stylesheets and scripts loaded with <link href> or <script src>, when the page’s Content Security Policy allows data: for them.
• Test fixtures and JSON payloads that need a small file inline.

They do not work everywhere. Chrome and Firefox block page-initiated navigation of the whole tab to a data: URL, so a link to data:text/html,... does nothing when clicked. A Content Security Policy must list data: in img-src, font-src or the relevant directive. Many webmail clients, Gmail among them, drop data URI images entirely; see Base64 in email.

Size and performance

Base64 makes binary data about 33% larger, and the URI repeats with every page or stylesheet that contains it, without its own cache entry. That trade is good for small assets of a few kilobytes and bad for photos. Data URI performance goes through the numbers. For images in particular, Image to Base64 can resize and convert before encoding.

Build a data URI in code

URL-encoded text in JavaScript:

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

Base64 JSON in Python:

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

More in Base64 in JavaScript and Base64 in Python. To inspect a data URI you found somewhere, use the Data URI Parser.

FAQ