Image to Base64
Convert an image to Base64, data URL, CSS or HTML, and Base64 back to an image
Your files are processed in your browser. They are never uploaded, and nothing is stored after you close the page. How we handle privacy
Runs entirely in your browser. Nothing you type or upload is sent to us or stored.
Keep a copy of your original file. Check the result before you use it. Terms of use
How to Use
- Keep Image to Base64 selected and drop an image on the box (PNG, JPG, GIF, WebP, SVG, ICO, BMP or AVIF). On a computer you can also paste a copied image or screenshot with Ctrl+V.
- Check the file size and the Base64 size shown above the result. Pick the output you need: Data URL, Base64 only, CSS or HTML <img>.
- Tap Copy to paste it into your code, or Download .txt to save it as a text file.
- To go the other way, choose Base64 to image, paste the Base64 text or data URL. The image shows straight away; if you typed or edited the text, tap Show image. You'll see the image, its type, dimensions and size, and can tap Download to save it as a file.
What this image to Base64 converter does
This tool converts an image to Base64 text and back. Drop a picture and you get a data URL you can put straight into HTML or CSS, the raw Base64 string for an API or JSON file, and ready-made background-image and <img> snippets. Paste Base64 or a data URL and it shows you the image, tells you its real type and size, and lets you download it as a normal file.
The conversion runs in your browser. Nothing you drop or paste is uploaded, which is useful when the Base64 came from an API response you'd rather keep private.
How Base64 works
Base64 writes binary data using only 64 safe characters: A to Z, a to z, 0 to 9, + and /. Every 3 bytes of the file become 4 characters, and the end is padded with = signs. A data URL adds a short header that says what the data is.
data URL = data:<MIME type>;base64,<Base64 text>
example: data:image/png;base64,iVBORw0KGgo…
That 4-for-3 swap is why Base64 is about 33% bigger than the file it came from.
A worked example
A company logo saved as a 30 KB PNG (30,720 bytes) becomes 4 × 10,240 = 40,960 characters of Base64, about 40 KB. Inlined in your CSS, it saves the browser one request. A 1 MB photo (1,048,576 bytes) becomes 1,398,104 characters, about 1.33 MB of text that has to be downloaded with every page that includes it and can't be cached on its own. That's why the tool warns you above 1 MB.
When to use Base64 images
| Situation | Base64? |
|---|---|
| Small icons, a loader, a tiny logo in CSS | Yes, saves a request |
| Images inside a single-file HTML report or offline page | Yes, keeps it in one file |
| Sending an image in a JSON API request | Often required |
| Product photos or banners on a website | No, use normal image files |
| Images in HTML emails | Usually no: many email apps don't show them |
Decoding pasted Base64
You can paste a full data URL, plain Base64 with or without line breaks, URL-safe Base64 (with - and _ instead of + and /), or a whole CSS or HTML line that contains a data URL. The tool doesn't trust the label in the data URL. It reads the first bytes of the decoded data to find the real type (PNG files start with the bytes 89 50 4E 47, JPEGs with FF D8 FF) and names the download to match. If the label and the bytes disagree, it tells you.
Tips
- Compress the image first with our image compressor; a smaller file means much shorter Base64.
- For SVG icons, a plain URL-encoded SVG in CSS is often smaller than Base64. The decoder accepts both.
- If decoding says the text looks cut off, the copy probably missed a few characters at the end.