Like this tool?
Install byteflow.tools for faster startup and offline tool access.
Install guideLike this tool?
Install byteflow.tools for faster startup and offline tool access.
Install guideConvert images to Base64 data URIs and back.
Drop an image here or click to browse
Supports PNG, JPG, SVG, WebP
Convert images to Base64 formats and decode Base64 image payloads back to previews for integration, embed, and debugging workflows.
It encodes uploaded images to Base64 and data URI output forms.
It decodes raw Base64 or data URI image strings into live previews.
It supports multiple output formats including HTML, CSS, hyperlink, and favicon snippets.
It tracks output size and provides one-click copy actions per format.
Encode source
logo.svg or screenshot.png upload
Decode source
data:image/png;base64,iVBORw0...
Raw payload
iVBORw0KGgoAAAANSUhEUg...
Data URI
data:image/png;base64,...
HTML output
<img src="data:image/png;base64,..." alt="" />
CSS output
.image { background-image: url("data:image/png;base64,..."); }Invalid data URI format
Ensure payload matches `data:<mime>;base64,<content>` structure.
Decode preview fails
Remove whitespace and verify Base64 characters are intact.
Unexpected MIME type in output
Confirm source file type and URI header values.
Very large payload hurts performance
Use file hosting for large assets instead of inline Base64.
Copied snippet breaks HTML/CSS
Escape quotes and verify context-specific syntax.
Image ↔ Base64 should be treated as a repeatable validation step before merge, release, and handoff.
Can I decode both data URI and raw Base64?
Yes, both input formats are supported.
Which output format should I pick?
Use the format that matches your target integration context.
Is Base64 good for large images?
Usually no, large images are better served as files.
Can this generate favicon tags?
Yes, favicon link output is included.
Why is Base64 output bigger than the original file?
Base64 encoding increases payload size by design.