You're building a page and you want a small icon or logo baked directly into the HTML or CSS, no separate file, no extra request. Or maybe a tool or API you're using expects an image as a string of text rather than a file. Both of these are jobs for Base64 encoding. Here's what Base64 is, how to convert an image to it, and, just as important, when you shouldn't.
What is Base64?
Base64 is a way of representing binary data, like an image, using only plain text characters. Computers store images as raw bytes, but plenty of contexts only handle text safely: HTML, CSS, JSON, and many APIs. Base64 encoding turns those raw bytes into a long string of letters, numbers, and a couple of symbols that can travel anywhere text can.
The trade-off is size. A Base64 string is roughly 33% larger than the original file, because it's packing binary data into a limited text alphabet. So you gain portability but pay for it in bytes.
What is a data URI?
When you encode an image to Base64 for the web, you usually wrap it in a data URI. A data URI is a self-contained string that includes the image type and the Base64 data, so a browser can render it without fetching a separate file. It looks like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
The data:image/png;base64, part tells the browser "this is a PNG, encoded as Base64," and everything after the comma is the image itself as text. Anywhere you'd normally put an image URL, you can put a data URI instead.
How to embed a Base64 image in HTML and CSS
Once you have a data URI, using it is straightforward.
In HTML, drop it into the src of an image tag:
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Logo">
In CSS, use it as a background image:
.icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANS...");
}
In both cases the image is embedded directly, so the browser doesn't make a separate network request to load it.
How to convert an image to Base64 with Toolmingo
You can do this in your browser in seconds, with no uploads, the file is read and encoded locally on your device.
- Open the Image to Base64 converter.
- Select your image. Small images like icons and logos are the best fit.
- The tool encodes it and gives you the Base64 string, usually as a ready-to-paste data URI.
- Copy the result and drop it into your HTML, CSS, JSON, or wherever you need it.
If your image is the wrong format or larger than it needs to be, run it through the Image Converter first, shrinking or converting it before encoding keeps the resulting string smaller.
When Base64 helps, and when it hurts
Base64 is a tool with a narrow sweet spot. Used well, it's handy. Used everywhere, it slows your page down.
Good times to use Base64:
- Tiny, frequently used icons. Inlining a small icon removes an HTTP request, which can speed up rendering for that asset.
- Single-file output. When you need a self-contained HTML or CSS file with no external dependencies, an email template, a downloadable widget, embedding images keeps everything in one place.
- APIs that require it. Some APIs and config formats only accept images as Base64 strings, so encoding is the only option.
When to avoid it:
- Large images. The 33% size increase is wasted on big files, and a large Base64 string bloats your HTML or CSS, which can hurt page load.
- Images used across many pages. A regular image file gets cached by the browser and reused everywhere. A Base64 image is re-downloaded as part of every page that includes it, with no shared caching.
- Anything you'll update often. Swapping a real image file is easy; finding and replacing a giant Base64 string in your code is not.
The rule of thumb: Base64 suits small, rarely changing images where avoiding an extra request matters. For everything else, a normal image file is usually faster and simpler.
Why convert in the browser?
A local, in-browser converter reads your image and encodes it on your own device, nothing is uploaded. That's safer and faster for any image, and it means you can encode logos, screenshots, or private graphics without them leaving your machine. Toolmingo's converter is free, runs entirely in your browser, and uploads nothing.
FAQ
Q: Does Base64 make my image larger? Yes, by about a third. Base64 encodes binary data using a limited text alphabet, so the resulting string is roughly 33% bigger than the original file. That's why it's best reserved for small images where the convenience outweighs the extra size.
Q: Can I convert a JPG or SVG to Base64, not just PNG?
Yes. Any image format can be Base64-encoded, JPG, PNG, SVG, GIF, and more. The data URI prefix just changes to match the type, for example data:image/jpeg;base64,. If you need a different format first, convert it with the Image Converter before encoding.
Q: Will a Base64 image hurt my site's performance? It can, if you overuse it. Inlining large images bloats your HTML or CSS and skips browser caching, so each page reloads the data. For small icons it's fine and can even help, but for big or reused images, a normal cached image file performs better.