Image

Image to Base64

Turn a small image into a Base64 data URI you can paste straight into CSS, HTML or JSON — no hosting required.

How to image to base64

  1. 1

    Add your file

    Drop your file into the box above or click to browse. It's processed privately in your browser — nothing is uploaded.

  2. 2

    Choose your options

    Adjust the available settings to get exactly the result you need.

  3. 3

    Download the result

    Run the tool and download your file instantly — no sign-up, no watermark.

About Image to Base64

A data URI puts a file inside a URL. Rather than pointing a browser at an image on a server, you hand it the image directly, which removes a network request from the page load. For a handful of small assets that is a measurable win.

The trade-off is size and caching. Base64 encoding inflates a file by roughly a third, and an inlined image cannot be cached independently of the document that contains it — change one line of CSS and every image inside it is downloaded again. That is why inlining is a technique for icons and sprites, not for photographs.

The three output formats cover the places these strings actually end up: a bare data URI for JSON payloads and hand-written markup, a CSS background-image rule ready to paste into a stylesheet, and a complete HTML img tag. All of it is produced in your browser, so unreleased artwork never leaves your machine.

Frequently asked questions

What is a data URI?+

A way of embedding a file's contents directly in a URL. Instead of pointing at an image on a server, the URL carries the image itself, so no separate request is made.

When should I inline an image?+

For small assets that are needed immediately — an icon, a tiny logo, a spacer, a background pattern. Inlining saves a network round trip, which matters most for things that block first paint.

When should I not?+

For anything large. Base64 makes a file about a third bigger, the data cannot be cached separately from the page, and it is re-sent every time the page changes. Over 1 MB the tool stops you.

Which output should I pick?+

Data URI for JSON or a src attribute you are writing yourself, CSS background for a stylesheet rule, and HTML img for a ready-made tag.

Does it work with SVG?+

Yes. SVG inlines particularly well because it is already text and tends to be small.

Is my image uploaded?+

No. The conversion happens in your browser, so unreleased assets stay private.

More Image tools