Developer / Encoding
Data URI Generator
Turn any file into a data URI, with ready-to-paste CSS and HTML snippets, a smaller URL-encoded option for SVG, and how much larger the encoded file is.
Data URI Generator: A data URI (RFC 2397) puts a file's contents directly into a link or stylesheet, saving a separate request. Base64 encoding turns every 3 bytes into 4 characters, so files grow by about a third; SVG, being text, can instead be percent-encoded, escaping only characters such as %, #, <, and >, which is usually smaller. Runs 100% locally in your browser with zero server file uploads.
- Category
- Developer tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
The file is read in your browser and never uploaded.
Where data URIs work
Data URIs work in img src, CSS url(), link href for icons, and download links. Browsers block pages from opening a data URI as a top-level page, and a strict Content Security Policy must allow data: for images or styles that use them.
To encode text rather than files, use the Base64 encoder; for images with a ready Base64 string, the image to Base64 tool.
Size overhead
Base64 adds a third to the file size, but text compression on the server (gzip or Brotli) wins much of it back, since the encoded text compresses well. The real costs are that the data cannot be cached separately and is downloaded again with every page or stylesheet that contains it.
How to use it
- Choose or drop a file; images are previewed.
- For SVG files, pick URL-encoded or Base64 encoding.
- Copy the data URI or the CSS or HTML snippet.
Privacy & limitations
The file is read in your browser and never uploaded.
Related tools
Frequently asked questions
When should I use a data URI?
For small files used once, such as icons under a few kilobytes. Larger files are better served separately, where the browser can cache them and load them in parallel.
Why use URL encoding for SVG?
It keeps the SVG readable and is usually smaller than Base64; double quotes become single quotes so the result fits inside url("…") or an HTML attribute.
Is there a size limit?
Modern browsers accept data URIs of many megabytes in images and stylesheets, but large ones slow down parsing and make pages heavy.
Free tool · runs in your browser · no account required