Page & Bell

Base64 ⇄ Image Converter

Paste a Base64 string to preview and download it as an image, or drop an image to get its Base64, data URI, CSS rule, and HTML snippet. The format is auto-detected from the file's magic bytes — PNG, JPEG, WebP, GIF, BMP, and SVG all work, with or without the data: prefix. Unlike most converters, everything runs in your browser: the image is never uploaded anywhere, which matters when you're debugging screenshots from logs, email templates, or anything under NDA.

Paste a Base64 string to preview it. The format (PNG, JPEG, WebP, GIF, BMP, SVG) is auto-detected from the file signature.

How to use the base64 ⇄ image converter

  1. To decode: paste the Base64 string (the data:image/…;base64, prefix is optional — whitespace and line breaks are stripped automatically).
  2. Check the preview, detected format, dimensions, and decoded size, then click Download to save it with the correct extension.
  3. To encode: switch tabs and drop an image file onto the target area.
  4. Copy whichever output you need — raw Base64, the full data URI, a CSS background-image rule, or an img tag.

How the format detection works

Every image format starts with a fixed signature ("magic bytes"). After decoding your Base64, the tool inspects the first bytes: 89 50 4E 47 means PNG, FF D8 means JPEG, 52 49 46 46 … 57 45 42 50 (RIFF…WEBP) means WebP, 47 49 46 38 (GIF8) means GIF, and text beginning with <svg means SVG. That's why a wrong or missing MIME type in the data: prefix doesn't break the preview — the bytes themselves are authoritative, and the download gets the correct extension.

When data URIs help — and when they hurt

Base64 encodes every 3 bytes of binary as 4 ASCII characters, so a data URI is always about 33% larger than the original file: a 900-byte icon becomes a 1,200-character string, and a 150 KB photo becomes roughly 200 KB of text glued into your markup. Gzip claws some of that back, but never all of it.

Good uses: tiny decorative icons (under ~2 KB) in CSS where an extra HTTP request costs more than the bytes save; images in HTML email, where many clients block remote images by default but render inline ones; quick prototypes and single-file demos; and embedding a logo in an SVG or a README that must be self-contained.

Bad uses: anything large or repeated. A data URI can't be cached independently — change one character of your CSS and the user re-downloads the embedded image with it. It can't be lazy-loaded by the browser's native loading="lazy" logic in any useful way, it inflates the critical-path document that blocks first paint, and on HTTP/2 or HTTP/3 the "requests are expensive" argument that justified inlining mostly evaporated. The tool warns when an encoded output passes 2 MB for exactly this reason.

CSP note: if your site sends a Content-Security-Policy header, inline images need img-src data: (or font-src data: for fonts). Many hardened policies deliberately omit data: because attackers use data URIs to smuggle content — check before you ship.

Frequently asked questions

Is my image uploaded to a server?

No. Both directions — decoding Base64 to a preview and encoding a file to Base64 — run entirely in your browser using the FileReader and Blob APIs. You can disconnect from the internet after the page loads and the tool keeps working. Most competing converters POST your file to their server; this one cannot.

Why do I get an 'invalid Base64' error when the string looks fine?

Usually invisible characters: smart quotes from a chat app, a stray data: prefix pasted twice, or URL-encoded characters like %2B instead of +. The tool already strips whitespace and line breaks and accepts the base64url alphabet (- and _), so if it still fails, the string is genuinely corrupted — often truncated by a log viewer or a database column limit.

How much bigger does Base64 make my image?

Exactly 4/3 of the original, plus up to 2 padding characters — about 33% overhead. A 30 KB JPEG becomes roughly 40 KB of text. After gzip or brotli compression on the wire the real penalty is typically 10–25%, because Base64's limited alphabet compresses partially but never as well as the original binary.

Is it safe to decode an SVG someone sent me?

Here, yes. SVG files can contain JavaScript, but this tool renders the preview inside an img element, where browsers ignore scripts, external loads, and interactivity by design. Be careful where you paste that SVG afterwards though — inlining untrusted SVG markup directly into a page's HTML executes any embedded script.

Can I convert Base64 to PNG specifically, or change the format?

The decoder gives you back exactly the bytes that were encoded — if the Base64 was a JPEG, you download a JPEG. The tool detects the real format from the magic bytes and names the file correctly. To actually transcode between formats you'd redraw the image on a canvas; this tool deliberately doesn't, so the output is byte-identical to the source.

Why does my data URI break in CSS or HTML?

Three usual culprits: line breaks inside the string (some encoders wrap at 76 characters — remove them), unescaped quotes colliding with your attribute quotes, and Content-Security-Policy headers that don't allow data: in img-src. The CSS and HTML snippets this tool generates are single-line and quoted correctly.

Related tools

Learn more