Data URI builder
Turn any small asset into a data:[mime];base64,... URI for embedding in CSS, HTML, JSON, or a config file. Useful for icons, placeholders, email signatures, and offline bundles.
Ready.
How to use
- Choose Source — drop a file, paste text, or paste SVG markup.
- The tool detects MIME automatically; override it under MIME if needed (e.g. force
image/svg+xml; charset=utf-8). - Pick Encoding — Base64 (works everywhere, +33% bigger) or URL-encoded (only for text/SVG, often smaller for SVG).
- Output appears below. Use the Copy as menu: raw URI, CSS
url(...), HTML<img src>, or JSON value. - Size estimate vs the original is shown — if it grew >2×, reconsider whether inlining is worth it.
When inlining beats linking
- Tiny icons in CSS — saves an HTTP round-trip, render-blocks less.
- Email signatures — many clients block external images but show inlined ones.
- Single-file deliverables — bundle assets into one HTML file for offline use.
- Caching: inlined assets re-download with every page; large files defeat browser caching.
FAQ
Why is my SVG bigger as Base64 than URL-encoded?
SVG is text and contains a lot of ASCII the URL-encoder leaves alone (letters, digits, basic punctuation). Base64 adds ~33% regardless. Try both and keep the smaller one.
Are there size limits in browsers?
Old browsers capped data URIs at ~32 KB; modern Chrome / Firefox / Safari handle multi-MB URIs but performance gets worse fast. If your URI is > 50 KB, link to the file instead.
Can I inline a PDF or video?
You can, but rarely should — the page payload balloons and the asset becomes uncacheable. Use a real URL.
Does this work offline?
Yes — everything runs in the browser, including the Base64 encoder.