convert

File to Data URI

Encode an image, font or any file as a data: URI ready to inline in HTML or CSS.

Runs on your deviceBatch readyNew

Add a file

JSON, XML, text or any file you want to encode, decode or hash.

Drop a file here
Drag and drop, or choose files

Choose an output

Encode an image, font or any file as a data: URI ready to inline in HTML or CSS.

About File to Data URI

This tool encodes a file as a data: URI, in the form data:<mime type>;base64,<data>, that you can paste directly into an HTML src attribute or a CSS url(). The MIME type is taken from the file, or guessed from its extension, and the summary shows the size before and after encoding.

When it helps

  • Inlining a small icon or logo in CSS to avoid an extra HTTP request.
  • Embedding images in a single-file HTML report or email template.
  • Including a small font or image in a JSON config or test fixture.

Tips

  • Base64 adds about 33 percent to the size, and inlined assets cannot be cached separately. Keep data URIs for small files.
  • For SVG, a URL-encoded data URI is often smaller than Base64, but this tool always produces Base64, which works everywhere.
  • If the MIME type comes out as application/octet-stream, browsers may not display the file. Edit the type in the output, for example to image/png.

Good to know

Quick answers about file to data uri in your browser.

In HTML, put it in the src attribute: <img src="data:image/png;base64,...">. In CSS, use background-image: url("data:image/png;base64,...").

Modern browsers handle large data URIs, but they bloat your HTML or CSS and slow parsing. Some email clients strip them entirely, so test before relying on them in email.

Yes. There is no sign-up, no watermark and no limit on how many files you process.

No. Files are read and processed locally in your browser, so they never leave your device.

Related tools

DEVJSON FormatterPretty-print and validate a JSON file with 2-space indentation.DEVJSON MinifierStrip whitespace from a JSON file to shrink it.DEVJSON to XMLConvert a JSON file into an XML document.DEVBase64 EncodeEncode any file into a Base64 text string.DEVBase64 DecodeDecode a Base64 text file back into raw bytes.DEVFile HashCompute SHA-256, SHA-1 and SHA-512 checksums for a file.DEVURL EncodePercent-encode the contents of a text file for safe URLs.DEVURL DecodeDecode percent-encoded text back to readable text.DEVNewJSON to YAMLConvert JSON to clean, readable YAML for configs, Kubernetes manifests and CI files.

Part of the Developer Utilities collection.