Tools
Image to Base64
Convert image to Base64
Turn an image into a Base64 string ready to paste into your HTML or CSS.
Drop images here
or click to choose files, or paste from the clipboard
About this tool
Encoding an image as Base64 lets you embed it straight into your code with no separate file: a small icon inside a CSS stylesheet, a logo in an HTML email signature, an image inside JSON for an API, or an asset in a template that must work offline. It saves a request to the server or an extra attachment.
Drop one or more images onto the upload area, click to choose them or paste with Ctrl+V. Each image appears with a thumbnail, its file size and the code in a text box. Press “Copy data URI” for the full string (data:image/png;base64,…) ready for an src attribute or a CSS url(), or “Copy raw Base64” if you only need the encoded data.
Encoding happens in your browser: images are never sent to a server. Image files of up to 5 MB each are accepted, to keep the page from freezing. Remember that Base64 is roughly 33% larger than the original file, so it is best kept for small images. The tool does not resize or compress the image.
Frequently asked questions
What is the difference between Base64 and a data URI?
Base64 is just the encoded data. A data URI puts the file type in front (data:image/png;base64,), which is what you need to use it in an HTML src or a CSS url().
How do I use a Base64 image in HTML or CSS?
In HTML, paste the data URI into the src attribute of an img tag. In CSS, put it inside url(), for example in background-image.
Why is the code bigger than the image?
Base64 represents every 3 bytes with 4 characters, so the resulting text is roughly a third larger than the original file.
When should I avoid Base64 images?
With large images or ones repeated across many pages: they bloat your HTML or CSS and the browser cannot cache them separately.