What is a Base64 data URI?
A data URI embeds a file directly inside a URL instead of pointing at one, using the form data:image/png;base64,iVBOR… Browsers treat it exactly like a fetched image, which means an inline image costs zero extra HTTP requests. The trade is size: Base64 represents three bytes as four characters, so the payload grows by roughly 33% before compression, and inlined images cannot be cached separately from the document that carries them. That makes data URIs a good fit for small, rarely-changing assets like icons and a poor one for photographs.
How to use this tool
- 1 Drop an image onto the panel, or click to pick one — nothing is uploaded.
- 2 Choose the output format: a raw data URI, bare Base64, a CSS background rule, or an img tag.
- 3 Check the size comparison — it shows exactly how much the Base64 encoding added.
- 4 Switch to Base64 → Image to paste an encoded string and preview or download the original.
Frequently asked questions
Is my image uploaded anywhere?
No. The file is read with the browser's FileReader API, which works purely on your device — the bytes go from disk into page memory and nowhere else. No request is made, so this works with the network disconnected.
When should I inline an image instead of linking it?
When it is small, used immediately, and rarely changes — icons, tiny logos, a placeholder blur. Below roughly 2–4 KB the saved HTTP request usually outweighs the 33% size penalty. Above that, a normal cached image file almost always wins, especially on repeat visits.
Why is my Base64 larger than the original file?
Base64 encodes every three bytes as four ASCII characters, a fixed 33% increase, plus a little for the data: prefix. It is a consequence of representing binary in a text-safe alphabet and cannot be avoided — though gzip or brotli claws back a good part of it in transit.
Can I use a data URI in CSS?
Yes — background-image: url("data:image/png;base64,…") works everywhere. Watch the quoting for SVG data URIs, which contain characters that need escaping; URL-encoding an SVG rather than Base64-encoding it is both smaller and easier to read.
What image formats work here?
Anything your browser can decode: PNG, JPEG, GIF, WebP, AVIF and SVG. Decoding sniffs the format from the leading bytes when you paste bare Base64 without a data: prefix, so a raw PNG or JPEG blob still previews correctly.