Image to Base64
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.
Input
Drop an image here
or click to browse: JPG, PNG, WebP, GIF, SVG
Base64 Output
How to convert an image to Base64
Three steps. The only decision is raw Base64 or a full data URI.
- 01
Drop your image
Drag a JPG, PNG, WebP, GIF, or SVG onto the tool. The FileReader API handles everything locally. Nothing leaves your browser.
- 02
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,... and that's what you paste into an HTML src or CSS background-image. Copy whichever one your code expects.
- 03
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.
When Base64 actually makes sense
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, since 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.
How much bigger Base64 makes an image
Base64 writes every 3 bytes of the file as 4 text characters, so the encoded image is about a third larger than the file itself. A 5 KB icon becomes about 6.7 KB of text; a 50 KB photo becomes about 67 KB. A data URI adds a short prefix such as data:image/png;base64, in front.
| Image file size | Base64 size | Inline it? |
|---|---|---|
| 2 KB icon | about 2.7 KB | Yes, saves a request |
| 8 KB logo | about 10.7 KB | Usually fine |
| 50 KB photo | about 67 KB | Better as a normal file |
| 500 KB photo | about 667 KB | No |
The trade-off: an inlined image can't be cached on its own, so it's downloaded again with every page or stylesheet that contains it, and it delays rendering of the HTML around it. Inline small icons and placeholders; serve anything bigger as a regular image.
Decoding a Base64 string back to an image
Paste either a full data URI or raw Base64. For raw strings, the tool looks at the first bytes to tell JPEG, PNG and GIF apart and shows a preview you can download. Other formats, such as WebP, are treated as PNG for the preview, so paste the full data URI, with its image/webp type, to keep them right.