Base64 Image Encoder / Decoder
Encode an image to a base64 data URI for CSS backgrounds and inline HTML, or decode a data URI back to a viewable image.
Base64 Image is coming soon. In the meantime, try the JSON → CSV converter, which has flattening built in.
How it works
Encode: FileReader API converts to data URI
The browser's FileReader.readAsDataURL() reads the image bytes and produces a data URI in the format data:image/png;base64,<base64string>. Nothing is uploaded — conversion happens locally.
Decode: paste data URI to preview
Paste a full data URI or raw base64 string. The decoded image is rendered in the browser for visual verification. Download as the original image format.
Example
Embedding a small logo in a CSS stylesheet as an inline background
logo.png (2.4 KB)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA… (3.2 KB) ~33% larger than source
Base64 encoding inflates binary data by ~33%. Use data URIs for small images — for large images, serve them as files to avoid bloating HTML/CSS.
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 increase. A 1KB PNG becomes ~1.33KB as base64. This is the inherent cost of encoding binary as text.
When should I use a base64 data URI vs a regular image URL?
Data URIs eliminate an HTTP request, which helps for very small images (icons, favicons, loading spinners). For anything larger than a few KB, a regular URL is better — it can be cached by the browser, compressed by the CDN, and lazy-loaded.
Related Tools
All conversions run in your browser — nothing is uploaded.
Browse all 26 converters →