Skip to main content

Base64 to Image

What it does

The Base64 to Image tool reverses the encoding done by the Image to Base64 tool. Paste a full data URL (the data:image/png;base64,… form) or a raw base64 string, and the tool decodes it into a real image you can preview and download. Five formats are recognised — PNG, JPEG, WebP, GIF, and SVG. When the input is missing the data URL prefix, you pick the source format from a small set of options.

Common situations

You’re inheriting a HTML email template that has every image inlined as base64. The marketing team wants the original PNG files extracted to use elsewhere. Pasting each base64 string here returns the original image — slower than asking the previous developer for the source files, faster than rebuilding them.

You’re debugging an API response that returns image data as base64 in a JSON field. The front-end shows nothing; you suspect the data is malformed. Decoding the base64 here either produces a valid image (the API is fine, look elsewhere) or fails (the API is the problem). The tool is the diagnostic step that narrows the question.

You’re auditing a website’s source for assets you can analyse — competitive intelligence, design pattern study, or asset attribution work. Many sites inline icons and small graphics as base64 in CSS or HTML; right-click-save does not work for these. Pulling the data URL out of the source and decoding it here recovers the file.

You’re working with a vendor system that exports images encoded in proprietary database fields. The exports come out as base64 strings you cannot directly view. Bulk decoding via a script is the long-term answer; one-off decoding for spot-checks is what this tool exists for.

You’re testing whether a base64 string is valid or corrupted before using it in production. Decoding successfully proves the bytes round-trip; failing tells you the string is broken at the encoding level rather than the rendering level.

What you need to know

A data URL has the form data:<mime-type>;base64,<payload>. The decoder splits on ,, takes the payload, runs it through atob() to get a binary string, then converts that to a Uint8Array and constructs a Blob with the declared MIME type. The Blob is what the browser uses for both the preview and the download.

When the input lacks the prefix, the tool needs to know what format to assume — base64 itself is just bytes, with no signal about whether those bytes are PNG or JPG or anything else. Picking the right MIME type matters; mismatching produces a downloadable file that will not open in any image viewer.

Whitespace and line breaks in pasted base64 are stripped automatically, since real-world copy-paste often inserts them. Padding (= characters) is added if missing — base64 strings should always be a multiple of four characters long, but trailing padding is sometimes truncated by sloppy tooling. The decoder is forgiving on these formatting details.

URL-safe base64 (which uses - and _ instead of + and /) appears in JWTs, OAuth flows, and some API contexts. The standard base64 decoder rejects these characters; URL-safe decoders accept both. The tool detects URL-safe variants automatically.

Identifying the format from raw base64 is sometimes possible by checking the first few decoded bytes. PNG files start with 89 50 4E 47 0D 0A 1A 0A, JPEGs with FF D8 FF, WebP with 52 49 46 46 ... 57 45 42 50. Forensic tools use these magic bytes; the tool here uses the explicit MIME selection rather than auto-detection because guessing wrong produces silent corruption rather than visible error.

For SVG input, the tool produces an .svg file. SVG is text-based, so technically does not need base64 encoding — using base64 for SVG is occasionally done (for inclusion in JSON fields that prefer base64) but is ~33% larger than the URL-encoded alternative. If you frequently see SVG-as-base64, that is a sign of a system that defaulted to base64 without considering format-specific alternatives.

The downloaded file is byte-identical to the source binary — the encoding-decoding cycle is lossless. Whatever was encoded comes back out exactly. This is not the case for image format conversion (which re-encodes); base64 transit is purely textual representation.

Frequently asked questions

What is a base64 string?

