Turn an image into a data URI or Base64 string — and back again.
Input
Mode
How do I convert an image to Base64?
Open Image to Base64 on Tools-Bench and drop in a PNG, JPG, SVG, GIF or WebP. The Base64 appears at once as a data URI, raw Base64, an HTML img tag or a CSS background, ready to copy. Switch to Decode and paste Base64 to get the image back. The file is read in your browser and never uploaded.
About Image to Base64
Base64 turns an image's bytes into plain text, so the image can live inside the code that uses it: a data URI in an HTML img tag or a CSS background, an icon in an email template, a picture in a JSON payload or an API request. Drop in a PNG, JPG, SVG, GIF, WebP or any other file and this page gives you the data URI, the bare Base64, or a ready-made HTML or CSS snippet to copy. It also works the other way: paste Base64 or a data URI and get the image back as a file. Everything is read and written in your browser, so private screenshots and logos aren't uploaded.
How to use Image to Base64
1
Add an image
Drop it on the box or click to choose one. Any file works; images also get a preview.
2
Pick what to copy
A data URI for src attributes and url(), the bare Base64 for JSON or an API, or a ready HTML or CSS snippet.
3
Copy, or decode the other way
Copy the text with one click. Switch to Decode to paste Base64 and download the image it holds.
Frequently asked questions
When should I embed an image as Base64?
For small images — icons, logos and tiny backgrounds of a few kilobytes — where saving a separate download is worth it, and in places that can't load files at all, such as some email templates or a JSON payload. Large photos are better as normal files: Base64 makes them a third bigger, and they can't be cached on their own.
What's the difference between a data URI and Base64?
The Base64 is just the encoded bytes. A data URI puts the file type in front — data:image/png;base64, followed by the Base64 — so a browser knows what it is and can use it anywhere a URL goes, such as an img src or a CSS url().
Why is the Base64 bigger than my image?
Base64 writes every 3 bytes as 4 characters, so the text is about 33% larger than the file, plus a few characters for the data URI's header. Compress or resize the image first if size matters.
How do I turn Base64 back into an image?
Switch to Decode and paste the Base64, with or without the data:image/…;base64, prefix. The page works out the file type from the prefix or from the bytes themselves, shows a preview, and lets you download the file.