Image to Base64 Converter

When inlining an image is a good idea

A data URI removes one HTTP request, which is worth having for a tiny icon, a 1×1 tracking pixel or an inline SVG. Past roughly 10 KB it stops paying:

• The bytes cannot be cached separately — every page load re-downloads them
• They inflate your CSS or HTML, which usually blocks rendering
• Base64 adds about 33% on top of the original file size

For anything larger, link the file and let the browser cache it.

The type is read from the bytes

The MIME type is detected from the file's magic number, not its extension. A .png that is really a JPEG is common — from a rename or a careless export — and trusting the extension would produce a data URI no browser can render. PNG, JPEG, GIF, WebP and SVG are all recognised by signature.

Output formats

• Data URI — the raw data:image/png;base64,… string
• CSS — wrapped in background-image: url("…")
• HTML — a complete <img> tag, with empty alt, width and height ready to fill in
• Raw Base64 — payload only, for JSON fields and API bodies

Your image never leaves the device

Encoding happens in the browser using the File API. Nothing is uploaded, so this is safe for screenshots, internal diagrams and anything else you would not want sitting on a stranger's server.