BYTETOOLS

Data URI Generator

Turn any file into a base64 data: URI in your browser, with MIME override and ready-to-paste HTML img, CSS url() and favicon snippets. Nothing is uploaded.

Drop any file here or click to browseConverted locally — the file never leaves your browser.

What is the Data URI Generator?

The ByteTools Data URI Generator converts any file into a data:<mime>;base64,… URI — the format that lets you embed a file's entire contents directly inside HTML, CSS or JavaScript instead of referencing it by URL.

  • Works with any file type, not just images
  • Automatic MIME detection with manual override
  • Ready-to-paste <img>, CSS url(), favicon and @font-face snippets
  • Size warning where inlining hurts performance
  • Copy or download the full URI
  • 100% local conversion — the file never leaves your browser

How to use the Data URI Generator

  1. 1

    Drop any file onto the tool or click to browse.

  2. 2

    Check the detected MIME type and override it if needed.

  3. 3

    Copy the full data URI, or a ready-made HTML/CSS snippet.

  4. 4

    Heed the size warning for files over 100 KB before inlining.

About the Data URI Generator

The ByteTools Data URI Generator converts any file into a data:<mime>;base64,… URI — the format that lets you embed a file's entire contents directly inside HTML, CSS or JavaScript instead of referencing it by URL. Fonts, icons, small images and config blobs all inline this way, removing an HTTP request each.

Drop in a file and you get the complete URI plus ready-to-paste snippets matched to the file type: an <img> tag and CSS background for images, a favicon <link> for .ico files, a @font-face src for fonts. The MIME type is detected automatically and can be overridden — useful when a browser reports a generic application/octet-stream. A size warning appears past 100 KB, where inlining starts hurting page performance.

Unlike the image-only Image to Base64 tool, this one accepts any file type. Conversion happens 100% locally in your browser; the file is never uploaded anywhere.

Frequently asked questions

What is a data URI?

A data URI packs a file's content directly into a URL string: data:image/png;base64, followed by the file's bytes encoded in Base64. Browsers treat it like any other URL, so it works in img src, CSS url(), favicons and fetch — but the 'file' travels inside your document instead of being requested separately.

When should I use a data URI instead of a normal file?

Use them for small, rarely-changing assets — icons, tiny logos, inline fonts, email images where external references are blocked, or single-file HTML documents. Avoid them for large or frequently reused assets: the base64 form is ~33% bigger and cannot be cached independently of the page.

Why is my data URI larger than the original file?

Base64 encodes every 3 bytes of the file as 4 ASCII characters, adding roughly 33% overhead before compression. Gzip on your server claws some of that back, but a data URI is always bigger than the raw file — one of the trade-offs for saving an HTTP request.

Why would I override the MIME type?

Browsers detect the MIME type from the file extension and sometimes report a generic application/octet-stream for less common formats like .woff2 or .avif on older systems. Since the browser rendering your page trusts the type inside the URI, correcting it here ensures the asset is interpreted properly.

Is there a size limit for data URIs?

Modern browsers handle multi-megabyte URIs, but practical limits arrive sooner: CSS parsers, email clients and some proxies choke on very long lines, and page parse time grows with document size. Keeping inlined assets under ~100 KB — the threshold this tool warns at — is the widely used rule of thumb.

Is my file uploaded to create the URI?

No. The file is read and Base64-encoded by your browser's own FileReader API, entirely on your machine. Nothing is transmitted, so private documents and unreleased assets are safe.

Related tools