Image to Base64

What is a Base64 data URI?

A data URI embeds a file's entire contents directly inside a string: data:image/png;base64,iVBORw0KGgo…. The browser decodes it on the spot, so the image renders with zero additional HTTP requests. That makes data URIs perfect for the places where a separate file is awkward or impossible: single-file HTML documents and email templates, small icons inlined into a CSS file, favicons in prototypes, images inside JSON API payloads, or fixtures checked into a test suite. This tool reads your image with the browser's FileReader API and hands you the URI three ways — raw, wrapped in an <img> tag, and as a CSS background-image rule.

The 33% tax — when inlining is the wrong choice

Base64 represents every 3 bytes of binary as 4 ASCII characters, so the encoded string is roughly 33% larger than the original file — the before/after sizes are shown right in the tool so the cost is never hidden. Inlined images also can't be cached independently: change one byte of surrounding CSS and the whole embedded image re-downloads with it, and the browser can't reuse it across pages the way it would a normal image URL. The practical rule: inline images under a few kilobytes (icons, tiny logos, blur-up placeholders) where saving a request round-trip genuinely helps, and serve anything bigger as a regular file from a CDN. That's also why this tool caps input at 2 MB — beyond that, a data URI is almost never what you want.

FAQ

Is my image uploaded to a server?

No. The file is read and encoded entirely inside your browser using the FileReader API — there is no upload, no processing queue and no server-side copy. You can watch the network tab while converting: no request is made.

Which image formats work?

Anything your browser recognises as an image: PNG, JPEG, GIF, WebP, AVIF and SVG. The correct MIME type (e.g. image/webp) is embedded in the data URI automatically, taken from the file itself. SVG is a special case worth knowing: since it's already text, URL-encoding an SVG is often smaller than Base64-encoding it.

Why is the Base64 string bigger than my file?

By design — Base64 maps binary onto 64 printable characters, expanding data by a factor of 4/3 (plus padding). If the final destination is a gzip- or brotli-compressed asset (like a CSS bundle), some of that overhead is recovered in transfer, but the decoded memory cost remains.