📎
ConvertersFree · In-Browser
Image to Base64 Converter
Convert an image to a Base64 data URI, or decode one back into an image.
Image → Base64
Base64 → Image
Everything happens locally in your browser — images are never uploaded anywhere.
Convert an image into a Base64-encoded data URI you can embed directly in HTML, CSS, or JSON without a separate file request — or decode an existing Base64 string back into a viewable, downloadable image.
Useful for small icons, inline email images, or any situation where bundling an image directly into markup avoids an extra network round trip.
When inlining is worth it — and when it isn't
| Situation | Inline as Base64? | Why |
|---|---|---|
| Icon under ~2 KB | Yes | Saves a request that costs more than the 33% size penalty |
| Small CSS background pattern | Yes | Avoids a render-blocking request |
| Photograph or hero image | No | The size penalty is large and it can't be cached separately |
| Image used on many pages | No | A shared file is cached once; inlined copies are re-downloaded per page |
| Email template | Often | Some clients block linked images but render inlined ones |
| Image in a JSON API payload | Yes, if unavoidable | JSON can't carry raw binary |
The trade-offs to know
- Base64 inflates the data by about 33%, because it represents three bytes using four ASCII characters.
- An inlined image cannot be cached independently — change one byte of your CSS and the browser refetches the image with it.
- Very large data URIs can slow CSS or HTML parsing, since the parser has to read through the whole string.
- An SVG is usually better inlined as actual SVG markup than as a Base64 data URI — it stays smaller and remains styleable with CSS.
- Data URIs are blocked in some contexts for security reasons, notably as top-level navigation targets.
Frequently asked questions
- Why would I embed an image as Base64 instead of linking to a file?
- It avoids a separate HTTP request, which can help for very small images like icons, though it also increases the size of the HTML/CSS file itself — it's a trade-off best used for genuinely small assets.
- Does converting to Base64 increase file size?
- Yes, Base64 encoding increases size by roughly 33% compared to the raw binary, since it represents binary data using only text characters.
- Is this processing done locally, or uploaded somewhere?
- Everything happens in your browser — the image is never uploaded to a server.
- What does the 'data:image/png;base64,' part mean?
- It's the data URI prefix: the scheme (data:), the MIME type telling the browser what kind of file follows, and the encoding. The actual image data comes after the comma.
- Should I inline SVG icons as Base64?
- Usually not. Pasting the SVG markup directly is smaller than Base64 and lets you style it with CSS — for example changing its colour with `fill: currentColor`.