Turning an image into Base64 takes seconds once you know what the output looks like and where it goes. This is the whole workflow, plus the three places data URIs are commonly pasted.
Encode the image
Open the Image to Base64 tool, drop your file, and the data URI appears immediately — along with the file's name, size, dimensions and MIME type. Nothing is uploaded; the encoding happens in your browser with FileReader.
Copy the form you need
- Full data URI (`data:image/png;base64,…`) — for `<img src>` and CSS `url()`.
- Raw Base64 payload only — for JSON fields or APIs that add their own prefix.
- A .txt file — handy when the string is too long to handle comfortably in the clipboard.
Where to paste it
In HTML
`<img src="data:image/png;base64,iVBORw0KGgo...">` — the image renders with zero additional requests, which is exactly why small icons are often shipped this way.
In CSS
`background-image: url("data:image/png;base64,...");` — common for backgrounds that must appear before any image request finishes.
In JSON
A string field carrying the raw payload (or the full URI) is the standard way to move an image through an API without multipart encoding.
Try it with these tools
Related articles
Guides
What Is Base64 Image Encoding?
What Base64 actually does to image data, why data URIs exist, and the size cost that decides when embedding beats linking.
Read articleGuides
How to Convert Base64 Back to an Image
Decoding a Base64 string or data URI into a real image file, checking what you got, and fixing the errors that stop decoding.
Read articleEvery tool mentioned in this article runs entirely in your browser — see privacy for what that means.