How to Convert an Image to a Base64 Data URI and Decode One Back to a File
Learn how to produce an inline data URI from any image file, copy it for HTML or CSS, and preview and download an image from a pasted Base64 string.
Image to Base64
Introduction
Inlining small images as data URIs removes an HTTP request and keeps icons inside a single HTML, CSS or JSON file. The Image to Base64 tool reads a file with the browser FileReader API and returns the full data URI including its MIME prefix; the reverse tab renders a pasted Base64 string as a preview and offers it for download. No file is sent to a server in either direction.
Step-by-Step Instructions
- Stay on the Image to Base64 Data URI tab and click Upload Image to Convert to Base64 String to choose a file.
- Read the output label, which shows the total character count of the generated data URI.
- Click Copy Base64 String and paste the value into an img src attribute or a CSS url() value.
- Switch to the Base64 to Image File tab and paste a full data URI into the Paste Base64 Data URI box.
- Check the Decoded Image Preview and click Download Image File to save the decoded image.
Key Use Cases
- Inline Icons: Embed a small SVG or PNG icon directly in a stylesheet to avoid an extra request.
- Email Templates: Produce data URIs for images that must travel inside a single HTML file.
- Debugging Payloads: Paste a Base64 image string from an API response to see what it contains.
Frequently Asked Questions
What format is the output string?
The tool returns the result of FileReader.readAsDataURL, which is the complete data URI such as data:image/png;base64,iVBOR... The MIME type comes from the file's own type, so a JPG produces an image/jpeg prefix. If you only need the raw Base64 payload, delete everything up to and including the comma.
Does decoding require the data: prefix?
Yes. The preview sets the pasted text directly as the img src, so it must be a full data URI with the data:image/...;base64, prefix. A bare Base64 string without the prefix will not render a preview.
Why is the downloaded file named decoded_image.png?
The download link always uses the filename decoded_image.png regardless of the MIME type in the pasted string. The bytes inside are unchanged, so if the data URI holds a JPEG or WebP image, rename the extension after download to match.