How to Convert an Image to Base64 (and Back Again): Step-by-Step Guide

Converting an Image to Base64

1. Upload the image file you want to convert.
2. Convert. The tool outputs a Base64 string representing the image's raw data.
3. Copy the result — either the raw Base64 string, or the full data URI (including the data:image/png;base64, prefix) depending on where you're using it.

Converting Base64 Back to an Image

1. Paste the Base64 string you want to decode.
2. Convert. The tool renders the decoded result as a viewable image.
3. Download the image file to save it locally.

Raw String vs Full Data URI

A raw Base64 string is just the encoded data itself. A full data URI wraps that string with a prefix describing the format — data:image/png;base64, followed by the encoded data. If you're pasting the result directly into a CSS background-image: url() or an HTML <img src> attribute, you need the full data URI, not just the raw string — a common source of "it's not displaying" confusion.

Common Reasons Decoding Doesn't Work

• Missing the data:image/... prefix when pasting into an <img> tag or CSS.
• A truncated string — if part of the Base64 text got cut off when copying, the image will fail to decode or render incompletely.
• Extra whitespace or line breaks accidentally introduced into the string.