Image to Base64
Encode images as Base64 data URIs or decode data URIs back to images.
Deep Dive
Convert any image file to a Base64-encoded data URI that can be embedded directly in HTML, CSS, or JSON without referencing an external file. Also decodes data URIs back to downloadable image files. Processing is entirely local — your images are not uploaded anywhere.
Who uses this?
- Embedding a logo in a single-file HTML email template
- Inlining a small icon in a CSS `background-image` property
- Storing an image in a JSON configuration file
- Creating a self-contained HTML page with no external assets
Examples
Input
1×1 red pixel PNGOutput
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI6QAAAABJRU5ErkJggg==Common Errors & Fixes
Image does not display in the browser when using the data URI
Ensure the MIME type in the data URI matches the actual file type (e.g., `data:image/png` for a PNG file).
Data URI is too long for the use case
Large images produce very long data URIs. Host the image separately and reference it with a normal URL instead.
Expert FAQ
When should I embed images as Base64?
Base64 is useful for small icons and images to eliminate HTTP requests. Avoid it for large images — Base64 adds ~33% overhead to file size.
Does it work with SVG files?
Yes. SVG can be Base64-encoded, though for SVG it is often more efficient to embed the raw XML directly in HTML.
What is the maximum image size?
There is no hard limit, but browsers may struggle with very large files. Keep Base64-embedded images under 100 KB for best performance.