Base64 Image Encoder
Convert images to Base64 data URIs and decode Base64 back to images. Both ways.
Encode an image into a Base64 data URI so you can paste it directly into HTML, CSS, or JSON, no separate image file required. You can also decode a data URI back into a downloadable image. Useful for inlining tiny icons, embedding an image in an email template, or storing a small graphic in a config or JSON payload.
Encoding and decoding happen entirely in your browser. Your image is never uploaded, so it stays on your device. The conversion is pure local computation, with nothing logged or sent anywhere.
Drop an image to encode
Get a data URI for inline CSS/HTML
🔒 100% Browser-Based
Your image is processed entirely in your browser. Nothing is uploaded. Verify in DevTools → Network tab — zero outbound traffic with file content.
About Base64 Image Encoder
Convert an image to a Base64 data URI for inline CSS/HTML, or decode a Base64 string back into a downloadable image. Both directions, fully in your browser.
How to use the Base64 Image Encoder
- 1
Choose encode or decode
To inline an image, upload it and the tool produces a data URI. To turn a data URI back into a file, paste the string and the tool reconstructs the image for download.
- 2
Encode your image
Upload a small PNG, JPG, SVG, or GIF. The tool outputs a full data URI beginning with data:image/...;base64, followed by the encoded text, ready to copy.
- 3
Paste it where you need it
Drop the string into an img src, a CSS background-image: url(...), or a JSON field. The browser renders it directly with no extra HTTP request to fetch the file.
- 4
Decode when needed
Paste any image data URI to preview and download the original file. Handy for pulling an inlined icon out of someone else's stylesheet or markup.
When inlining with Base64 actually helps
Base64 data URIs shine for tiny, frequently used assets: a small icon, a 1x1 spacer, a sprite, or a logo in an HTML email where external images get blocked. Inlining bundles the image into the HTML or CSS itself, so it loads with the page and removes a separate HTTP request. For a handful of small icons, eliminating those round trips can speed up first render.
It also makes assets portable: a single HTML file or JSON document carries its own images with no missing-file risk, ideal for self-contained email templates, exports, and offline documents. And it sidesteps cross-origin issues since the data lives inline.
The 33% size cost and when to avoid it
Base64 represents binary data using only printable text characters, which inflates the byte count by roughly 33%. A 9 KB image becomes about 12 KB of text. That overhead is fine for a 1 KB icon but punishing for a large photo.
Avoid inlining large images: the bloated string slows down parsing of the HTML or CSS that contains it, and inlined data cannot be cached separately. A normal linked image is downloaded once and reused across every page, but an inlined one is re-sent with every page that includes it and re-parsed each time. As a rule of thumb, inline assets under a few KB and keep larger images as regular linked files.
Quick tips
- ✓Inline only small assets, ideally under a few KB. The 33% size increase and lost caching make Base64 a poor fit for large photos.
- ✓For SVG icons, consider that the raw SVG markup is often smaller inlined as text than the same icon Base64-encoded as a PNG.
- ✓Remember inlined images are not cached separately, so an icon repeated across many pages is re-downloaded with each page rather than fetched once.
- ✓When pasting into JSON, the data URI is already a safe string, but watch for length limits in fields or databases since Base64 images can be long.
- ✓Keep the full prefix (data:image/png;base64,...). Stripping the data: header breaks rendering because the browser no longer knows the content type.
Frequently asked questions
When should I inline an image as Base64?
For tiny icons or single-request pages. Base64 is ~33% larger than the binary, so avoid it for big images.
Can I decode a Base64 string back to a file?
Yes — paste a data URI or raw Base64 and download the resulting image.
Is my image uploaded?
No. Encoding and decoding happen locally in your browser.
Why is the Base64 string bigger than my original file?
Base64 encodes binary data using only text characters, which adds about 33% to the size. A 9 KB image becomes roughly 12 KB. This is normal and is the trade-off for inlining.
When should I inline an image instead of linking it?
Inline tiny, frequently used assets like small icons to remove an HTTP request, or to make an email or document self-contained. Keep larger images as linked files so they can be cached and reused.
What is the data:image prefix for?
That prefix is the data URI header. It tells the browser the content type (such as image/png) and that the rest is Base64. Without it, the string will not render as an image.