Free Image to Base64 Converter
What it means to put an image inside your code
Normally an image is a separate file, and a page refers to it by address. A Base64 data URI is a different idea: the entire image is written out as a long string of text and placed directly in the HTML, CSS or JSON, with no separate file at all. This tool turns an image into that string, in four ready-to-paste forms, and can also turn a Base64 string back into a picture you can preview and download. It works in your browser and does not upload anything.
The four outputs, and which to copy
- Data URI. The complete string starting with
data:image/png;base64,. Use this wherever a URL is expected. - Base64 only. Just the encoded data, without the prefix. Useful for APIs and JSON fields that ask for the raw string.
- HTML img tag. A complete tag with the data URI as its source, ready to paste into a page or an email.
- CSS background. A
background-imagerule with the data URI, for styling an element.
How to use it, in both directions
Image to Base64
Drop an image on the box and pick the output you need. Click Copy and paste it into your code.
Base64 to image
Paste a Base64 string, or a full data URI, into the second box. Show image previews it, and Download image saves it as a file. This is handy when you meet an unreadable blob of text in an API response or a stylesheet and want to see what it is.
The honest trade-offs
Inlining images sounds clever, and sometimes it is. It saves a network request, and it makes a document fully self-contained. But Base64 makes the data about a third bigger, since every 3 bytes become 4 characters. The browser cannot cache an inlined image separately, so if the same picture appears on several pages, it is downloaded again every time inside each page. And long strings make code hard to read and edit.
A practical rule: inline only small things, a few kilobytes at most, such as a tiny icon or a loading placeholder. Anything bigger is better as a normal file.
Where inlining really helps
- HTML emails. Some email apps block linked images until the reader allows them, and embedded data can show immediately. Support varies, though, and some apps strip data images, so test in the clients your readers use.
- Single-file pages and demos that must work without anything else beside them.
- Tiny blurred placeholders shown while a large image loads.
- JSON or API payloads that need to carry a picture as text.
Make it smaller first
The bigger the image, the longer the string, so shrink before you encode. Resize it with the image resizer, compress it with the image compressor, and consider converting a simple graphic with the SVG to PNG converter first. For text rather than images, the Base64 encode and decode tool does the same job for strings.
A small example with real numbers
Suppose you have a 3 KB icon. Encoded as Base64, it becomes a string of about 4 KB, which is easy to place in a stylesheet and saves a request. Suppose instead you have a 300 KB photo. As Base64 it is about 400 KB of text, which would make your HTML or CSS enormous, slow to download and impossible to read. The first is a good use of the technique and the second is a bad one, and the difference is simply size.
Debugging tips
If an inlined image does not show, check that the data URI begins with the right prefix for the file type, that there are no line breaks or spaces inside the string, and that quotes in your HTML or CSS match. Quotes inside the string itself are not a problem, since Base64 uses only letters, numbers and a few symbols, but a missing closing quote around the whole value is a classic cause.
A note on safety
Treat data URIs from sources you do not trust with care, the same as any other content. Never paste untrusted encoded data into a page without checking what it is. When you preview a mystery string here, you see the image only and nothing is executed.
FAQ
It is an image written out as plain text characters, so it can be embedded inside code instead of being a separate file.
Base64 encoding adds about 33 percent to the size, because it uses 4 characters to store every 3 bytes.
A data URI is the Base64 text with a prefix such as data:image/png;base64, that tells the browser what it is. Use the data URI in HTML and CSS.
Yes. Paste it into the Base64 to image box, preview it and download the file.
No. Encoding and decoding both happen in your browser.