Turn any image into a data URI for CSS or HTML. Drag, drop, copy.
A data URI embeds an image as Base64 text, letting you drop small logos and icons straight into a stylesheet or HTML with no separate file. This tool encodes locally with the browser's FileReader, so your image never leaves your device. Note that Base64 adds roughly a third to the file size, so it suits small assets best.
Converting an image to Base64 turns the picture into a long string of text (a "data URI") that you can paste directly into HTML, CSS or an email instead of linking to a separate image file. The browser decodes the text back into the image, so it displays with no extra network request. The tool above does this conversion both ways, which is handy when you want a small graphic to travel inside the code itself rather than as a file that has to be uploaded and hosted somewhere.
The trade-off: size and caching. Base64 encoding makes the data roughly a third larger than the original file, and an embedded image cannot be cached by the browser separately, so it is re-downloaded every time the page or email is loaded. That is fine for something tiny used once, but it is the wrong choice for large or repeated images, where a normal linked file that the browser can cache is faster overall.
When to use it. The sweet spot is small, one-off assets: a little icon in a stylesheet, a logo in an HTML email (where linked images are often blocked until the reader allows them), or a placeholder baked into a template. For photos, big graphics, or anything reused across many pages, keep the image as a separate file. As a rule of thumb, embed only when the image is small and saving the extra request genuinely matters.