Image to Base64
Upload an image to get a ready-to-use Base64 data URI, for embedding directly in CSS or HTML.
Drop an image here, or click to choose
When to use a data URI instead of a file
Embedding a small image directly in your CSS or HTML avoids an extra network request, which helps for tiny icons or a single background pattern. For anything larger than a few kilobytes, a regular image file with browser caching usually performs better.
About the Image to Base64
Image to Base64 converts an image file into a Base64 data URI that you can place directly in HTML or CSS. This removes the need for a separate image request, which can help with very small icons and email templates.
A data URI contains the file content in the URL itself, for example data:image/png;base64,.... Base64 makes the data about one third larger, and browsers cannot cache an embedded image separately from the page, so it is best for small images. Large pictures are better served as normal files.
How to use it
- Choose an image file.
- Copy the data URI, or use Copy as CSS background.
- Paste it into your code.
- Test it in a browser.
Tips and good to know
- Keep embedded images under a few kilobytes.
- Optimise the image first with the Image Compressor.
- Data URIs can make source code hard to read.
Frequently asked questions
Does it work with SVG?
Yes, though plain SVG can often be inlined directly.
Will it slow my page?
Large data URIs increase HTML or CSS size.
Is my image uploaded?
No.