Super Boring Tools

Search tools

Find a tool by name or what it does.

Data URI Generator

Turn any file, image, or SVG into a ready-to-paste data URI, with CSS and img snippets.

Source

File
Drop a file or image here or click to browse
or paste from clipboard (Ctrl+V) · Any file up to 10 MB
Files stay in your browser. Nothing is uploaded.

How to create a data URI online

  1. Add your input

    Drop or browse a file or image, or switch to text mode and paste text or SVG markup into the box.

  2. Pick the encoding

    Keep the smart default or switch between Base64 and URL-encoded output for text and SVG, and set a MIME type if you need an exact one.

  3. Check the result

    See the full data URI, its encoded size and overhead, and a live preview when the input is an image, plus ready-made CSS and img snippets.

  4. Copy and paste

    Copy the data URI or a snippet with one click and paste it straight into your stylesheet or markup.

Why use this tool

Any file or pasted text

Drop a file or image, or paste text or SVG. The tool detects the type and builds a valid data URI automatically, with no button to press.

Base64 or URL-encoded

Binary files use Base64, which every browser understands. Text and SVG can use URL-encoding for a smaller result that stays readable.

Ready-to-paste snippets

Get the raw data URI plus a CSS background-image rule and an img src tag you can drop straight into your code.

SVG-aware encoding

SVG markup is encoded so characters like # and quotes stay valid, with an option to strip whitespace for a smaller URI.

Size and limit warnings

See the encoded size and overhead next to the original, with a warning when the URI grows big enough to bloat your CSS or HTML.

Runs entirely in your browser

Everything happens on your device. Nothing is uploaded, and no file or text is stored or logged.

About this tool

A data URI embeds a file directly inside your CSS, HTML, or JavaScript, so a small icon, font, or image loads with the page instead of as a separate request. This tool builds one from any input: drop a file or image, or paste text or SVG markup, and it detects the type, encodes the bytes, and returns a complete data URI along with copy-ready CSS and img snippets. It runs the moment you add input, with no button to press.

Binary files such as PNG, JPEG, WebP, and fonts are encoded as Base64, which every browser understands. Text and SVG can instead be URL-encoded, which is usually smaller and keeps the markup readable. For SVG the encoder protects the characters that would break a data URI, including the # in hex colors and the quotes around attributes, and an optional pass strips extra whitespace to shrink the result. You can also override the detected MIME type when you need an exact one.

Data URIs work best for small assets. Base64 makes a file about a third larger, and a very big URI can bloat your stylesheet and slow the first paint, so the tool shows the encoded size and warns when a URI gets large. For plain conversions or the reverse direction, see the Base64 encoder and the URL encoder; to turn vector art into a raster image before embedding it, try SVG to PNG. Everything is processed on your device, so your files and text never leave the browser.

Frequently asked questions

What is a data URI?
A data URI is a string that starts with data: and holds a file’s contents inline, so it can be embedded directly in CSS, HTML, or JavaScript instead of loading from a separate URL. It carries the MIME type and either Base64 or URL-encoded data.
When should I use a data URI instead of a file?
Data URIs are best for small, rarely changing assets like icons, tiny background images, or fonts, where saving an extra request is worth the inline size. For large files a normal link is usually faster, because inline data cannot be cached on its own and is re-downloaded with the page.
What is the difference between Base64 and URL-encoded output?
Base64 works for any file and is the only safe choice for binary formats like PNG or JPEG, but it makes the data about a third larger. URL-encoding keeps text and SVG readable and is often smaller, so the tool uses it by default for those types and falls back to Base64 for everything else.
Can I turn an SVG into a data URI?
Yes. Paste SVG markup or drop an .svg file and the tool builds a data URI, encoding the characters that would otherwise break it, such as the # in hex colors and the quotes around attributes. You can also strip whitespace to make the URI smaller.
How large can a data URI be?
Modern browsers accept very large data URIs, but big ones bloat your CSS or HTML and slow the first paint, and some older tools cap around 32 KB. The tool shows the encoded size and warns once a URI passes that mark, so you can decide whether to inline or link the file.
Is my file or text uploaded anywhere?
No. Reading the file, detecting its type, and building the data URI all happen in your browser. Your files and text never leave your device, are never sent to a server, and are not stored or logged.

Related tools