Base64 Image Encoder & Decoder
Image to data URI and back — copy-ready output, processed entirely on your device.
100% in your browser — files never uploaded
Encoding an image to Base64
Drop a JPG, PNG or WebP and the tool produces the complete data URI — data:image/…;base64,… — ready to paste into CSS, HTML, JSON or code. Size stats show the original bytes against the encoded length so you can judge the ~33% overhead.
Decoding Base64 back to an image
Switch to decode mode, paste any data URI, and the tool validates it, renders a preview, and lets you download the reconstructed image file in its original format.
Why nothing sensitive should go through an online encoder — and doesn't here
Base64 tools are often used on API keys' QR codes, internal screenshots and auth assets. This one runs FileReader and atob locally in your browser — no request ever carries your image or your string anywhere.
Data URIs for Developers, Without the Sketchy Middleman
Embedding an image directly in code — a CSS background, an inline <img>, a JSON fixture, an email template — needs a Base64 data URI, and the usual path is pasting company assets into whichever ad-covered converter ranks first. This tool does the same job with FileReader in your own browser: drop the image, copy the complete data:image/…;base64,… string, and nothing ever leaves your machine. Decode mode does the reverse — paste a URI from code or an API response and get the actual image file back.
The 33% Tax and When It's Worth Paying
Base64 encodes 3 bytes into 4 characters, so every embedded image costs a third more bytes than the file it replaces — before gzip claws some back. The overhead buys you one fewer HTTP request and an asset that travels inside the document. That trade wins for sub-10KB icons in emails and single-file HTML tools; it loses badly for hero images, which also lose browser caching when inlined. The side-by-side size stats here make the decision concrete per image.
Debugging With the Decoder
Half this tool's value is the reverse direction. APIs return images as Base64 blobs, error logs capture data URIs, and canvas toDataURL output ends up in bug reports — paste any of them into decode mode to see what the image actually is, confirm its real format from the MIME prefix, and download it as a proper file. Validation catches the classic failures first: truncated payloads, stripped prefixes and whitespace corruption from chat clients.
Frequently asked questions
When should I embed an image as Base64?
For small assets — icons, tiny logos, email signatures — where saving an HTTP request beats the ~33% size overhead. Large images are better served as normal files, since Base64 bloats them and defeats caching.
Why is the Base64 string larger than my file?
Base64 represents every 3 bytes of binary as 4 text characters, an inherent ~33% overhead. The stats panel shows both sizes so the trade-off is visible.
My pasted string won't decode — what's wrong?
It must be a complete data URI starting with data:image/…;base64, — a bare Base64 payload without that prefix, or one with characters stripped by a chat app, will fail validation.
Is anything sent to a server?
No — encoding and decoding run entirely in your browser with FileReader and atob. It works offline once the page has loaded.
Related tools
Image Compressor
Shrink any image to an exact KB target — without it ever leaving your device.
OpenImage Resizer
Exact pixels, percentage scaling, or one-tap Instagram, YouTube and LinkedIn sizes.
OpenImage to Text (OCR)
Turn a photo or screenshot into editable text — processed entirely on your device.
OpenData verified: 2026-07-11 · All processing happens in your browser — no files are ever uploaded.