Image to Base64

What the image to Base64 tool does

You want an image to live inside your code instead of sitting in a separate file. This tool does that. Drop in any image, and it hands you the image as a Base64 string, plus a ready-made HTML tag and a ready-made CSS line, each with the image already baked in. Copy whichever one you need and paste it straight into your page.

Everything happens in your browser. The image never leaves your machine, which is worth knowing if it is something you would rather not upload anywhere.

How to use it

1. Add your image. Drag it onto the drop area, or click to pick a file. A preview appears so you know it loaded.
2. Press Encode. Three boxes fill in: the raw Base64, an HTML image tag, and a CSS background line.
3. Copy the one you want. Each box has its own Copy button.

Reset clears everything for the next image.

What a data URI is

Normally an image tag points somewhere else, like src="logo.png", and the browser makes a separate trip to fetch that file. A data URI skips the trip by putting the image itself right there in the code. It looks like data:image/png;base64, followed by a long string, and that string is the entire image, written out in Base64 text. The browser reads the string, turns it back into the picture, and shows it, with no separate file and no extra request. The HTML and CSS this tool gives you are exactly that, a data URI wrapped in the right bit of markup.

How it works

When you add an image, the browser's built-in FileReader reads the file and produces the data URI for you, already in the data:image/...;base64, form. The Base64 part is doing the real job: an image is binary, and Base64 rewrites binary as plain text so it can sit safely inside an HTML or CSS file. The one cost to remember is size. Base64 turns every three bytes into four characters, so the encoded image is about a third larger than the original file. That single fact drives most of the advice further down.

The three outputs, and where each goes

The tool gives you the same image three ways so you do not have to assemble anything by hand:

• Base64 code. The raw string on its own. Use this when your own code or framework wants just the encoded data.
• HTML image code. A complete <img> tag with the data URI already in the src. Paste it straight into your markup, and adjust the width and height to suit.
• CSS image code. A background-image line with the data URI in place. Drop it into a stylesheet to use the image as a background.

When inlining helps, and when it hurts

Embedding an image this way is a genuine optimisation in the right spot and a quiet mistake in the wrong one. The deciding factor is almost always size.

It helps when the image is small, a little icon, a logo, a loading spinner. You save the browser a separate request, so the image shows up the instant the page is parsed, which is handy for something important at the top of the screen. It is also the neat choice when you want one self-contained file, an HTML email or report that has to carry its own pictures, or a page that must work offline. And it sidesteps broken image paths, since there is no file to go missing.

It hurts when the image is large, like a photograph. That 33 percent size bump rides along every time, and because the image now lives inside your HTML or CSS, it cannot be cached on its own. A normal image file is downloaded once and then reused from cache across every page. An inlined one is re-downloaded with the page each time, and if it sits in your stylesheet, changing one line of CSS means the whole thing, image and all, gets fetched again. A good rule of thumb: inline only small images, a few kilobytes at most, compress them first, and leave anything bigger as a normal file.

Questions people ask

How do I put an image directly into my HTML or CSS?

Add the image here, press Encode, and copy the HTML or CSS output. Each one already contains the image as a data URI, so you just paste it in. No separate image file is needed.

Does encoding make the image bigger?

Yes, by about a third, because Base64 turns every three bytes into four characters. That is why this approach suits small images and not large photographs.

When should I not do this?

For large images, and for images you reuse across many pages, like a site logo. A normal file gets cached once and reused, while an inlined image is re-downloaded with every page that holds it.

Is my image uploaded anywhere?

No. The encoding runs entirely in your browser, so the image stays on your device.

References

1. Masinter, L. (1998). RFC 2397: The "data" URL scheme. Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc2397
2. Josefsson, S. (2006). RFC 4648: The Base16, Base32, and Base64 Data Encodings. Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc4648
3. MDN Web Docs, Base64 (glossary entry and encoding overview). https://developer.mozilla.org/en-US/docs/Glossary/Base64