Data URI Encoder

How to use

1. 1Choose Encode text or Encode file. Text mode is best for SVG, CSS, JSON, JS, HTML, Markdown, and plain text. File mode handles any local file up to 15 MB.
2. 2In text mode, paste your content, pick a MIME type from the presets or enter a custom one, and optionally set a charset (utf-8 is added by default for text formats).
3. 3In file mode, drag and drop the file onto the dashed area or click Choose file. The MIME type is detected from the file extension; override it in the text box if needed.
4. 4Pick an encoding tab: Auto picks the smaller of base64 and percent, Base64 forces the universal form, Percent forces the shorter text-friendly form (binary files fall back to base64 automatically).
5. 5Copy the data: URI, or use the ready-to-paste CSS, HTML img, font-face, audio/video, or download snippet. Read the size panel to see input bytes, output length, and overhead compared to the raw payload.

About this tool

Data URI Encoder builds RFC 2397 data: URLs from text or from a local file. Pick a MIME type from common presets (text/plain, image/svg+xml, text/html, text/css, text/javascript, application/json, text/markdown, text/csv, application/xml) or enter any custom media type, append an optional charset, and the tool emits both a base64-encoded form (data:[mime];base64,...) and a percent-encoded form (data:[mime],...). Auto mode selects whichever is shorter for the given payload, which usually means percent for SVG, JSON, CSS, JS, and ASCII-heavy text, and base64 for binary files like PNG, JPEG, WebP, AVIF, PDF, woff2 fonts, MP3 audio, or MP4 video. File mode supports drag and drop, reads up to 15 MB per file with the browser FileReader, auto-detects the MIME type from the extension when the file's Content-Type is missing, and lets you override it if needed. The result panel shows the input byte size, the output character length, the encoding overhead percentage compared to the raw payload, and the size of the alternative encoding so you can compare base64 against percent at a glance. Ready-to-paste snippets are generated for the appropriate context: a CSS background-image rule for images and SVG, a @font-face block with the correct format() hint for fonts, an audio/video source tag with type, a PDF iframe, an img tag, and an anchor with the download attribute for arbitrary downloads. Text inputs are encoded as UTF-8 so emoji, accents, and CJK characters round-trip cleanly without surrogate pair issues. Renderable payloads (text, image, SVG, audio, video, PDF) get a live preview built from the exact bytes that feed the data URI, so you can confirm the result before copying. Useful for inlining icons into CSS to skip a network round trip, embedding small logos in email signatures, shipping a one-off font with a @font-face data URL, prototyping API responses without spinning up a server, sending a payload through a system that only accepts URLs, and pasting a quick share link that contains the whole document. Everything runs in your browser; pasted text, dropped files, and the generated URIs never leave your device, which keeps secret keys, internal mockups, and private documents on your machine.

Free to use. Works in your browser. No signup, no login.