Image to Base64
Convert an image to a Base64 data URI — for CSS, HTML, or JSON. Runs locally.
Drop an image here, or click to choose
PNG, JPG, SVG, GIF, WebP — up to 5 MB. Never uploaded.
Image to Base64 converts an image into a Base64-encoded data URI you can embed directly in CSS, HTML, or JSON — no separate file or extra HTTP request. Drop in a PNG, JPG, SVG, GIF, or WebP and copy the data URI, a ready-made CSS background rule, or a complete img tag. The image is read locally and never uploaded.
- ✓Data URI, CSS background, and <img> tag output
- ✓Works with PNG, JPG, SVG, GIF and WebP
- ✓Shows original and Base64-encoded size
- ✓100% private — the image never leaves your browser
When to Inline an Image as Base64
Encoding an image as a data URI removes one network request, which is handy for tiny icons, email templates that can't reference external files, and embedding an image inside a JSON payload. The trade-off is size: Base64 is about 33% larger than the binary file and can't be cached separately, so it's best for small assets — large images are usually better served as normal files.
How to Use It
- 1Drag an image onto the drop zone, or click to choose a file from your device.
- 2The preview, MIME type, and both original and Base64-encoded size appear immediately — nothing is uploaded.
- 3Copy the raw data URI, or grab the ready-made CSS background-image rule or HTML <img> tag depending on where you're pasting it.
- 4For CSS, paste the rule directly into a class. For HTML, paste the <img> tag as-is — the data URI replaces what would normally be a file path.
Data URI vs a Normal Image File
| Data URI (inlined) | Normal file (linked) | |
|---|---|---|
| File size | ~33% larger (Base64 overhead) | Original binary size |
| HTTP requests | Zero — travels with the HTML/CSS | One request per image |
| Browser caching | Not cached separately | Cached and reused across pages |
| Best for | Small icons, email, self-contained files | Photos, large images, anything reused sitewide |
Common Uses
- ▸CSS background icons — Inline a small icon as a data URI so it loads with the stylesheet and needs no extra request.
- ▸Email templates — Embed images directly where linking to external files is unreliable or blocked.
- ▸JSON and APIs — Include an image inside a JSON document or API payload as a Base64 string.
- ▸Self-contained HTML — Produce a single HTML file with images embedded, with no external dependencies.
- ▸Offline-first apps — Bundle small images directly into JavaScript or JSON so the app works without a network request for assets.