Image to Base64
Convert an image to Base64.
Drag and drop an image, or click to choose one
Select a single file
Usage examples
Embedding a small icon directly in CSS
Use it to drop the result straight into CSS's background-image: url(data:image/png;base64,...), avoiding a separate image request.
Including an image inside JSON or a config file
Useful when you want to embed sample image data as text inside code or a config file, without a server request.
Inlining an image in HTML email
For mail clients that block external image links, converting an image to a Data URI lets you embed it directly in the HTML.
Frequently asked questions
Is my uploaded image sent to a server?
No. Conversion happens entirely in your browser, and the image is never sent to a server.
What's the difference between Data URI and Base64 only?
A Data URI is the full string starting with data:image/png;base64,, ready to paste directly into <img src="..."> or a CSS url(). Base64 only is just the raw encoded value that follows it, useful when you're assembling the format string yourself somewhere else.
Does converting to Base64 make the data bigger?
Yes. Base64 encoding is roughly 33% larger than the original. That's the trade-off for representing binary image data safely as text, so it's best to avoid shipping large images this way unless you specifically need to.
What image formats are supported?
JPG, PNG, WebP, GIF, and most other image formats your browser can read.