Image to Base64 Data URI Converter

Convert an image to a base64 data URI in your browser and copy it as a string, CSS background, or <img> tag. Nothing is uploaded.

Encoded in your browser — never uploaded. Base64 adds ~33% to the byte size; best for small icons/SVGs.

About this tool

A data URI embeds a file’s contents directly in your code as a base64-encoded string, so an image can live inside an HTML or CSS file with no separate network request. This converter reads an image you choose entirely in your browser and produces its data URI, ready to copy as a raw string, a CSS background-image value, or an <img> tag. Embedding images this way is ideal for small assets — icons, tiny logos, SVGs — where avoiding an extra HTTP request matters more than file size. Be aware that base64 encoding inflates the byte size by roughly a third, so large photos become unwieldy and are better served as normal files. Because everything happens locally, your images are never uploaded to a server.

How to use it

  • Click Choose an image and select a file (under 5 MB).
  • Review the preview and the size comparison.
  • Copy the data URI as a raw string, CSS, or <img> tag.
  • Paste it into your HTML or stylesheet.

Frequently asked questions

What is a base64 data URI?
It is a string that encodes a file’s binary content as base64 text, prefixed with its MIME type, like data:image/png;base64,iVBORw0…. Browsers treat it as if it were a real file, so you can embed an image inline in HTML or CSS.
When should I use a data URI for images?
For small, frequently used assets like icons or tiny logos, where eliminating a separate HTTP request improves load time. For larger images, a normal file is better because base64 bloats the size and cannot be cached separately.
Why is the base64 version bigger than the original?
Base64 represents 3 bytes of binary data using 4 text characters, so it adds about 33% overhead. A 9 KB image becomes roughly 12 KB as a data URI — fine for small assets, wasteful for large ones.
How do I use the data URI in CSS?
Put it in a url(): background-image: url("data:image/png;base64,…"). This tool gives you a ready-to-paste CSS line. The same string works in an <img> src attribute.
Is my image uploaded anywhere?
No. The file is read and encoded locally with the browser’s FileReader API. Nothing leaves your device, so even private or unreleased images are safe to convert.
Can data URIs be cached?
Not independently — they are part of the HTML or CSS that contains them, so they are cached only with that file and re-downloaded if it changes. This is another reason to reserve them for small, stable assets.

Related tools