Image to Base64 Converter

Turn an Image Into a Base64 Data URI — and Back

Drop in a PNG, JPEG, SVG, WebP, GIF, or BMP and get its Base64 data URI instantly, with ready-to-paste snippets: the raw string, an <img> tag, and a CSS background-image rule. Switch to decode mode to paste a data URI — or a bare Base64 blob with no prefix — and preview and download the real image, with the file type recovered automatically from its bytes.

Because everything runs in your browser, there is no upload step and no server-imposed size cap. You also see the honest tradeoff up front: Base64 encodes three bytes into four characters, so the string is about 33% larger than the file it came from.

One caveat worth knowing: inline data URIs aren't cached separately from the page and they bloat your HTML or CSS, so they earn their place on small assets — icons, sprites, tiny logos — not full-resolution photos. The tool flags a data URI when it gets large.

Common Use Cases

• Inline a small icon: Embed a logo or sprite straight into HTML or CSS so it loads with the page and never 404s from a broken path.
• Seed data and fixtures: Paste an image into JSON, YAML, or a test fixture as a single self-contained string.
• Debug a data URI: Drop in a URI you found in devtools or a stylesheet to see the actual image plus its real type and byte size.
• Recover an image from Base64: Turn a Base64 string from an API response or a log line back into a downloadable file.
• CSS backgrounds: Copy the background-image rule directly into any stylesheet that needs the asset inlined.
• Share where files aren't allowed: Move a tiny image as plain text through a chat, ticket, or form field that blocks attachments.

Privacy: Encoding and decoding both run entirely in your browser using the FileReader and atob APIs — your images are never uploaded to a server.