Processed entirely on your device — nothing is uploaded
How to use the image to base64
- 1Drop an image into the box above.
- 2Choose the output flavour: raw data URI, a CSS rule, an HTML tag or Markdown.
- 3Copy the result and paste it where you need it.
- 4To go the other way, paste Base64 into the decode box at the bottom.
What a data URI is and when it helps
A data URI embeds a file's bytes directly inside the reference to it. Instead of src="logo.png" pointing at a separate file the browser must fetch, the entire image travels inline as text.
The benefit is one fewer network request. On a page with many tiny images — icons, bullets, a spinner, a one-pixel gradient — the round-trip overhead per file can exceed the file itself, and inlining removes it entirely. It also guarantees the image is present the instant the markup is parsed, which eliminates the flash of missing icon.
It is also useful when an image must survive being copied around as text: a logo inside an HTML email template, an icon in a single-file document, or a self-contained page with no accompanying assets folder.
The cost, and where the threshold sits
Base64 encodes three bytes as four characters, so the encoded form is about 33% larger than the file, plus a little for the URI prefix. That overhead is reported above for whatever you convert.
The bigger cost is caching. A separate image file is cached by the browser independently of the page, so a returning visitor downloads it once and reuses it across every page. An inlined image is part of the document, so it is re-downloaded with every page load and cannot be shared between pages.
That is why the usual guidance is to inline only small images — roughly under 5 to 10 KB. Below that, the saved request generally beats the added weight. Above it, and especially for anything reused across pages, a normal file reference wins comfortably. Inlining a 500 KB photograph into your stylesheet makes every page load slower for everyone.
SVG deserves a special mention
For SVG specifically, Base64 is usually the wrong encoding. SVG is text already, so you can URL-encode it into a data URI instead and skip the 33% Base64 penalty entirely — a URL-encoded SVG data URI is often smaller than the raw file.
Better still for icons, inline the SVG markup directly into your HTML. That way it is styleable with CSS: you can set its colour with currentColor, animate it, and change it on hover, none of which works through a data URI.
Decoding, and a word of caution
The decode box takes either a full data URI or a bare Base64 string and renders it as an image you can preview and save. This is handy when you find an inlined image in someone's stylesheet and want to see what it is, or when an API returns image data as a Base64 field.
Treat Base64 from an untrusted source with the same care as any downloaded file. Encoding is not encryption — it is a text representation, trivially reversible, and it provides no security whatever. Anything you can decode here, anyone else can decode too.
Frequently asked questions
How much larger does Base64 make my image?
About 33%, since three bytes become four characters, plus a short prefix. The exact figure is shown after conversion.
When should I inline an image?
For small assets, roughly under 5–10 KB, especially icons used on a single page. Larger or reused images are better as normal files that can be cached.
Does Base64 make images load faster?
It removes a network request, which helps for tiny files. It also prevents caching across pages, which hurts for anything reused. Small and single-use is the sweet spot.
Is Base64 a form of encryption?
No. It is a text encoding and is trivially reversible. It provides no security at all.
What about SVG?
Use URL encoding rather than Base64, or better, inline the SVG markup so you can style it with CSS.
Is my image uploaded?
No. Encoding uses the browser's FileReader; nothing is transmitted.