Base64 Image Converter
Convert an image file to a Base64 data URI, or paste a Base64 string to preview it as an image.
How this tool works
Choose a direction
Image → Base64 to encode a file, or Base64 → Image to preview a string.
Upload or paste
Select an image file, or paste a Base64 string or data URI.
See the result
A data URI with copy button, or a live image preview, depending on the mode.
Use it directly
Drop the data URI straight into an HTML src or CSS background-image.
Quick facts
- Category
- Converters
- Best for
- Inlining a small icon directly into CSS
About this tool
Switch between two directions: upload an image file to get its Base64-encoded data URI (the format usable directly in an HTML src attribute or a CSS background-image, with no separate file request needed), or paste a Base64 string or an existing data URI to render it back as a visible image preview and confirm it decodes correctly. The image-to-Base64 direction reads the file entirely in the browser using the File API, so nothing is uploaded anywhere. The Base64-to-image direction accepts either a bare Base64 string or a full data:image/...;base64,... URI, and shows a specific error if the input doesn’t decode into a displayable image - for example if it’s truncated, corrupted, or isn’t actually image data. Useful for embedding small icons or images directly into CSS or HTML without extra file requests, or verifying that a Base64 string you received actually represents the image you expect. Runs entirely client-side.
Why use this tool
Both directions covered
Encode an image to Base64, or decode a Base64 string back into a visible preview, in one tool.
Local file processing
Images are read using the File API entirely in your browser - never uploaded anywhere.
Instant visual confirmation
The Base64 → Image mode renders a real preview, so you can confirm the string decodes correctly.
Clear decode errors
A specific error appears when a string doesn’t decode as a valid image, not a blank result.
Frequently asked questions
A Base64 data URI embeds the image’s bytes directly inside your HTML or CSS, which eliminates a separate network request for that image - useful for small icons, inline SVG-like assets, or emails (which often can’t reliably load external images). The trade-off is that Base64 encoding inflates the data size by roughly a third, so it’s generally only worth it for small images where saving a request matters more than the extra bytes.
The most common causes are a truncated string (part of it got cut off when copying), missing padding characters at the end, or the string actually being something other than image data. If you’re pasting a bare Base64 string rather than a full data URI, make sure it’s the complete, unmodified encoded output - even a single missing character can make the whole thing fail to decode.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools