Image to Base64 Converter
Get a data URI from a picture, or the picture back from Base64 text.
Base64 text is about a third larger than the file it came from, because every 3 bytes are written as 4 characters. It suits small icons and logos. Large photos are better kept as separate files.
How to use the Image to Base64 Converter
- Stay on the "Image to Base64" tab and drop a picture in, or click the box to pick one.
- Press Copy next to the form you need: the bare string, the data URI, the CSS line or the img tag.
- To go the other way, open "Base64 to image" and paste a Base64 string or a complete data URI.
- Check the preview, then press Download image to save it with the correct file extension.
About this tool
A data URI lets a picture travel inside a text file. Instead of pointing at logo.png, the stylesheet or page carries the picture itself, written out as Base64 characters. That saves a request for tiny graphics, keeps a single-file HTML email or demo self-contained, and is often the only way to place an image in a JSON payload or a configuration value. This converter reads your file and hands you the four forms people usually want, each with its own copy button.
The second tab does the reverse. Paste a bare Base64 string, a full data URI, or even a whole CSS url() line or img tag copied from a page, and the picture is rebuilt and shown. The real format is detected from the first bytes of the data, not from the label in the text, so a download gets the right extension even when the label is wrong.
This is a different job from the Base64 text tool in the developer section, which turns words into Base64 and back. Tip: the encoded text is about 33% bigger than the file, and an embedded image cannot be cached on its own, so keep this for graphics of a few kilobytes.
Frequently asked questions
Is my image sent to a server to be encoded?
No. The file is opened with the file reader built into your browser and converted by a script on this page. No request carrying your picture is ever made, which you can confirm in the network panel of your developer tools.
Why is the Base64 version bigger than my file?
Base64 spells out every 3 bytes as 4 printable characters, so the text is roughly a third larger. Servers that compress responses win part of that back, but a separate image file is still smaller.
What is the difference between Base64 and a data URI?
Base64 is only the encoded characters. A data URI adds a short prefix, for example data:image/png;base64, that tells the browser what kind of file follows. Use the data URI in src attributes and CSS url() values.
Which image formats can I encode?
Any picture file works, because encoding only reads bytes: PNG, JPG, GIF, WebP, SVG, ICO, BMP and AVIF are all recognised. The preview depends on what your browser can display.
My pasted Base64 will not decode. What should I check?
Make sure the whole string was copied, since a missing end is the usual cause. Line breaks and spaces are fine. If it decodes but is reported as "not a picture", the text holds something else, such as plain words or a PDF.