How to decode a Base64 image safely

An API response, HTML page or stylesheet may contain an image as a long Base64 string instead of a separate file. To inspect or reuse it, you need to decode the bytes and give them an appropriate image format. The Base64 to image tool does that in your browser. This guide explains what to paste, how to check the result and why a valid-looking string can still fail.

Recognize the two common input forms

A data URI starts with a prefix such as data:image/png;base64, followed by the encoded characters. The prefix declares the intended media type and tells a browser that the rest of the value is Base64. You can paste the entire URI into the tool. A raw Base64 string omits the prefix; paste it as it is. The tool also accepts Base64URL characters, where - and _ replace two characters used in ordinary Base64.

Do not paste surrounding JSON quotes, an HTML src= attribute or a CSS url(...) wrapper. Extract the value inside them. A copied API response may show escaped characters or insert line breaks; whitespace in the encoded text is acceptable, but punctuation from a wrapper is not part of the image data. If the response contains several fields, locate the one that actually holds the image rather than copying the whole object.

Decode and check the preview

Paste the encoded value into Base64 to image, then choose Convert to image. When decoding succeeds, check the preview and reported dimensions. A recognizable preview matters more than a filename or a claimed MIME label. The tool inspects the decoded file signature for common raster types instead of trusting the type written in the data URI. It accepts PNG, JPG, WebP, GIF and BMP, plus SVG markup that passes its safety checks.

If a data URI says image/png but the bytes are actually JPEG, the decoded content is treated as JPEG. If the bytes are not a supported image, the tool reports an error. This is preferable to silently saving an arbitrary file with a misleading extension. Do not change the prefix to make unknown data “work”; find the original source or verify what the API returned.

Understand image dimensions and limits

A small text field can decode into a large image. The tool limits input text to 16 MB, then checks decoded image dimensions: at most 8192 pixels along either edge and at most 32 million pixels in total. These limits help keep browser memory use manageable. A 7000 × 7000 image exceeds the total-pixel limit even though each edge is under 8192.

Base64 also makes the textual representation larger than the underlying binary data. If you are choosing how to store images in an application, a separate image file is usually easier to cache and maintain than a very long inline string. Data URIs can still be convenient for a small self-contained asset or a response from a system you do not control.

Choose a download format deliberately

After previewing, select PNG, JPG or WebP. If the selected format matches the decoded source type, the tool downloads the original decoded bytes. Choosing another format draws the image into a canvas and exports a new file. This distinction matters: a new encoding may change file size, metadata or pixels, while keeping the original type preserves the decoded file itself.

PNG retains transparency and works well for crisp graphic edges. WebP can retain transparency and often suits web delivery, depending on export settings. JPG has no transparency, so this tool places transparent pixels on white when converting to JPG. If the source is a logo intended for a dark page, that white fill may be wrong; choose PNG or WebP instead. Adjust the quality slider for JPG or WebP and inspect the result. Higher quality does not repair detail already missing from a compressed source.

Know what happens with GIF and SVG

An animated GIF can be decoded and previewed, but PNG, JPG or WebP export uses its first frame. This tool does not turn an animation into an animated file. If you need to preserve motion, keep the original GIF bytes in a workflow designed for animated formats. BMP can be read but must also be exported to one of the available download formats.

SVG is different from a raster image: it is XML markup describing shapes. The tool rejects SVG with scripts and external or active references before showing it. A safe SVG can be decoded, then exported as a raster PNG, JPG or WebP. Raster export fixes the dimensions in pixels; it no longer scales indefinitely like the source vector file. If your destination accepts SVG and you need editable vector artwork, retain the original SVG instead.

Diagnose common failures

An “invalid characters or padding” error usually means a wrapper, quote, comma or unrelated character was copied along with the Base64. Remove the wrapper and retry with only the encoded value or complete data URI. An “incomplete” error can indicate a truncated copy. Check whether the source field was shortened in a log viewer or database console before attempting to repair padding by hand.

If the tool says the decoded data is not a supported image, verify the API contract or the content source. Base64 can encode any bytes, including a PDF, text document or compressed archive; being valid Base64 does not make it an image. If an SVG is rejected, remove unsafe external dependencies in the source artwork or obtain a clean export from its author. Do not bypass the validation by relabeling its MIME type.

If decoding succeeds but the preview looks wrong, check whether you copied the right response field and whether the source is an animated or unusually encoded file. Compare the reported dimensions with what you expect. An implausibly small image may be a thumbnail or placeholder rather than the full asset.

Keep sensitive images under your control

The decoding runs locally in your browser; btools does not receive the pasted image. The downloaded file is saved through your browser in the usual way, so consider where your device stores downloads. If the image came from a private API or document, avoid pasting the resulting data URI into a public issue or chat while seeking help. The encoded text contains the image itself and is not a harmless reference.

For a reusable workflow, save the original encoded value only when you need it, decode to an appropriate format, verify the preview and dimensions, then open the downloaded file in its real destination. That final check catches format and transparency problems before the file is published.