Base64 to Image

This does the opposite of encoding: paste in a Base64 string, with or without the data:image prefix, and it renders back into a real, downloadable image. Useful when you've got image data buried in some code, a JSON response, or an email source and just want to see the actual picture.

How to use it

1. Paste the Base64 string in, including the data:image prefix if you have it.
2. If you only have the raw text with no prefix, paste it as is. The tool assumes PNG by default.
3. Click render image.
4. Check that it looks right in the preview.
5. Click download image to save it.

When it helps

• Viewing an image that's embedded in an HTML email's source code.
• Pulling an image out of an API response where it was returned as Base64 text.
• Recovering an image from a JSON export or backup where it was stored as encoded text.
• Double checking that a Base64 string you generated actually represents the image you meant.
• Turning an inline CSS background image back into a normal file.

Good to know

• Make sure you copied the whole string. A single missing character breaks the decoding.
• If the image comes out broken, the original format might not actually be PNG, try adjusting the prefix.
• Strip out any surrounding quotes before pasting, only the actual encoded data should be in the box.
• If you're pulling an image from a JSON API response, copy only the value of the relevant field, not the surrounding quotes or JSON syntax, before pasting it here.
• If you're not sure whether a long string you found is even meant to be an image, try rendering it here first before assuming it's corrupted or the wrong kind of data.

Questions