How do I convert an image to base64 (data URI) and back?
Image ↔ base64 / data URI converter online.
In "Encode" mode you upload a file, get a base64 string + a full data: URI ready to paste into CSS / HTML.
In "Decode" mode you paste base64 or a data URI, see the image preview, download as a file.
Everything runs locally - image never leaves your browser.
Great for devs: embedding icons in CSS without extra requests, email signatures with inline images, debugging marketing HTML emails.
How to use it
- Pick a mode: "Encode" (file → base64) or "Decode" (base64 → file).
- Encode: drop a file or click "Choose file". PNG, JPG, WebP, AVIF, HEIC, SVG, GIF.
- You get two outputs: the full `"data:image/...;base64,..."` (ready for CSS `background-image` or HTML `src`), and the "base64 only" payload.
- Decode: paste the full data URI or just the base64 payload. The tool detects the format from the prefix or assumes PNG. Preview + download button.
When this is useful
Where base64 and data URIs pay off - typical uses:
- CSS without extra requests - tiny icons as background-image: url(data:image/svg+xml;base64,...) eliminate the server round-trip.
- Email signatures - embedded logo needs no CDN, works offline.
- SVG sprite alternatives - for very small icons (<2 KB) a data URI is often smaller than HTTP header overhead.
- JSON payloads - APIs that don't accept multipart-form-data but do accept base64-encoded images in JSON.
- Email marketing - some platforms (Mailchimp, Brevo) expect images as base64.
- Test fixtures - in front-end tests (Playwright, Cypress) screenshots are often base64-coded.
Questions and answers
No. Everything runs locally via the FileReader API. Decode too - we decode base64 to bytes locally, build a Blob URL. DevTools → Network = no requests.