Encoding
Data URI / Base64 image
Encode an image into a Data URI (data:image/…;base64,…) for embedding in CSS/HTML, and decode a Data URI or raw Base64 back into a file — all in your browser.
The image preview will appear here.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Article about this tool: Data URI: when to embed images directly in code
Frequently asked questions
When should I use a Data URI instead of a normal image file?
Data URIs are handy for small, frequently-used images like icons or logos where you want to avoid an extra HTTP request, for example embedding an image directly in CSS or inline HTML.
Are there downsides to using Data URIs for images?
Yes. They inflate the surrounding file size (roughly 33% larger than the raw image due to Base64), aren't cached separately by the browser like a real image URL, and many browsers and email clients impose practical size limits on how large a Data URI can be.
Does this tool upload my image anywhere?
No. The image is read and encoded entirely in your browser — it's never sent to a server.
Can I use a Data URI for SVG without Base64?
Yes. SVG is text (XML), so instead of Base64, percent-encoding the special characters is enough: data:image/svg+xml,%3Csvg...%3E. That approach is more compact and stays editable right inside a CSS file.
Can I put a Data URI in an href or background-image?
Yes, a Data URI works anywhere a resource reference is expected — in src, href, background-image in CSS, and even in @import. The syntax and size limits are the same as for an img tag.