Image to Base64 Converter
Encode any image to a Base64 data URL, or paste a Base64 string to decode it back to an image — all inside your browser with no upload. The tool works bidirectionally: drop an image file to get its Base64 string, or paste a Base64 string to preview and download the image.
🔒 Your images never leave your device — all processing happens in your browser.
or click to browse — JPG, PNG, WebP, GIF
How It Works
Base64 is an encoding scheme that represents binary data (like an image file) as a string of ASCII characters. It is widely used to embed images directly in HTML, CSS, JSON payloads, and email messages, eliminating the need for a separate HTTP request to load the image.
A Base64-encoded image is typically wrapped in a data URL like this:
`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...`
The prefix `data:image/png;base64,` tells the browser what MIME type the data is, and the rest is the Base64-encoded bytes of the file.
Image → Base64: When you drop an image file, the tool uses the browser's `FileReader.readAsDataURL()` API to read the file and automatically encode it as a Base64 data URL. The result is displayed in a textarea for easy copying. The tool shows the original file size and the Base64 string size (which is about 33% larger due to the encoding overhead). A warning is shown if the Base64 string exceeds 1 MB, as very large inline images can slow down HTML page load.
Base64 → Image: Paste a Base64 data URL or a raw Base64 string into the input textarea. The tool detects it automatically and renders a preview. If you paste a raw Base64 string without the `data:...` prefix, the tool assumes PNG format. You can then download the decoded image as a file.
Worked example: You need to embed a small company logo in an HTML email without attaching it as a separate file. Drop the logo PNG, copy the data URL from the textarea, and paste it into an `<img src="...">` tag in your email HTML.
Frequently Asked Questions
Is my image sent anywhere when converting to Base64?
No. The FileReader API is a browser-native feature that reads files locally. Nothing is transmitted over the network. The tool works fully offline.
Why is the Base64 string larger than the original file?
Base64 encoding increases data size by approximately 33% because it represents every 3 bytes of binary data as 4 ASCII characters. This is the inherent overhead of the format.
When should I use Base64 images?
Base64 is useful for small images (icons, logos, tiny backgrounds) embedded in HTML or CSS to save HTTP requests. For large images, a separate file is almost always better — the 33% size overhead and lack of caching make large inline images inefficient.
Can I paste just the Base64 string without the data: prefix?
Yes. If you paste a raw Base64 string (without the data:image/...;base64, prefix), the tool will attempt to decode it assuming PNG format. If the image looks wrong, the original file may have been a JPEG or WebP — try adding the correct prefix manually.
What does the 1 MB warning mean?
Base64 strings over 1 MB embedded in HTML/CSS can significantly slow down page parsing and increase memory usage. The warning is a reminder to consider whether inline embedding is appropriate. For images this large, a separate file with a URL reference is usually better.