๐ผ๏ธ Image to Base64
Drag & drop an image here, or click to select
Convert an image file into a Base64 data URI. Useful when you want to embed an image directly in CSS or HTML without hosting a separate file โ for example, bundling a small icon or logo into a single CSS or HTML file.
How to use
- Drag and drop an image, or click to select a file.
- The generated data URI (Base64 string) appears automatically.
- Click "Copy" to copy the raw data URI, or "Copy as CSS" to copy it as a ready-to-use background-image property.
FAQ
Does Base64 encoding increase file size?
Yes. Since Base64 converts binary data into text, the result is roughly 33% larger than the original file.
What is this typically used for?
Embedding small icons directly in a CSS background-image or an HTML img src attribute without a separate file request.
Is this a good fit for large photos?
Since Base64 adds about 33% to the file size and bloats the HTML/CSS file itself, it's better suited to small images like icons or logos than large photos.
Is my converted image sent to a server?
No. Everything is processed in your browser, so neither the image nor the resulting data URI is sent anywhere.
Can I paste the data URI straight into HTML?
Yes โ paste it directly into the src attribute of an <img> tag.