Data URI Generator

Convert any file or text into a data: URI with the right MIME type, as Base64 or percent-encoded, plus ready <img> and CSS background snippets. Runs locally.

Source

Drop a file here or click to select

MIME type

Base64 encoding (turn off to percent-encode text and SVG)

What is Data URI Generator?

A data URI embeds a file directly inside HTML, CSS or JSON as data:<mime>;base64,<data>, so no separate request is needed. This tool converts any file (images, fonts, SVG, PDFs…) or typed text into a data URI, detects the MIME type, lets you choose Base64 or percent-encoding, and gives you matching HTML and CSS snippets.

How to use Data URI Generator

Choose File and drop a file, or choose Text and type the content.
Check or edit the MIME type.
Leave Base64 encoding on for binary files; turn it off to percent-encode text and SVG (often smaller).
Copy the Data URI or the HTML / CSS snippet.

Example

Input

Text: Hello, World! (Base64 on)

Output

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

When to use Data URI Generator

Use data URIs for small assets: icons, tiny SVGs, placeholder images, fonts in single-file demos or email templates, and test fixtures. Avoid them for files larger than a few kilobytes on websites: Base64 adds about 33% to the size and the embedded data cannot be cached separately from the page or stylesheet.

How Data URI Generator works

The file is read as bytes in the browser. The MIME type comes from the browser or the file extension. With Base64 the bytes are encoded with the standard alphabet (RFC 4648) and written as data:<mime>;base64,… (RFC 2397). Without Base64 the content is decoded as UTF-8 and escaped with encodeURIComponent, and ;charset=utf-8 is added for text types. A preview is shown for images, and the size of the result is displayed.