Image to Base64

Base64 turns a file's bytes into plain text, so an image can live inside a stylesheet, an HTML page, a JSON payload or an email template instead of being a separate file. You get four ready-made versions: the full data URI, the bare Base64 string, a CSS background-image rule and an HTML img tag. Pick the one that matches where you're pasting it, and the MIME type is already filled in.

The cost is size. Every 3 bytes become 4 characters, so the text is about a third larger than the file. A 3 KB icon becomes about 4 KB, which is a fair trade to save a network request. A 300 KB photo becomes 400 KB of text that the browser can't cache on its own and has to load again with every page or stylesheet that contains it. The tool warns you once a file passes 100 KB.

It works best for small things that are needed straight away: tiny icons, a logo in an email signature, a loading placeholder, an image in a single-file HTML report, or test data in code. For photos, large illustrations or anything used on many pages, a normal image file is faster. Nothing is re-encoded, so it's worth compressing or optimising the image before you convert it, because Base64 keeps every byte you give it.

Decoding goes the other way. Paste a data URI or a bare string and you get the image back to preview and download. The file type is read from the decoded bytes themselves, so a string with a missing or wrong data: prefix still comes out as the right format. Line breaks and the URL-safe variant of Base64 are handled as well, and the result is the same file that was originally encoded.