How to convert an image to Base64
Add your image
Drag a PNG, JPG or WebP onto the box above, or click to pick a file from your device.
Get the data URI
The Base64 string appears instantly in the text box, complete with its data: prefix.
Copy & paste
Hit Copy and drop the string into your CSS, HTML or JavaScript wherever you need it.
What is a Base64 image and why use one?
Base64 is a way of writing binary data - like the bytes of an image - using only plain text characters. When you encode an image this way and add a small data:image/png;base64, prefix, you get a "data URI": a self-contained string that a browser treats exactly like a link to an image file. Because the image is embedded directly in your code, the browser does not have to make a separate network request to fetch it. That makes data URIs handy for tiny icons, email-safe graphics, inline SVG fallbacks, single-file demos, or any place where you want one fewer file to manage.
This converter runs entirely in your browser using the FileReader API. Your image is read locally and turned into a Base64 string on your own device - it is never uploaded to a server, so even confidential mockups, screenshots or logos stay completely private. Keep in mind that Base64 encoding makes data roughly 33% larger than the original file, so it is best for small images; for large photos a normal image file (or our compressor) is usually the better choice.
Frequently asked questions
Are my images uploaded anywhere?
No. The encoding happens locally in your browser with the FileReader API, so the image data never leaves your device and nothing is sent to any server.
How do I use the Base64 string in CSS or HTML?
Paste the whole string (including the data: prefix) as a URL. In CSS use background-image: url(PASTE_HERE);, and in HTML use <img src="PASTE_HERE">. Both will render the embedded image.
Why is the Base64 version bigger than my file?
Base64 represents 3 bytes of data with 4 text characters, which adds about 33% in size. That is normal and expected, which is why data URIs are best suited to small images and icons.