Image to Data URI Converter
Drop in an image, get a ready-to-paste Data URI, <img> tag or CSS snippet back instantly.
Upload your image
Drop in any image file, or click to browse. It's read locally - nothing is sent anywhere.
Pick a snippet format
Choose a plain Data URI, a ready-made <img> tag, or a CSS background-image rule.
Copy or download
Grab the code with one click, or save it as a .txt file - instantly, no sign-up required.
ℹ About Data URIs
A Data URI embeds a file's content directly inside a URL using the data: scheme - for example data:image/png;base64,iVBORw0K…. Browsers, HTML and CSS treat it exactly like a normal image file, so there's no separate request or hosted file needed.
They're great for small icons, logos, or one-off images you want inlined into a single HTML/CSS file or a portable document. For large photos or images reused across many pages, a regular hosted file that the browser can cache is usually the better choice.
Frequently Asked Questions
What is a Data URI?
A Data URI embeds a file's content directly inside a URL, using a scheme like data:image/png;base64,iVBORw0K…. Browsers, HTML and CSS can read it exactly like a normal image file, so no separate request or hosted file is needed.
When should I use a Data URI instead of a regular image file?
Data URIs are handy for small icons, logos, or one-off images where you want to avoid an extra HTTP request, or when you need to embed an image inside a single portable file such as an email, a PDF, or a JSON payload. For large photos or images used on many pages, a regular hosted file with caching is usually better.
Is there a size limit for Data URIs?
Modern browsers don't enforce a hard limit, but Base64 encoding adds about 33% to the file size, and very large Data URIs bloat your HTML or CSS and slow down parsing. As a rule of thumb, keep Data URI images under a few tens of kilobytes.
Is my image uploaded to a server?
No. Everything happens locally using the browser's FileReader API. The image is never uploaded or transmitted anywhere.