What Base64 is
Base64 is a way to write binary data using ordinary characters: letters, digits and a few symbols. An image encoded this way becomes a long string that you can place in a data URI, for example inside an img tag or a CSS background.
A data URI starts with a short prefix that names the file type, followed by the encoded text. The browser decodes it and shows the image without making a separate request for a file.
Good uses
- Very small icons or placeholders that save an extra request
- HTML emails or single-file pages where external files are awkward
- Test data, documentation examples and JSON payloads, where a file reference would not be available
- Small images in a stylesheet that must work without any other files
Drawbacks
The text is roughly one third larger than the original file. The browser cannot cache an embedded image separately from the page, so it is downloaded again whenever the HTML or CSS is. Large strings also make HTML and CSS heavier to parse and harder to read and edit.
Some email programs block or limit embedded images, so test before relying on them in a newsletter.
As a rule of thumb, embed only small images, up to a few kilobytes. Serve everything larger as a normal file, where it can be cached, compressed and lazy-loaded. Modern servers also let several files travel over one connection, so the saving from avoiding a request is often smaller than it used to be.
A worked example (illustrative)
Suppose you have a 2 KB arrow icon used in one button. Encoded, it becomes roughly 2.7 KB of text in your CSS. That is fine, and you save a request.
Now suppose you embed a 300 KB photo. The text grows to around 400 KB inside your HTML. Every visit must download and parse all of it before the page can finish, and the photo cannot be cached on its own. A normal file, compressed first, is the better choice.
Step-by-step workflow
- Make the image as small as possible first: resize and compress it.
- Check the final file size. If it is above a few kilobytes, consider a normal file instead.
- Convert it to Base64 and pick the output you need: data URI, HTML img tag, CSS background or raw Base64.
- Paste it into your page, stylesheet or JSON.
- Open the page and confirm that the image displays.
Common mistakes
- Embedding large photos, which bloats the page.
- Encoding an image before optimizing it, so you embed unnecessary bytes.
- Repeating the same long string in several places instead of defining it once, for example as one CSS class.
- Forgetting the data URI prefix when using raw Base64 in HTML or CSS.
- Treating Base64 as a form of security. It is only an encoding and anyone can decode it.
- Pasting a very long string into a place that limits line length or field size, which can cut the image off.
Quick checklist
- Is the image only a few kilobytes?
- Is it already resized and compressed?
- Does it really need to avoid a separate file?
- Have you tested the result in the place where it will be used?
- Will the image be reused on several pages? If so, a normal file is probably better.
Doing it with DoneImg in your browser
Open the Base64 tool and add your image. Choose the output you need: a data URI, a ready-made HTML img tag, a CSS background rule or the raw Base64 text, then copy it. If the string looks very long, go back and use the Resize and Compress tools first.
The conversion happens in your browser, so the image is never uploaded and stays on your device.
Frequently asked questions
Does Base64 make an image smaller?
No. It makes the data roughly one third bigger, because it stores the file as text.
Can I turn Base64 back into an image?
Yes. Base64 is reversible, and browsers decode a data URI automatically.
Is Base64 good for a logo in my website header?
Usually not. A logo that appears on every page is better as a normal file or an SVG, so the browser can cache it once and reuse it everywhere.
What file type should I encode?
Use whatever is smallest for the picture: SVG for simple shapes, WebP or PNG for small graphics, and JPG or WebP for photos. Encoding does not change the picture, only how it is written.