A textual representation of binary data using 64 ASCII characters (A–Z, a–z, 0–9, plus +// standard or -/_ URL-safe). Every three bytes of binary become four characters of base64.

How do I decode base64 to an image?

Take the base64 payload (everything after ;base64, if it is a data URL), pass it through atob() to get a binary string, convert to a Uint8Array, wrap in a Blob with the right MIME type. The tool does this for you; the underlying steps are the same in any language.

What’s the difference between standard and URL-safe base64?

Standard uses +, /, and = for padding. URL-safe replaces + with -, / with _, and often drops padding. Both encode identical bytes; the difference is which characters they use to do it. JWTs always use URL-safe; most other contexts use standard.

Why does my decoded image look corrupted?

The MIME type does not match the actual bytes. If the source was a JPEG but you decoded as PNG, the file extension lies and no viewer can open it. Try the other formats (PNG, JPEG, WebP) — one will produce a valid image.

How do I know what format my base64 is?

Look at the first few decoded characters. PNG starts with iVBOR, JPEG with /9j/, WebP with UklGR. These prefixes are the base64 representations of each format’s magic bytes. Recognising them takes practice but is faster than trial-and-error.

Can I decode multiple base64 strings at once?

Not in this tool. Single string at a time. For batch decoding, a CLI script (Python’s base64 module, or base64 -d in shell) handles dozens in seconds.

Will the decoded image be the same quality as the original?

Yes — base64 is lossless. The byte-for-byte original comes back out. Any quality difference between the source and what you see now happened during the original image’s encoding, not during base64 transit.

Why does the tool reject my pasted base64?

Most often: invalid characters mixed in (spaces are fine, but other punctuation is not), or the string is truncated. Real-world copy-paste sometimes loses the last few characters or adds quotes around the value — strip those and try again.

Common problems

Problem: “Invalid base64” error on a string I know is valid.

The string probably has hidden characters from the source — non-breaking spaces, smart quotes, or BOM markers from a Windows text file. Re-copy from the original or paste through a plain-text intermediary (a code editor’s plaintext mode) before decoding.

Problem: Decoded image opens but is blank/transparent.

For PNG, the alpha channel may be 0 across the whole image — visible only as transparency. Try opening the file against a coloured background to confirm there’s actual image data. For JPEG, blank usually means a corrupt source.

Problem: SVG content decoded as text rather than rendering as an image.

The decoder produces a Blob with the SVG MIME type; viewing in the preview should render. If the preview shows nothing, the SVG content may have errors — try copying the decoded text into a code editor that highlights SVG syntax to find the issue.

Problem: Downloaded file has no extension.

The tool should set the extension based on the MIME type. If yours is missing, the MIME selection may have been ambiguous; download manually and add the correct extension based on the format you specified.

Problem: Animated GIF decoded but plays only the first frame.

The decoder produces the original GIF bytes correctly. If the preview only shows one frame, the issue is in the preview rendering, not the file. Download the GIF and open it in an image viewer that supports animation; the file is intact.

Quick guides

For email-template extraction: Find the <img src="data:..." in the HTML source, copy everything between the quotes, paste here. Save the resulting image with a descriptive filename. Repeat per image.

For competitive analysis / asset extraction: Open the page in DevTools, find images in the network tab or directly in the HTML/CSS source. Inlined images appear as data:image/... URLs. Copy and decode here.

For API debugging: When an API returns base64 image data and the front-end shows nothing, paste the raw value here. If it decodes to a valid image, the API is fine and the rendering pipeline is at fault. If it fails, the API is the problem.

Tips

  • If you have the full data URL, paste that — the format detects automatically. The “raw payload + pick MIME” path is for when you only have the bytes.
  • Invalid base64 produces “could not decode” rather than a corrupt download. The most common cause is a truncated copy — make sure you have the entire string.
  • SVG is technically text, not binary. SVG-as-base64 is unusual outside of specific edge cases (CSS url() references, hand-built data URLs for icons). Most SVGs travel as plain text.
  • Decoded files can be larger than expected. Base64 is roughly 33% larger than the binary, so a 10KB base64 string decodes to about 7.5KB of file.
  • If a JWT’s segments need decoding (header or payload, not signature), use the dedicated JWT Decoder — it handles URL-safe base64 plus the JSON parsing automatically.
  • Magic-byte recognition for the first few characters of base64: iVBOR = PNG, /9j/ = JPEG, UklGR = WebP. Useful when you do not know the format.

Related tools in this suite

The natural pairing is the Image to Base64 encoder — round-trip when you need to verify that an encoding cycle is lossless (it is, for binary formats). The Image Format Converter is useful immediately after decoding if you want to convert the recovered image to a different format before saving.

Take it further

Repeated manual base64 decoding usually signals that an upstream system is mishandling data. APIs returning base64 image fields, source code with hundreds of inlined assets, email templates that inline everything — all of these have better shapes that the systems we build can install. Base64 has its place; using it as the default storage format for images rarely is.