Base64 to Image

See the picture hiding in a Base64 string

Images are often embedded as Base64 text: inside HTML and CSS as data:image/png;base64,... URIs, in JSON API responses, in email source code and in databases. To a human, that's just thousands of random characters. This tool decodes the string and shows you the actual image.

Paste just the Base64 part (everything after base64,), submit, and the image appears so you can check it or download it.

It's mainly a developer and debugging tool: confirm that an API returns the right picture, recover an image embedded in a stylesheet, or check what's inside a suspicious email.

How to use the base64 to image

1. Copy the Base64 string or the full data:image/...;base64, URI.
2. Paste it into the content box.
3. Submit to decode it.
4. View the image, then right-click or long-press to save it.

Examples

A 1×1 pixel PNG in the brand periwinkle

Input:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mPonL4bAAOIAdw0rRDJAAAAAElFTkSuQmCC

Paste it without any prefix and a single #8997BB pixel appears. PNG data always starts with iVBOR, JPEG with /9j/ and GIF with R0lGOD, which is a handy way to recognize what you've got.

Common uses

• Previewing images returned by APIs as Base64.
• Extracting icons or backgrounds embedded in CSS or HTML.
• Checking inline images in email source code.
• Recovering images stored as text in databases or JSON exports.
• Testing your own image-to-Base64 code.
• Checking which image is embedded in a CSS file, email or API response without saving it first.

Tips and things to know

• If nothing shows up, the string may be truncated, contain line breaks or spaces, or not be an image at all.
• The MIME type in the data URI (image/png, image/jpeg, image/svg+xml) tells the browser how to display it.
• To go the other way, use image to Base64. For Base64 text, use the Base64 decoder.
• Shrink the saved image with the image optimizer.

Edge cases and limitations

• The preview is labelled as PNG. Browsers still display JPEG, GIF and WebP data correctly, but SVG data won't show.
• The download menu saves the same data under the name you choose. Picking JPG doesn't convert a PNG; it just changes the extension. Convert formats with an image editor if you need to.
• Very long strings, several megabytes of text, can make the page slow to respond.
• Strings copied from JSON may contain escaped slashes (\/). Replace them with plain / before pasting.

Frequently asked questions

What is a Base64 image?

It's an image file encoded as text using Base64, so it can be embedded directly in HTML, CSS, JSON or email.

Do I need to include the data:image prefix?

No, leave it out. The tool adds its own data:image/png;base64, prefix, so pasting a full data URI doubles the prefix and the image won't show.

Why won't my Base64 image display?

The string may be incomplete, contain invalid characters, or encode something other than an image.

How do I save the decoded image?

Use the download menu above the preview, or right-click (long-press on mobile) the image and save it.

Related tools

• Image to Base64: Transform an image input to a Base64 string.
• Base64 decoder: Decode Base64 input to back to string.
• Base64 encoder: Encode any string input to Base64.
• Image optimizer: Compress and optimize images for a smaller image size but still high quality.
• File mime type checker: Get details of any file type, such as the mime type or last edit date.