Image to Base64

Select an image file to convert it to a Base64 encoded string. Toggle the data URI prefix for ready-to-use CSS/HTML output. All processing happens in your browser.

Image preview

About Image to Base64

This tool converts images to Base64-encoded strings entirely in your browser. No data is uploaded to any server.

  • Data URI: With the prefix enabled, the output is ready to use in CSS background-image or HTML <img src="...">.
  • Raw Base64: Without the prefix, you get the raw encoded string.
  • Supports JPEG, PNG, GIF, WebP, SVG and other browser-supported image formats.

Embedding an image as a data URI removes a request and adds about a third to its size, because base64 needs four characters for every three bytes. That trade is worth taking for something small and always needed, such as an icon in a stylesheet or a logo in an email, and not worth taking for a photograph. An embedded image also cannot be cached separately, so it is downloaded again with every copy of the file that carries it.

Related tools

Base64 Encode QR Code Generator Color Converter

Is the markup fighting you?

Escaped entities, mangled encodings and content that renders one way in the CMS and another on the page usually mean something in the pipeline is guessing. We build front ends and the publishing path behind them, so what you write is what a visitor sees.

Talk to us about your site

Frequently Asked Questions

When is a data URI worth it?
For small images that are needed immediately: an icon, a spacer, a logo in an HTML email where external images are blocked by default. The rule of thumb is a few kilobytes; above that the extra size outweighs the saved request.
Why is the encoded version bigger?
Base64 represents three bytes as four characters, so the result is a third larger before any prefix. Compression recovers some of that in transit, but the browser still holds the larger form in the document.
Does it hurt caching?
Yes, and this is the part people miss. A separate image file is cached once and reused; an embedded one is part of the stylesheet or page and is re-downloaded whenever that file changes. For anything used across many pages, a normal image wins.
Which formats can I embed?
Any of them, since base64 is indifferent to the contents. SVG is the interesting case: it is text already, so embedding it as a data URI is often larger than simply inlining the SVG itself.
Is my image uploaded?
No. The file is read by your browser and encoded in the page, so it never leaves your machine. That matters when the image is a screenshot of something internal, which is most of the time.