A data URI is a string that embeds the file contents directly inside a URL, using base64 encoding. They can replace URLs with inline data, removing one network request.

When should I avoid data URIs?

For large images. Base64 inflates size by ~33%, and inlining big images bloats your HTML / CSS payload. Use them only for small icons and decorative graphics.

Are my files uploaded?

No. Reading is done by FileReader inside your browser. Nothing is uploaded.

Image to Data URI Converter — Base64 for Inline HTML / CSS

How to use the data URI

Pick an image — JPG, PNG, GIF, WebP and SVG are all supported.
Copy the snippet you want — raw URI, HTML <img>, or CSS background-image.
Paste it directly into your code. No external file needed.

Common use cases

Inlining small icons (favicons, buttons) in HTML or CSS to remove HTTP requests.
Embedding a logo into a self-contained .html file for email or offline distribution.
Pasting screenshots into Markdown notes that travel as a single file.

Frequently asked questions

What size is the data URI compared with the original?

Base64 inflates the byte length by roughly 33%. We display both sizes after encoding.

Is there a size limit?

Browsers usually accept data URIs up to several megabytes, but performance suffers. For images above ~50 KB, keep the file external instead.

Does it expose private images?

No — the encoding is local. Be aware that anywhere you paste the data URI, anyone with access to that file can decode the image.