Base64 encoding turns a binary file — such as an image — into a long string of text made up only of letters, numbers and a few symbols. This lets you embed the image directly in HTML or CSS, with no separate file. The converter above produces the ready-to-use string; below we explain what you actually get and, above all, when it's worth it and when it isn't.
What Base64 really is
Base64 represents every 3 bytes of data with 4 text characters. The practical consequence is important: the Base64 version of an image weighs about 33% more than the original. It's not compression, but a re-encoding: it lets binary data "travel" where text is expected.
How to use the converter
Upload the image: the tool returns a string that starts with data:image/png;base64, followed by the data. You paste it as the value of the src attribute of an img tag, or into a CSS background-image: url(...) property. The browser interprets it as if it were an image file.
When it's worth using
- Icons and very small images (a few KB) repeated in the CSS: embedding them removes an HTTP request to the server.
- HTML emails, where external attached files can be blocked by mail clients.
- Prototypes and single files that must work without a linked images folder.
When NOT to use it
- Large images (photos, banners): the +33% weight and the impossibility of being cached separately slow the page down.
- Images used on multiple pages: as an external file they'd be downloaded once and reused; in Base64 they're reloaded on every page that contains them.
The rule of thumb: Base64 is great below a few KB, counterproductive above.
Step-by-step practical example
Suppose you have a small 2 KB PNG icon to use as a button background. Once converted, you get a string you paste into the CSS like this: .btn{background-image:url('data:image/png;base64,iVBORw0KGgo...')}. The button will show the icon without the browser having to download a separate file — one fewer HTTP request on every page load.
Base64 and page speed
Embedding resources in Base64 reduces the number of requests to the server, but increases the size of the HTML or CSS file that contains them. For a few light icons the trade-off is positive; for many images or heavy files it becomes negative, because the whole block must be downloaded before the page shows and cannot be cached separately. It's a trade-off between "fewer requests" and "larger files": weigh it case by case against your Core Web Vitals.
Supported formats
Base64 encoding works with any image format — PNG, JPEG, WebP, GIF and SVG — because it acts on the file's bytes, regardless of the type. The string's prefix (data:image/png, data:image/jpeg…) tells the browser how to interpret the data. For photos it's best to start from an already-compressed JPEG or WebP, so the resulting string stays smaller.
Frequently asked questions
Are Base64 images safe?
Yes: the conversion happens in your browser and the string contains only the image data, with no executable code. Nothing is sent to external servers.
Does Google index Base64 images?
Images embedded in Base64 don't have their own URL, so they don't appear in Google Images. For images you want found in search, use external files with a good alt attribute.
Can I convert from Base64 back to an image?
Yes, the process is reversible: any Base64 decoder rebuilds the original file identically, because no data is lost in the encoding.