Image to Base64 Converter

Because this tool needs to preserve the file exactly as it is. Drawing an image onto a canvas decodes it into raw pixels and then re-encodes those pixels — for a lossy format that's a genuine re-compression, and even for PNG it can change the exact bytes (different encoder, different metadata). FileReader.readAsDataURL() instead reads the file's original bytes directly and represents them as base64, so what you get out is byte-for-byte the same file, just re-encoded as text.

Base64 represents every 3 bytes of binary data as 4 text characters, each drawn from a 64-character alphabet — so encoded text is always about 4/3 the size of the original, roughly a 33% increase. That overhead is the price of representing arbitrary binary data using only letters, digits, and a couple of symbols, which is what makes it safe to embed in places that expect plain text, like a CSS `background-image` or a JSON field.

This tool detects that the pasted text doesn't start with data: and prepends data:image/png;base64, automatically before trying to render it. If the image is actually a JPEG or WebP, most current browsers will still display it correctly because they check the real file signature in the bytes rather than trusting the declared type — but for guaranteed accuracy, paste the full data URI (with its correct mime type) instead of just the raw Base64 portion.

Setting an <img> element's src to invalid data normally leaves you staring at a broken-image icon with no explanation. This tool listens for the image's own onerror event and swaps in a clear, friendly message instead — so a corrupted string, a truncated paste, or plain text pasted by mistake all get a straightforward explanation rather than a dead end.

No. Encoding uses FileReader entirely inside your browser, and decoding sets an <img> element's src directly from the text you typed — neither step ever touches a network request. That's true for every tool on this site.