Image ↔ Base64
Convert images to data URIs (or back) — handy for inline assets.
About Image ↔ Base64
Image ↔ Base64 turns an image into a Base64 data URI you can paste straight into HTML, CSS, or a JSON API, and decodes a data URI back into a downloadable image. Inline images cut a network round-trip — useful for small icons in a stylesheet, tiny images embedded in a JSON response, or test fixtures that should not depend on external files.
Worked example: drop in a 32×32 PNG icon and the output is a data:image/png;base64,iVBORw0KGgoAA... string ready to paste into a CSS rule (background-image: url(data:image/png;base64,...)) or an HTML <img src='data:...'> tag. Going the other way, paste a data URI and the decoded image renders inline as a preview — handy when you have extracted a data URI from someone's HTML and want to see what the image actually is.
Two practical limits worth knowing. Base64 inflates byte size by about 33% — three source bytes become four printable characters — so an inlined image is always larger than the equivalent file. The right use is small assets where saving the HTTP round-trip is worth the extra bytes (small icons, tracking pixels, fonts under a few KB). For anything more than a few KB, prefer real image files referenced by URL; large data URIs bloat HTML and CSS, slow first paint, and cannot be cached separately by the browser.
Encoding and decoding both run in your browser. Sensitive screenshots and unreleased design assets are never uploaded.