Data URI to Image

What Does This Tool Do?

It parses a data:image/...;base64,... (or URL-encoded) data URI, decodes the embedded image data, and renders it as a real, downloadable image file.

Why Use This Tool?

Useful when you've found or been given a raw data URI (from browser dev tools, an API response, or a CSS file) and need the actual image file rather than just the embedded string.

How to Use It

1. Paste the full data URI, including the data:image/...;base64, prefix.
2. Review the live preview.
3. Download the decoded image file.

Limitations

This decodes standard image data URIs client-side - a malformed or truncated data URI is reported as invalid rather than guessed at.

What a Data URI Looks Like

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

It has three parts: the scheme data:, the media type (image/png) with ;base64, and the encoded bytes after the comma. This example is a single 1 × 1 pixel.

Where You Find Data URIs

• In CSS files: background-image: url("data:image/svg+xml,...").
• In HTML exported from email editors, page builders or rich-text fields.
• In the browser's dev tools, when inspecting images that were embedded rather than linked.
• In API responses and database fields that store small images or signatures as text.

Troubleshooting

• "Invalid data URI": the string may be cut off - long values are often truncated when copied from logs or dev tools.
• Line breaks or spaces inside the Base64 part break decoding; remove them.
• SVG data URIs are often URL-encoded rather than Base64 (data:image/svg+xml,%3Csvg...) - both forms are supported.

Go the other way with Image to Base64, or decode raw Base64 without a prefix using Base64 to Image.