Loading...
Please wait while we prepare your experience
Loading...
Please wait while we prepare your experience
Drop an image, get a Base64 string back. Paste it straight into an HTML img tag, a CSS background, or a JSON payload — no separate file needed. Works the other way too: paste a Base64 string and download the image.
Drop an image here
or click to browse — JPG, PNG, WebP, GIF, SVG
Three steps. The only decision is whether you need raw Base64 or a full data URI.
Drop your image
Drag a JPG, PNG, WebP, GIF, or SVG onto the tool. The FileReader API handles everything locally — nothing leaves your browser.
Pick what you need — raw Base64 or a full data URI
Raw Base64 is just the encoded string. A data URI wraps it: data:image/png;base64,... — that's what you paste into an HTML src or CSS background-image. Copy whichever one your code expects.
Paste it where you need it
Drop it into an img src, a JSON field, a CSS file, or wherever. The image loads inline — no separate HTTP request, no broken image if the file moves.
It's not always the right choice — but for these six cases it is.
Small icons that shouldn't need a network request
A 1 KB favicon or UI icon encoded as Base64 loads with the HTML. No extra round trip, no flash of missing image. Only worth it for small files — Base64 adds ~33% to the size.
Email templates with blocked images
Gmail and Outlook often block external images in HTML emails. Embed small images as data URIs and they show up regardless of the client's image-blocking settings.
APIs that expect Base64 image data
Some REST APIs and AI vision endpoints (OpenAI, Google Vision) want images as Base64 strings in the request body rather than file uploads. Convert here, paste into your API call.
CSS background images bundled with the stylesheet
A small texture or pattern encoded as Base64 can live directly in your CSS file. One less file for the browser to fetch.
Offline web apps
If your app needs to work without a network connection, images embedded as Base64 in the HTML or JS bundle are always available — no CDN required.
Decoding a Base64 string you received
Got a Base64 string from an API response or a log file and want to see what image it is? Paste it into the decode tab and download the result.
Found a problem with Image To Base64? Let us know.
Your feedback helps us improve.