Convert an image into a complete data URI that starts with data:image and includes the Base64 payload. Drop the URI straight into an HTML img src, a CSS background-image, or a JSON value. All conversion runs in your browser.
How it works
The tool reads your image with the FileReader API as a data URL. FileReader returns a string of the form data:image/png;base64,XXXX, where everything after the comma is the Base64-encoded file. The tool can show the full URI, strip the prefix to return raw Base64, or wrap it in a CSS background snippet, all in your browser tab.
Processing runs in your browser
All Base64 encoding happens locally in your browser tab using FileReader. Our servers are not involved at any point. You can verify this yourselfin your browser's DevTools Network tab.
Frequently asked questions
- Is my image uploaded to a server?
- All data URI generation runs in your browser using FileReader.readAsDataURL. Our servers are not involved at any point.
- What does a data URI look like?
- A data URI has the form data:image/png;base64,XXXX. The first part is the MIME type, then a comma, then the Base64-encoded contents. The browser treats it like a tiny inline file.
- Where can I use a data URI?
- Anywhere a URL is accepted. Common places include the src attribute of an img tag, the url() value of a CSS background, the href of an anchor for download, and inside JSON payloads.
- Are there limits on data URI length?
- Browsers handle data URIs up to several megabytes, though bundlers and CSS minifiers can struggle past about 2 MB. Use the size badge to keep an eye on the output size.
- Does the data URI work in email templates?
- Most desktop email clients render inline data URIs for images. A few mobile clients block them, so test in your target inbox before relying on inline images for critical mail.