Image to Base64
Turn an image into a Base64 data URI you can paste into code. 100% free, no signup. Everything runs in your browser.
This free converter turns an image into Base64 text, ready to paste straight into your code as a data URI. Instead of linking to a separate file, the whole image travels inside your HTML, CSS or JSON as a long string of characters. That removes a network request, which is why small icons, logos and email signatures are often embedded this way. The tool gives you the output in four shapes: a plain data URI, a ready made CSS background rule, a complete HTML img tag, or the raw Base64 with no prefix, which is what most APIs expect. Everything is encoded by your own browser, so images you are not ready to publish stay on your machine.
How to use
- Click Choose an image and pick a file. Small images work best, ideally under 100 KB.
- Pick the output you need from the four tabs above the box.
- Choose Data URI for a src attribute or a JSON field, CSS background for a stylesheet rule, HTML img tag for a complete element, or Raw Base64 when an API asks for the string without the data prefix.
- Press Copy and paste it wherever you need it.
- Check the size increase figure. Base64 always makes a file bigger, so if the number looks alarming the image is probably too big to embed.
- Press Clear to start again with a different image.
Why use our image to base64?
The four output modes are what make this quicker than a plain encoder. Most tools hand you one long string and leave you to remember whether CSS wants quotes around it, or whether your API wants the data prefix stripped. Getting that wrong produces a broken image with no useful error, and it is a genuinely annoying ten minutes to debug. Here you pick the shape you need and paste it.
The size figures matter too. Base64 makes every file about a third larger, and embedding a large photo can bloat a stylesheet badly enough to slow the whole page. Seeing the increase before you paste stops that happening. If the number is too high, the image compressor and image resizer will bring the source down first. For decoding Base64 text rather than images, the Base64 encoder and decoder handles that side.
Who is this tool for?
Front end developers embed small icons and logos directly in CSS so the browser does not make a separate request for a two kilobyte image. For icons used on every page that is a real speed win, and it removes the risk of a broken image path after a deploy.
Email developers rely on it because many email clients block linked images by default, while some will render an embedded one. Anyone building an HTML signature meets this immediately. Developers working with APIs encode images to Base64 because JSON cannot carry binary data, so an upload endpoint often expects exactly this string. Testers and support staff paste a small screenshot into a bug report as a self contained snippet. And people building single file HTML documents, where everything must live in one file with no folder of assets, could not do it any other way.
Frequently asked questions
It is a way of putting a whole file inside a URL. Instead of pointing at an image on a server, the src contains the image data itself, written as Base64 text after a short prefix that says what type it is.
Base64 represents every 3 bytes as 4 text characters, so the output is roughly a third larger than the file. That is the unavoidable cost of turning binary data into safe text.
Keep it small, ideally under 100 KB and preferably under 10 KB. Icons, logos and simple graphics are good candidates. Photos usually are not, because the string becomes so large it slows the page down more than a separate request would.
Data URI for an img src or a JSON value. CSS background for a stylesheet. HTML img tag when you want the whole element. Raw Base64 when an API asks for the string without the data prefix, which is common.
No. Your browser reads the file and encodes it locally. Nothing is transmitted, so unreleased artwork and internal graphics stay private.
Not on their own. A linked image file is cached once and reused across pages, while an embedded one is re-downloaded with every page that contains it. That is the main reason to embed only small images.
Yes, SVG files encode fine. For SVG you often do not need Base64 at all though, since you can usually paste the SVG markup directly into your HTML, which stays smaller and can be styled with CSS.