Image to Base64 Converter
Encode images as Base64 data URLs, CSS or HTML, or decode Base64 back to an image you can preview and download. Everything runs in your browser.
Open source on GitHubImage
Drop an image here
PNG, JPEG, GIF, WebP, SVG, ICO. Up to 10.00 MB.
Base64 output
Runs entirely in your browser. Images and base64 you paste are never uploaded.
Four ways to use a Base64 image. Pick the one that matches where it goes.
| Output | Looks like | Use it in |
|---|---|---|
| Data URL | data:image/png;base64,iVBOR… | An <img src>, a JSON field, or anywhere a URL is expected |
| Base64 | iVBORw0KGgoAAAANSUhEUg… | APIs that take the file content and the type separately |
| CSS | background-image: url("data:image/png;base64,…"); | Small icons and patterns in a stylesheet |
| HTML | <img src="data:image/png;base64,…" alt="…" width="…" height="…" /> | Email templates and self-contained HTML files |
Base64 or a regular file? Inlining trades caching for one fewer request.
| Choice | When |
|---|---|
| Inline it | Tiny icons and placeholders (a few KB), single-file HTML exports, email signatures, test fixtures |
| Keep it a file | Photos, screenshots and anything over roughly 10 KB: Base64 adds about 33% and the browser can’t cache it separately |
More free tools. Free, open source, no sign-up. See all tools · Source on GitHub
Frequently asked questions
How do I convert an image to Base64?
Choose Image to Base64, then drop or pick an image. The tool reads it in your browser and shows the result as a data URL, a raw Base64 string, a CSS background rule or an HTML img tag. Click Copy to take the full output.
How do I convert Base64 to an image?
Choose Base64 to image and paste either a full data URL (data:image/png;base64,…) or just the Base64 string. The tool detects the image type from its first bytes, shows a preview with the dimensions, and lets you download the file.
Why is the Base64 string bigger than the image?
Base64 represents every 3 bytes as 4 text characters, so the encoded image is about 33% larger than the file. That is why inlining only pays off for very small images.
Which image types are detected when there’s no data: prefix?
PNG, JPEG, GIF, WebP, BMP, ICO and SVG are recognised from their file signature. For other formats, add a prefix such as data:image/avif;base64, so the browser knows how to display it.
Is my image uploaded anywhere?
No. Encoding and decoding happen entirely in your browser. The image and the Base64 you paste never leave your device.