Image to Base64 Converter
Convert an image to a Base64 data URI, or decode one back to a file. Get it as a data URI, CSS background, img tag or Markdown, with the real size cost measured. Free and fully in your browser.
Runs in your browserNothing uploadedFree · no signup
Drop an image here, or click to choosePNG, JPG, GIF, WebP, SVG, AVIF or ICO. Encoded in your browser — never uploaded.
Everything here runs in your browser — the file is read with FileReader and encoded in memory, so nothing is uploaded and it works offline once the page has loaded. To go the other way and shrink a file before inlining it, use the image compressor; to turn a vector into a raster first, use SVG to PNG. For text rather than files, there is a plain Base64 encoder.
Frequently asked questions
- How much bigger does Base64 make my image?
- On disk, almost exactly one third: Base64 spends four characters on every three bytes, so a 12 KB PNG becomes 16 KB of text, plus about 22 characters for the data: header. Over the wire it is far less than that, and the tool measures it for your file rather than quoting the folklore. Base64 uses only 64 of the 256 possible byte values, so the output is highly redundant and gzip wins most of the overhead back - on a typical photo the real transfer cost of inlining lands nearer 5 to 8 percent than 33. That is worth knowing, because it means size is rarely the reason not to inline. The reason is caching.
- When should I inline an image as Base64, and when should I not?
- Inline it when the request costs more than the bytes do: small, decorative, on nearly every page, and changing at the same rate as the file it lives in - icons, bullets, a tiny texture, a logo in an email signature. A few kilobytes is the usual ceiling, and it is lower than the folklore suggests: that advice was formed when HTTP/1.1 allowed six connections per host and an extra request genuinely hurt, whereas over HTTP/2 and HTTP/3 the request you are saving is cheap. Above that, stop. A data URI cannot be cached on its own, so it is re-downloaded inside every page or stylesheet that carries it, and it bloats the very file the browser needs earliest to render anything. A 200 KB hero image inlined into a stylesheet delays every style on the site while it downloads, and a repeat visitor pays for it again. Files that big belong in their own cacheable request.
- Why does the tool say my SVG does not need Base64?
- Because SVG is the only image format that is already text, so wrapping it in Base64 encodes text as text and pays a third extra for nothing. A percent-encoded data URI escapes only the characters that would break a URI or a CSS url(), leaves the rest legible, and compresses like the markup it still is. Gzipped it is dramatically smaller - measured at 46 percent smaller than the Base64 form on this site's own social image. It also stays editable: you can change a fill colour in the stylesheet without re-encoding anything, which you cannot do with a Base64 blob. The tool shows both encodings with their real sizes so you can see the gap on your file.
- Why does my Base64 decode here when other tools reject it?
- Because the string people actually have is rarely the string a plain decoder wants. Base64 copied out of an email or a certificate is wrapped at 76 columns; copied from a JWT or an API it uses the URL-safe alphabet, with - and _ in place of + and /; copied from JSON it has often lost its = padding; and copied from a stylesheet or a template it is still wearing the url("...") or src="..." around it. Each of those makes a bare atob() throw. This decoder unwraps the markup, translates the alphabet, restores the padding and then tells you which of those it had to fix, so you also learn what was wrong with the string.
- Is my image uploaded to a server?
- No. The file is read with the browser's own FileReader and encoded in memory - there is no upload, no queue and no copy on anyone's disk. That is worth caring about here specifically, because the images people convert to Base64 are often the ones they cannot hand to a third party: an unreleased logo, a signature, a screenshot from an internal tool. It also means the page keeps working offline once it has loaded.