Image to Base64
Turn any image into Base64, a data URI, or ready-to-paste HTML and CSS — and decode strings back into images.
Drop an image and get every flavor of Base64 output developers actually paste: the raw string, a complete data URI, a ready img tag, and a CSS background-image rule — each with its own copy button. Encoding uses the FileReader API in your browser, so the image never leaves your machine.
It decodes too: paste any Base64 data URI to preview the hidden image and save it as a real file. A size warning appears on outputs over 50 KB, because Base64 inflates files by about 33% — brilliant for tiny icons, counterproductive for photos.
How to convert an image to Base64
- 1
Drop or select an image — it is encoded instantly in your browser.
- 2
Copy the output you need: raw Base64, data URI, HTML tag, or CSS rule.
- 3
To go the other way, switch to Decode, paste a data URI, and download the image.
Why use Nofolo’s image to base64?
Four ready-to-paste outputs
Raw Base64, data URI, an HTML img tag, and a CSS background-image rule — copy whichever your code needs.
Decode mode
Paste a data URI or raw Base64 string to preview the image and download it as a file.
Honest size guidance
A warning flags outputs over 50 KB, since Base64 adds roughly 33% overhead and bloats pages fast.
Local and private
Encoding and decoding run in your browser — nothing is uploaded, logged, or stored.
Wide format support
JPG, PNG, WebP, GIF, SVG, and anything else your browser can read as a file.
Frequently asked questions
Is my image uploaded when I convert it to Base64?
No. The FileReader API encodes the file directly in your browser. Nothing is transmitted — the tool even works offline once the page is loaded.
What is a Base64 data URI?
A data URI packs a whole file into a single string (data:image/png;base64,…) that browsers treat like a URL. It lets you embed an image directly in HTML, CSS, or JSON without hosting a separate file.
Why is the Base64 string bigger than my image?
Base64 represents every 3 bytes of binary data as 4 text characters, adding roughly 33% overhead. That trade-off is fine for small icons but wasteful for photos.
When should I use Base64 images?
Small, frequently used graphics under about 10 KB: icons, logos, placeholders, email signatures. For anything larger, a normal image file caches better and loads faster.
How do I convert Base64 back to an image?
Switch to Decode mode, paste the data URI or raw string, and the tool rebuilds the file locally with a preview and a download button.
Related tools
Base64 Encode / Decode
Encode text or files to Base64 — and decode back — UTF-8 safe, with a URL-safe option.
Image Compressor
Shrink JPG, PNG, and WebP file sizes right in your browser — photos never leave your device.
Image Converter
Switch images between JPG, PNG, and WebP in seconds — conversion happens in your browser, not on a server.
Image Resizer
Resize photos to exact pixel dimensions or a percentage — processed locally, never uploaded.