Drop an image and get its Base64 data URI instantly, along with the raw Base64 string, an HTML <img> tag and a CSS background-image rule ready to paste into your code. A preview, the pixel dimensions and the encoded length help you decide whether inlining is worth it.
The reverse mode decodes a data URI or plain Base64 back into a picture you can view and download, detecting PNG, JPEG, GIF, WebP, SVG, ICO and BMP from the data itself. Images are read with the browser’s FileReader and never uploaded, which matters when you work with unreleased designs or screenshots.
How to use the Image to Base64 tool
- Choose Image → Base64 and drop, paste or pick an image file.
- Check the preview, size and dimensions.
- Copy the data URI, the Base64 string, the HTML tag or the CSS rule.
- To go the other way, switch to Base64 → Image and paste the string.
- Press Download image to save the decoded file.
Why use ToolOrca Image to Base64
- Data URI, raw Base64, HTML and CSS output
- Supports PNG, JPG, GIF, WebP, SVG and ICO
- Base64 to image with type detection
- Shows dimensions and encoded size
- Warns when an image is too big to inline
- No upload, works offline
When should you inline images as Base64?
Inlining saves an HTTP request, which helps for tiny images such as icons, loading spinners and small background patterns, especially in HTML emails and single-file pages. It is also handy in CSS files, JSON APIs and tests where a separate file is awkward.
For anything larger than about 10–20 KB, a normal image file is usually better: Base64 adds roughly a third to the size, cannot be cached separately from the page or stylesheet, and delays rendering because the browser must parse it with the surrounding code.
For SVG icons, a URL-encoded data URI (data:image/svg+xml,…) is often smaller than Base64. This decoder accepts both kinds.
Frequently asked questions
What is a data URI?
A data URI embeds a file directly in a URL. It looks like data:image/png;base64,iVBOR…: the MIME type, the word base64, a comma and the encoded data. Browsers treat it like a link to a real image.
Is there a file size limit?
No fixed limit, because nothing is uploaded. Very large images produce very long strings that can make the text boxes slow, and they are rarely a good idea to inline.
Do Base64 images work in HTML emails?
In Apple Mail, iOS Mail and many others, yes. Gmail and some versions of Outlook block data URI images, so for important email images, linked files are more reliable.
Why does the Base64 to image decoder say it cannot tell the type?
Raw Base64 without a data: prefix is identified by its first bytes. If the format is unusual, add a prefix such as data:image/png;base64, before the data.