What does an image to Base64 converter do?
An image to Base64 converter re-writes a binary image file as text. Three bytes of the file become four characters from a 64-character alphabet, so the data can travel through anything that only handles text — a JSON field, a CSS declaration, an HTML attribute, a database column. The result is a data URI: data:, then the MIME type, then ;base64, then a comma, then the encoded characters.
The point of doing it is to remove a request. A browser that meets an inline data URI has the bytes already, so it does not open a connection, wait for a round trip and then decode an image; it decodes the string in place. For a small icon that appears in the first paint of every page that saving is real. For a photograph it is a mistake, because the encoded text is roughly a third larger than the file and cannot be cached or compressed separately from the document that carries it.
This tool encodes in the page, so the image never leaves your machine, and it produces the value in the shape the destination expects rather than one generic string: a bare data URI for a src attribute, the raw characters for an API body, a url() wrapper for CSS, a complete img element, or a JSON object. The size of the encoded form is measured and shown so the decision is made with the number in front of you.
How to convert an image to Base64
- Choose one or more images. Everything happens in the browser and the files are never uploaded.
- Pick how the output should be wrapped — a complete data URI, the raw characters only, CSS url(), an img tag or a JSON field.
- Read the per-image line, which reports the encoded length and the percentage it added to the file size.
- Copy a single value with its own button, or copy every image at once as one block when they are all going to the same place.
- Save a value as a .base64.txt file when it needs to be pasted somewhere the clipboard will not reach.
- Reconsider anything large. If the overhead is more than the request it replaces, link the image as a file instead.
Image to Base64 limits and rules
| Item | Limit |
|---|---|
| Input formats | Anything the browser can read as an image, including SVG, PNG, JPG, GIF, WebP and AVIF |
| Per-file cap | 10 MB, above which a data URI is not worth embedding in any document |
| Encoded size | About 33% larger than the source, plus the MIME type and the prefix |
| Output wrappers | Data URI, raw base64, CSS url(), an img element, or a JSON object |
| Batching | Several images at once, each with its own preview and size report |
| Encoding | Standard Base64 with + and /, which is what data URIs require |
| Not covered | URL-safe Base64 using - and _, and encoding of non-image files |
When to use it
- Embedding a small logo or icon in a stylesheet so it arrives with the first paint.
- Sending an image inside a JSON request body to an API that accepts it as a string field.
- Storing a tiny image in a database column that only holds text.
- Making a single-file HTML demo or email template that has no external assets.
- Checking how much larger an image becomes before deciding to inline it.
Is it private?
The file is read by JavaScript in this page and encoded with the browser's own Base64 routine. Nothing is uploaded, stored or logged, and the size figures are computed from the bytes on your machine.
Frequently asked questions
About 33%. The encoding turns every three bytes into four characters, so the arithmetic is 4/3 of the original, and there is the MIME type and the data: prefix on top of that. A 30 KB PNG becomes roughly 40 KB of text. That is the whole trade: you spend about a third more bytes to save one network request. It is worth it below a few kilobytes and a bad deal above a hundred.
When the file is small and the request is comparatively expensive — an icon in the critical stylesheet, a placeholder, a tiny logo that appears on every page. As a rule of thumb, embed anything under about 5 KB and link anything larger. The reason the threshold is so low is that a normal image request is cheap while an inlined image inflates the HTML or CSS that the browser must download, parse and re-download on every visit, with no separate cache to help.
Neither. Base64 is a transport encoding, not a security measure — anyone who has the string can decode it with a single function call, so never treat an encoded value as hidden. It is also not compression: the output is larger than the input. What it does do is make binary data safe to pass through text-only channels, which is a real problem worth solving but a different one from secrecy or size.
Because an SVG is a text file already, so the encoded string is just a second layer over something readable. This tool does not render a preview for SVG input, and browsers treat an SVG delivered as a data URI differently from one delivered as a file: scripts inside it will not run and some features are restricted. That is a feature, not a fault — it is why an SVG in a data URI is a safe way to carry vector artwork into a page you do not fully control.
The one that matches the file, and it must be correct or the browser will not decode it. The tool reads it from the file the browser identified, so a PNG gets image/png, a JPEG image/jpeg, an SVG image/svg+xml and so on. The common mistake is renaming a file — calling a PNG a .jpg does not change the bytes — and the MIME type follows the bytes, not the extension, which is what you want.
It is widely supported but not guaranteed. Many desktop clients render data URIs, while some webmail providers strip them and a few mobile clients refuse them, and the result when they fail is a broken image with no fallback. Because email clients also block external images by default, a hosted file with a sensible alt attribute is often the more reliable choice for anything a recipient must see.
Related tools
Written and maintained by Md. Nur Hossain Repon.