Web & Network

Data URI Generator

Encode files or text into data URIs for embedding inline in HTML, CSS, or JavaScript.

Drop a file here or click to browse

Any file type supported

How to use this tool

  1. Pick a mode with the tabs at the top — File Upload to encode a file, or Text Input to encode raw text.
  2. In File Upload mode, drop a file onto the drop zone or click it to browse and select a file.
  3. In Text Input mode, type or paste your text, then choose a MIME type from the dropdown (for example text/html or application/json).
  4. The generated data URI appears instantly in the Generated Data URI box, along with its length.
  5. Click Copy URI to copy the full data URI to your clipboard.

Why this tool is helpful

Embed assets inline

Put images, SVGs, fonts, or other files directly into HTML via src, CSS via url(), or an <a href> — no separate file needed.

Cut HTTP requests

Small assets become self-contained, so a page can render without extra round trips to the server — faster and simpler to cache.

Build single-file deliverables

Bundle icons and logos inline for HTML emails, demos, or prototypes that stay in one portable file.

Carry binary as text

Base64 turns arbitrary bytes into a plain string you can paste into JSON, CSV, databases, or source code without corruption.

Generate SVG data URIs

Type SVG markup and select image/svg+xml to produce a ready-to-paste data URI for backgrounds or src.

Stay private

Everything runs in your browser. Your files and text are never uploaded, stored, or sent to a server.

FAQ

What is a data URI?

A data URI is a self-contained string in the form data:[<mime>][;base64],<data> that embeds content inline. Browsers accept it anywhere a URL is expected, such as src, href, or url().

How does File Upload mode encode my file?

It reads the file with FileReader.readAsDataURL, which base64-encodes the file's bytes and prefixes them with the file's own MIME type (from file.type).

How does Text Input mode encode my text?

Your text is converted to its UTF-8 bytes and base64-encoded with btoa, then prefixed with the MIME type you chose from the dropdown.

Is base64 the same as encryption?

No. Base64 is a reversible encoding with no key and no security. Anyone can decode a data URI back to the original bytes, so don't rely on it to hide secrets.

Why is the data URI longer than my input?

Base64 encodes 3 bytes as 4 characters, adding roughly 33% overhead. The data:, MIME type, and ;base64, prefix add a little more.

Which MIME type should I choose?

Pick the type that matches your content — text/plain, text/html, text/css, application/json, text/csv, or image/svg+xml. Choosing the right one lets browsers interpret the data correctly.

Does any of my data leave my browser?

Never. Encoding happens entirely in JavaScript on your machine. Your files and text are not uploaded, logged, or sent to any server.