How to use the Base64 to Image
Preview a Base64 image in three steps:
1
Paste the Base64 string
Paste the Base64 string with or without its data URI prefix (e.g. data:image/png;base64, …). The tool accepts both formats.
2
Auto-preview
The image renders instantly in the preview area. If the MIME type is not detected from the data URI prefix, select it manually from the format selector.
3
Download the image
Click Download to save the decoded image as its original file format. Image dimensions and decoded file size are shown in the footer.
When to use this tool
Use to preview and download images stored or transmitted as Base64 strings:
- →Previewing Base64-encoded images returned by APIs before integrating them into a frontend application
- →Inspecting inline Base64 images embedded in HTML or CSS data URIs extracted from source code
- →Recovering and downloading an original image file from its Base64 representation in a database or config file
- →Debugging image data URIs in HTML emails that render as broken images in some clients
- →Verifying that an image was encoded and transmitted correctly through a Base64 pipeline without corruption
- →Converting Base64 image strings received in JSON API responses into downloadable image files
Frequently asked questions
Q:What image formats are supported?
All common web image formats are supported: JPEG (.jpg), PNG, GIF (including animated GIF), WebP, SVG, and BMP. The format is determined from the MIME type in the data URI prefix (e.g. data:image/png;base64,). If your Base64 string has no prefix, select the format manually from the dropdown. TIFF and RAW formats are not displayable in browsers and are not supported.
Q:What is a data URI and how does it differ from a plain Base64 string?
A data URI is a complete inline resource reference in the format: data:[MIME type];base64,[Base64 string]. For example: data:image/png;base64,iVBORw0KGgo…. It tells the browser both the content type (image/png) and the encoding (base64) so it can render the image directly without a separate HTTP request. A plain Base64 string has no prefix — just the encoded characters. Both formats are accepted by this tool.
Q:How do I get a Base64 string from an HTML file?
In HTML source, inline images look like: <img src="data:image/png;base64,iVBOR...">. Copy everything between the double quotes of the src attribute — that is the complete data URI including the prefix. Paste it directly into this tool. In CSS, inline backgrounds look like: background-image: url('data:image/png;base64,...'); — copy the content inside url('...').
Q:Why does my image appear corrupted or fail to render?
Corruption usually happens because the Base64 string was truncated, had whitespace inserted incorrectly, or the wrong MIME type was specified. Check that the full string is pasted without any missing characters. If copied from a URL, ensure percent-encoded characters (like %2B for +) have been decoded first. Try selecting the image format manually if auto-detection is failing.
Q:Can I preview animated GIFs?
Yes — animated GIFs rendered via data URIs play their animation normally in the preview area, because the browser's native <img> element handles GIF animation. The animation plays exactly as it would if loaded from a URL. Download saves the full animated GIF file.
Q:Is there a size limit on the Base64 image string I can paste?
Most browsers handle data URIs up to several megabytes without issues, though some older browsers cap data URI support at 32KB. For typical web images (icons, thumbnails, logos) there is no practical limit. For large images (several MB encoded), performance may degrade slightly during rendering. Images larger than ~1MB are generally not recommended for Base64 inline embedding in production.