Image to Base64 Converter
Drop an image in to get a Base64 data URI ready for CSS or HTML. The file never leaves your device.
PNG, JPEG, GIF, WebP, or SVG — read locally, never uploaded.
Embedding small images as Base64 data URIs removes an HTTP request and makes assets self-contained — handy for CSS backgrounds, email-safe HTML, and single-file demos. This tool converts any image (PNG, JPEG, GIF, WebP, SVG) into a ready-to-paste data URI using the FileReader API, shows a preview and the exact size overhead Base64 adds (~33%), and offers two copies: the full URI for CSS/HTML or the bare Base64 for JSON payloads. The image is read locally — it is never uploaded.
How to convert an image to Base64
- Click Choose File and pick an image — PNG, JPEG, GIF, WebP, or SVG.
- Click Convert. A preview appears along with the full
data:image/…;base64,…string. - Check the size line: Base64 is about 33% larger than the original binary, so this works best for icons and small images (under ~10 KB is a common rule of thumb).
- Use Copy data URI for CSS (background-image) or HTML (img src), or Copy Base64 only for JSON and API payloads.
Using the output
The tool produces a data URI like this (truncated here):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…drop it straight into CSS or HTML:
/* CSS */
.logo { background-image: url("data:image/png;base64,iVBORw0…"); }
<!-- HTML -->
<img src="data:image/png;base64,iVBORw0…" alt="Logo">Frequently asked questions
When should I embed an image instead of linking it?
For small, frequently used assets: icons, logos, tiny backgrounds. Embedding avoids an extra HTTP request but inflates the HTML/CSS size by ~33% and blocks caching — large images should stay as separate files.
Is my image uploaded?
No. The file is read with the browser’s FileReader API entirely on your device; nothing is transmitted or stored.
Why is the Base64 bigger than my file?
Base64 encodes every 3 bytes into 4 characters, adding roughly 33% overhead plus the data: prefix. That’s the trade-off for embedding binary data as text.