Is my image sent to a server?

No. The file is read with the browser's FileReader API and encoded locally. Nothing is uploaded.

Why is the Data URI larger than the original file?

Base64 represents every 3 bytes of binary data as 4 ASCII characters, so the encoded string is roughly 33% larger than the source file. The tool shows both sizes so you can compare, e.g. "logo.png · 4.2 KB · Data URI 5.6 KB".

When should I embed images as Data URIs?

For small assets (icons, tiny logos, inline SVG fallbacks) where saving an HTTP request outweighs the size overhead. Large images are usually better served as separate files, since Data URIs bloat HTML/CSS and cannot be cached independently.

Image to Data URI Converter

Overview

A Data URI embeds a file’s contents directly into a URL using the form data:<mime-type>;base64,<data>. This tool converts any image into that form so you can inline it in an <img src>, a CSS background-image, or a JSON payload. The file is read with FileReader.readAsDataURL in your browser; nothing is uploaded. After conversion you get the file name, original size, encoded size, a rendered preview, and the full URI ready to copy.

How to use

Click Choose image and select a file. Conversion happens immediately.
Check the info line (name, source KB, Data URI KB) and the preview to confirm the right image was encoded.
Press Copy to place the full Data URI on your clipboard.

Examples

A 1 KB favicon PNG becomes a string starting with data:image/png;base64,iVBORw0KGgo… that you can paste into <link rel="icon" href="…">.
Inline a small arrow icon into CSS: background-image: url("data:image/svg+xml;base64,…") to eliminate one request.

Notes

Data URIs are not cached separately from the document that contains them, and very long strings can slow down editors and diffs. Reserve this technique for assets of a few kilobytes.