Base64 Image Encoder / Decoder
Encode any image to a base64 data URI for use in CSS, HTML, or API payloads. Or paste a data URI to preview and download the image. Everything runs in your browser.
When to use base64 image encoding
Embed tiny icons or patterns directly in a stylesheet with background-image: url('data:image/svg+xml;base64,…'). Eliminates one HTTP request per image.
Many email clients block externally-hosted images. Inlining images as data URIs guarantees they display without needing a hosted URL.
When packaging an HTML report or tool as a single file (no external assets), data URIs let you embed all images inside the HTML itself.
Some APIs accept image data as a base64 string in a JSON field rather than multipart form data. Convert the image first, then paste the string into your request body.
Data URI anatomy
The structure of a base64 image data URI
data:URI scheme — tells the browser this is an inline data resource
image/pngMIME type — the format of the embedded image
base64,…Encoding type followed by the actual base64-encoded image bytes
Frequently asked questions
Why is the base64 output larger than the original image?
Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters — a 33% size overhead. A 10 KB PNG becomes ~13.3 KB as base64. This is the unavoidable cost of encoding binary as text.
What is the difference between a data URI and raw base64?
A data URI includes the MIME type prefix: data:image/png;base64, followed by the base64 string. Raw base64 is just the encoded string without the prefix. HTML <img src> and CSS url() both need the full data URI — most APIs and database fields just need the raw base64.
When should I use a data URI instead of a regular image URL?
Data URIs are best for very small images (icons, small logos, SVGs under 2 KB). For anything larger, a regular URL is better — the browser can cache it, CDNs can compress and serve it efficiently, and lazy loading works. Large data URIs bloat HTML/CSS files and cannot be cached independently.
What image formats are supported?
Any format the browser supports: PNG, JPEG, GIF, WebP, SVG, ICO, AVIF, and BMP. The MIME type is detected from the file and included in the data URI automatically.
Can I use this to decode a data URI from my code?
Yes — paste either a full data URI (starting with data:image/) or raw base64 into the decode input. The tool renders a preview and lets you download the image. Useful for inspecting images stored in databases or API responses.
Related Tools
All conversions run in your browser — nothing is uploaded.
Browse all 26 converters →